《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 幽靈空白節點：透明，不占據寬度。