塊級元素:div, p(段落), form(表單), ul(無序列表), li(列表項), ol(有序列表), dl(定義列表), hr(水平分割線), menu(菜單列表), table(表格)... 特點:1、塊級元素會獨占一行,其寬度自動填滿其父元素寬度。 2、可以設置width,height ...
塊級元素:div, p(段落), form(表單), ul(無序列表), li(列表項), ol(有序列表), dl(定義列表), hr(水平分割線), menu(菜單列表), table(表格)...
特點:1、塊級元素會獨占一行,其寬度自動填滿其父元素寬度。
2、可以設置width,height屬性。(即使設置了寬度,也是獨占一行的,除非用float屬性等特殊情況)
3、可以設置margin(外邊距)和padding(內邊距)。
行內元素:span, strong, em, br, img, input, label, select, testarea...
(行內元素、內聯元素、內嵌元素、直進式元素都是指 "inline element")
特點:1、行內元素不會獨占一行,相鄰的行內元素會排列在同一行里,直到一行排不下,才會換行,其寬度隨元素的內容而變化(其寬度由內容撐開)。
2、設置width,height屬性無效。
3、水平方向上的padding-left,padding-right,margin-left,margin-right產生邊距效果,
但豎直方向的padding-top,padding-bottom,margin-top,margin-bottom不會產生效果。
可變元素:需要根據上下文關係確定該元素是塊級元素還是行內元素。屬於上述兩種元素類別,一旦上下文關係確定了他的類別,他就遵循塊級元素或行內元素的規則限制。
CSS:css能夠改變html的預設佈局模式,把塊級元素擺放到你想要的位置上去。
塊級元素和行內元素的基本差異是塊元素一般從新行開始,而當加入了css控制之後,這種屬性差異就不成為差異了。
給行內元素加上 display:block 這樣的屬性,讓行內元素也有每次都從新行開始的屬性。
給塊級元素加上 display:inline 這樣的屬性,讓塊級元素不具有從新行開始的屬性。
給行內元素加上 display:inline-block 屬性,仍為行內元素,但是可以設置width及height屬性等。
(該文僅供學習交流。如有不同觀點,歡迎留下寶貴意見~)