1,图片垂直居中:
设置包含图片的div:height=20px;line-height=20px。设置图片vertical-align:middle 即可。
2,行内块元素有3px bug,可通过设置为块元素解决。典型元素:img input
行内元素:内容撑开宽高,宽高随内容变化而变化,不可控制宽高,用于控制字体、颜色。可设置line-height
块级元素:默认撑满行,可设置。
块级元素可包含行内元素、块级元素。行内元素不可包含块级元素。
3,margin-bottom跟margin-top不合并情况整合:
<1. 水平margin不会合并。
<2. 两个上下渲染相邻(不一定是兄弟节点)的块状元素在正常页面流情况下会发生 margin 合并。
<3. 浮动元素不会和任何元素(包括子孙节点)发生 margin 合并。
<4. overflow!=visible的元素不和任何元素发生margin合并。
<5. 绝对定位的元素不和任何元素发生margin合并。
<6. inline-block 的元素不和任何元素发生margin合并。
<7. 设置 clear 属性的元素不和任何元素发生margin合并。
<8. 根元素不和任何元素发生margin合并。
<9. 父节点和第一个子节点发生margin-top合并。
<10. 如果最后一个子节点没有border以及padding,则和其父节点发生margin-bottom合并。
注意IE!特别是hasLayout对于margin合并也有影响,从而也造成了包含的绝对定位元素的位置差异。