CSS的一些小的注意点整理

1) a标签无法继承来自父元素的字体颜色属性，但可以继承与font-开头相关的属性（字体大小、字体粗细等）

2) height,width:仅仅表示盒子内容的宽高，不包含内边距，但background覆盖内边距和边框。

 

3) CSS中存在一个margin collapse，即边界塌陷或者说边界重叠。对于上下两个并列的div块而言，上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值，所以从这个意义上说：CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可，左右边距则没有此规矩。

但对于父块DIV内含子块DIV的情况，就会按另一条CSS惯例来解释了，那就是：对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充（文本…），那其高度就是其子元素顶部和底部边框边缘之间的距离。

解决父子DIV中顶部margin collapse的问题，需要给父div设置：

     a. 边框，当然可以设置边框为透明;

     b. 为父DIV添加padding，或者至少添加padding-top；此外，还可以通过over-flow来解决，给父DIV写入：overflow:hidden;

 

4) <标签>内容</标签>  “标签”的text–align:center属性是让中间的“内容”（行内，块元素均可）居中，而不是标签本身居中，放在标签中和其子元素（前提子元素为块级效果才一样，否则无效，因此建议都直接放在要对齐元素的父元素）中效果一样。另外vertical-align:middle不是center别搞混了。

 

5) 将一个元素（图片或文字等）浮动，紧跟着的文字会自动往上在元素旁边环绕，而不是被图片遮挡，即使文字不浮动。这也是浮动设计的初衷，文字设置浮动反而会因为段落宽度导致被挤下到元素下方。若是将文字浮动，其他元素即使不浮动也会围绕文字旁边，不会与文字重叠。

 

6) img是替换内联元素 replaced inline element，属于inline element类目。height/width/padding/margin均可用。效果等于块元素。

行内非替换元素，例如,height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和padding left、right改变宽度。

7) position:absolute 根据最近已经定位的父元素（relative还有absolute,fixed都可）定位

8) 行内块元素有对准基线的问题，元素下方会多出3px的空白，统一设置vertical-align: 除baseline外的其他值均可（middle, bottom等），另外加上浮动则不会有此问题。

9) margin可以设置负值，有如下用途：

     a.用于边框重叠覆盖，起到表格的效果，每条边都是同样粗细；

     b.设置left:50%再用margin-left=负值向左移动直到想要的位置