《CSS世界》第三章学习心得

1 块级元素和display为block的元素不是一个概念，还有display为list-item和table。

2 清楚浮动伪元素不使用display:list-item原因是IE无效，但IE对于非伪元素设置display:list-item是有效的。

3 单行文字居中，多行文字左对齐。

<div class="box">
  <p id="conMore" class="content">文字内容文字内容文字内容文字内容文字内容文字内容</p>
</div>
.box {
  padding: 10px;
  background-color: #cd0000;
  text-align: center;
}
.content {
  display: inline-block;
  text-align: left;
}

4 如果父元素的height:auto，只要子元素在文档流中，高度百分比会被忽略。因为没有显式设置高度值，则计算值为auto,从而计算'auto' * 百分比=NaN。

5 绝对定位的宽高相对于padding-box，但非绝对定位是相对于content-box。

6 所有浏览器的min-width,min-height初始值均为auto。

.box{
transition:min-height .3s;
}
.box:hover{
min-height:300px;
}

上面代码是没有动画效果,但如果增加.box{min-height:0;}则会出现，从而验证min-width,min-height初始值均为auto。

7 max-width的值会覆盖width，即使width后面有!important；min-width的值超越max-width。

8 幽灵空白节点：透明，不占据宽度。