css 后知后觉

1.padding不可以是负值，margin可以使负值。

2.如果块级正常流的元素的高度设置为auto，而且只有块级子元素，其默认高度将是从最高块级子元素的外边框边界到最低级块级子元素外边框边界之间的距离。因此，子元素的外边距会“超出”包含这些子元素的元素。不过，如果块级元素有上内边距或下内边距，或者有上边框或下边框，其高度则是从其最高子元素的上外边距边界到其最低子元素的下外边距边界之间的距离。

<div style="height:auto;background:silver;">
<p style="margin-top:10px;margin-bottom:10px;">a paragraoh!</p>

</div>
<div style="height:auto;border-top:1px solid red;border-bottom:1px solid red;background:silver;">
<p style="margin-top:10px;margin-bottom:10px;">another</p>
</div>

如果在上例中将边框改为内边距，对div的高度作用还是一样：同样会把段落的外边距包含在内。

3.合并垂直外边距

<style>
#ul_box{margin-bottom:15px;background:silver;}
#ul_box li{margin-top:10px;margin-bottom:20px;}
h1{margin-top:10px;}
</style>

<ul id="ul_box">
<li>test test test test test test test test test test test test test </li>
<li>test test test test test test test test test test test test test </li>
</ul>
<h1>hello</h1>

li的最后一项的margin—bottom:20px; ul的margin-bottom:15px; 后面的ul的上边距为10px，所以一旦合并这些外边距，li的结尾到h1的开始之间有20px的距离。这里，ul的margin-bottom、li的margin-bottom、h1的margin-top是都参与合并的。效果如下图：

注意：这里要区分出来ul的background和li的margin。由于ul的height没有设置，即为默认的auto，但他没有border，也没有padding，因此ul的background的底部紧贴着最后一个li的文字底部，即，最后一个li的margin-bottom没有显示出来。

上例中，如果只改变#ul_box的样式为如下：

#ul_box{margin-bottom:15px;background:silver;border:1px solid red;}

#ul_box li{margin-top:10px;margin-bottom:20px;}
h1{margin-top:10px;}

这样的话，ul的background的底部不会贴着最后一个li的文字，而是会显示出来最后一个li的margin-bottom，这时候，参与合并的只有ul和h1，合并的结果是ul和h1之间有15px的间距，效果如下图：

 4.关于居中。

　　text-align:center;只应用于块级元素的内联内容。若要使得块级元素相对于其父元素居中，则给该块级元素设置:margin:0 auto;样式。

　　.text_center{text-align:center;}

　　(1)“对”。<div class="text_center">可以将这段文字居中</div>

　   (2)“对”。<div class="text_center"><img src="..." /></div>，<img>标签也属于内联内容，因此，div里面的内联内容img也可以居中。

　　(3)“不对”。

　　<div class="text_center">

　　　　<p style="100px;heihgt:100px;border:1px solid #333;">p标签是不可能居中的，因为p标签是块级元素。如果给p标签写text-align:center;这样的样式，那么p标签里的文字是可以居中的。但是p标签相对于外层的div是不可以居中的。　　　　　</p>

　　</div>

　　(4)“对”。

　　<div class="text_center">

　　　　<p style="100px;heihgt:100px;border:1px solid #333;margin:0 auto;text-align:center;">这里，p标签相对于其父元素div是居中的，它其中的文字相对于p标签的宽度也是居中的。</p>

　　</div>

5.某一元素不设置宽度的话，其默认的width是100%，即其父元素的宽度。在我们写样式的时候，尽量少定义元素的宽度，尽量设置padding、margin这些样式来让浏览器自己计算某一元素的宽度，某元素的宽度=该元素父元素的宽度-该元素的水平左右padding之和-该元素的水平左右margin之和-该元素的左右border之和。

6.行间距=（line-height的值减去font-size的值）/2。行间距只能用于非替换元素，非替换元素例如p a li等等。常见的替换元素</img>