UC知道请问css中div的相关问题?
来源：百度知道 编辑：UC知道 时间：2024/05/09 09:31:29
请问css中div的相关问题?
第一个问题:
--------------------------------------
<style>
body{
margin:0px;
}
.a{
background:red;
}
.a p{
background:yellow;
width:200px;
}
</style>
<div class="a"><p>123</p></div>
为什么这个div在火狐中会产生一个空行?什么原因?
如果给body加上border:1px solid black的话,那么空行就会消失.
--------------------------------------------
第二个问题:
<style>
body{
margin:0px;
}
.a{
border:1px solid black;
background:red;
}
.a p{
background:yellow;
width:200px;
}
</style>
<div class="a"><p>123</p></div>
在火狐中这个div的高度是怎么计算的?
这个div里面上下怎么都有padding ,这个padding又是多少?
然后div里的p的高度是多少?
第一个问题:
--------------------------------------
<style>
body{
margin:0px;
}
.a{
background:red;
}
.a p{
background:yellow;
width:200px;
}
</style>
<div class="a"><p>123</p></div>
为什么这个div在火狐中会产生一个空行?什么原因?
如果给body加上border:1px solid black的话,那么空行就会消失.
--------------------------------------------
第二个问题:
<style>
body{
margin:0px;
}
.a{
border:1px solid black;
background:red;
}
.a p{
background:yellow;
width:200px;
}
</style>
<div class="a"><p>123</p></div>
在火狐中这个div的高度是怎么计算的?
这个div里面上下怎么都有padding ,这个padding又是多少?
然后div里的p的高度是多少?
第一个问题:
由于p标签的margin没有清空导致火狐里出现上下边距离
解决方法:body,p{ margin:0px; }
你说"如果给body加上border:1px solid black的话,那么空行就会消失.";这句话是不对的,空行不会消失在火狐中;
第二个问题:
所有浏览器中的显示高都等于 margin + border + padding + height;
这个div中的margin border padding height四个属性都为默认自动,在里面没内容的情况下为0;里面有内容的话根据内容自动高;
p中由于margin没有清0所以它有一个默认margin高所以在火狐中撑开两行;由于p中有字了,一般浏览器默认字体高为16px,所以p的高为16px;p撑开了div所以div的高也为16px;
div中padding为默认0;
另外这句a p{ background:yellow; width:200px; } 你给p设置宽200px是无效的,只有块元素才能设置宽高;给它加个display:block就可以了
大哥~
<P></P>标签，是段落的意思，html里规范就是段落间是空行的，你用<p>123</p>当然会空一行！你想让他不空行，你用自定义标签去定义就OK了，干嘛要用html的固定标签呢？
div里的高度当然是你自己定义的，你不定义，他就默认，默认的高度就是能把你输入的内容都显示出来。你定义了a，a就有高度，你定义了P，P就有高度。
所有浏览器中的显示高都等于 border + padding + height;
margin是外边距不能算在div的高度里