行內元素 塊元素 行內塊元素 及其屬性
阿新 • • 發佈：2019-02-13
1、 塊級元素獨佔一行
行內元素可以在一行顯示，但是不能設定上下的padding和margin值。
塊級元素可以設定 width, height屬性，行內元素設定width, height無效
塊級元素可以設定margin 和 padding.
行內元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產生邊距效果，
但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產生邊距效果。
（即行內元素水平方向有效，豎直方向無效）
2、塊級元素轉行內元素：display:inline;
行內元素轉塊級元素：display:block;
3、常見的塊級元素、行內元素與行內塊元素
塊級元素 ：div、h系列、li、dt、dd、p
行內元素 ：span、u、a、、em、b、i、u、em
行內塊元素：input 、img 、button 、texterea 、label。
當li設定float:left;的時候，它的父元素就不會隨著li的增多自適應高度(主要是FF等瀏覽器)，所以，如果父元素有背景的話是不會隨著li的高度增加而出現的。
這個時候可以給父元素加1個屬性，overflow:hidden;
為什麼li在浮動(float)時，給父元素加1個屬性，overflow:hidden;父標籤就能自適應高度
float的特性 ：
1：使元素block塊級化；
2：破壞性造成的緊密排列特性。
基於以上的特性，使得我們通常把浮動用來佈局，帶來的問題是，容易出問題，重用性不行，ie6-的版本下很多問題，因為它是要求固定的寬度，寬度計算錯誤就會帶來整個佈局的錯亂。float屬性出現的初衷是為了讓文字環繞圖片實現圖文混排的效果和應用於流體佈局，所以float浮動帶來的父元素高度沒有的問題並不是我們說的是一個 BUG，這本身就是float的特性。
以下是解決float浮動帶來的父元素高度沒有的問題
測試為IE5+1：在父元素的裡面浮動元素的後面新增一個樣式為clear:both;的元素；缺點是添加了無用的標籤元素；
.clear{ clear:both; height:0px; font-size: 1px; line-height: 0px;overflow:hidden; }/* 清除浮動*/
2：給父元素新增偽類並給樣式（.fix應用在包含浮動子元素的父元素上）
.fix:after{content:"";display: block;height: 0;overflow: hidden;clear: both;}
.fix{*zoom:1;} //相容ie7以下
或者
.fix:after{content:"";display: table;clear: both;}
.fix{*zoom:1;}
3：直接給父元素新增一句樣式：
父元素{overflow: hidden;}