CSS细节

写起这篇文章，是因为阅读张鑫旭到的一篇文章《CSS的学习瓶颈》，里面提到了要重视CSS的细节和实现机制。确实：有必要掌握一些关于CSS方面的细节，而不是遇到任何页面，都添加css.reset.下面取材截图于张鑫旭的博客：

 

下面回归正题：

一.关于这4个问题的答案：

1.dl, dt, dd三个标签浏览器默认margin值多少？是否有标签默认文字粗体？

dl标签：有默认margin（top,bottom且相同）值，没有默认padding值。

在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中：margin:12px 0px;

在IE6.0,7.0中：margin:19px 0px;

dd标签有默认margin-left：40px;(在所有上述浏览器中)。

{

拓展：需要注意的是ul、ol具有默认padding。

ol,ul标签：有默认margin-（top,bottom且相同）值，有默认padding-left值

在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中：margin:12px 0px;

在IE6.0,7.0中：margin:19px 0px;

默认padding-left值：在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中都是padding-left：40px;

在IE6.0,7.0中没有默认padding值，因为ol,ul标签的边框不包含序号。

}

2.line-height:150%和line-height:1.5的区别是？

有单位时，子元素继承了父元素计算得出的行距；无单位时继承了系数，子元素会分别计算各自行距（推荐使用）。例如：

1）  当line-height:xxx %时：
body{ font-size:14px; line-height:150%;  }
h1{ font-size:26px; }
实际是：
body{ line-height:21px; /* 14px*150%=21px */ }  
h1{ line-height:21px; } /* 继承父元素计算出来的line-height ,21px */

2 ） 当line-height:x.x 时：
body{ font-size:14px; line-height:1.5;  }
h1{ font-size:26px; }
实际是：
body{ line-height:21px; /* 14px*1.5=21px */ }   
h1{ line-height:39px; /* 26px*1.5=39px */ }   

 

3.float为何会让外部容器高度塌陷？这是bug？

可以看看一丝的文章：http://www.iyunlu.com/view/css-xhtml/55.html

4.vertical-align的表现为何在IE7, IE8, IE9下表现不尽相同？其中的渲染机制是？

可以看看这篇文章：

张鑫旭：vertical-align:http://www.zhangxinxu.com/wordpress/2010/06/css-vertical-align%E7%9A%84%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%EF%BC%88%E4%BA%8C%EF%BC%89%E4%B9%8Btext-top%E7%AF%87/

去除inline-block元素间距的办法：http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

关于css.reset文章：http://feixinzx.blog.163.com/blog/static/212009058201307351253/

关于HTML默认样式表：http://www.cssued.com/archives/51