HTML5和CSS3開發第七章知識點

suixinCaesar發表於2018-06-25

display屬性: block   inline  inline-bloc   none

浮動屬性:左浮動 left   右浮動 right   不浮動 none

清除浮動:clear屬性:清除左邊浮動 left   清除右邊浮動 right   清除兩側浮動 both   不清除浮動    none

解決父級邊框塌陷的方法:浮動元素後面加空div   設定父元素的高度   父級新增overflow屬性   父級新增偽類after

inline-block和浮動的區別:

display:inline-block
可以讓元素排在一行,並且支援寬度和高度,程式碼實現起來方便
位置方向不可控制,會解析空格

IE 6、IE 7上不支援

float 
可以讓元素排在一行並且支援寬度和高度,可以決定排列方向
float 浮動以後元素脫離文件流,會對周圍元素產生影響,必須在它的父級上新增清除浮動的樣式


相關文章