塊級元素和行內元素是布局最基本的兩種元素,常見的塊級元素有div,p,form,ul,ol,li等,常見的行內元素有span,strong,em等.
塊級元素和行內元素有什麼區別呢?
塊級元素會獨佔一行,預設情況下,其寬度自動填滿父元素寬度,行內元素不會獨佔一行,相鄰的行內元素會排列在同一行裡,直到一行排不下才會換行,其寬度隨元素內容變化而變化.
塊級元素可以設定width,height屬性,行內元素設定width,height屬性無效.塊級元素即使設定了寬度,仍然是獨佔一行.
塊級元素可以設定margin和padding屬性,行內元素的argin和padding屬性很奇怪,水平方向margin-left,margin-right, padding-left,padding-right都產生邊距效果,但是豎直方向的margin-top,margin-bottom,padding-top,padding-bottom卻不會產生邊距效果.
塊級元素和行內元素的css相關屬性是display,其中塊級元素對應於display:block,行內元素對應於display:inline.我們可以修改dispaly屬性切換塊級元素和行內元素
--------------------------
display:inline-block它是行內的塊級元素,它擁有塊級元素的特點,可以設定長寬,可以設定margin和padding屬性,但是卻不是獨佔一行,它的寬度並不佔滿父元素,而是和行內元素一樣,可以和其他行內元素在同一行裡.
ie6和ie7是不支援display:inline-block的,但是可以觸發它的haslayout
如下圖:
ie6和ie7是不支援display:inline-block的,但是可以觸發它的haslayout
將標籤p改為span可以觸發行內元素haslayout就可以模擬display:inline-block的效果,span在ie6/7是底對齊,在ie8/f
irefox是頂對齊,所以需要*vertical-align:-10px;
塊級元素和行內元素區別 以及行內塊元素
塊級元素的特點 1 寬度預設是容器的100 2 高度，行高 外邊距以及內邊距都可以控制。3 總是從新行開始 4 可以容納內聯元素和其他塊元素。行內元素的特點 1 預設寬度就是它本身內容的寬度。2 高 寬無效，但水平方向的padding和margin可以設定，垂直方向的無效。3 和相鄰行內元素在一行上...
行內元素 塊級元素和行內塊級元素
而標籤的屬性是可以轉換的 display inline 轉換為行內元素 display linline block 轉換為行內塊元素 display block 轉換為塊級元素。行內元素 無法設定寬高 margin和padding上下無效，只有左右有效果 總是和相鄰的行內元素在同一行上，預設排列方式...
行內元素和塊級元素區別
引言 一次偶然的面試遇到的題目，雖然當時知道塊級元素和行內元素的區別，但是沒有仔細去想。一 行內元素與塊級元素 塊級元素列表 定義位址 定義 標題 定義列表中定義條目 定義文件中的分割槽或節 定義列表 定義列表中的專案 定義乙個框架集 建立 html 表單 定義最大的標題 定義副標題 定義標題 定義...