塊狀元素和行內元素

1.塊級元素

2.行內元素

3.塊級元素與行內元素的區別

（1）塊級元素會獨佔一行，其寬度自動填滿其父元素寬度；

行內元素不會獨佔一行，相鄰的行內元素會排列在同一行，直至一行排不下才會換行，其寬度隨元素的內容而變化。

（2）塊級元素可以包含行內元素和塊級元素；行內元素不能包含塊級元素。

（3）行內元素設定width、height、margin-top、margin-bottom、padding-top、padding-bottom無效。

4.塊級元素與行內元素的轉換

display:inline-block;

display:inline;

display:block;

5.可變元素

行內元素 塊狀元素 行內塊狀元素

頁面元素主要分為三類 塊元素 行內元素，行內塊元素。三者可以通過display進行相互轉換 display block 塊元素 display inline 行內元素 display inline block 行內塊元素 1 塊元素 塊狀元素代表性的就是div，其他如p h1 h6 ul ol dl...

行內元素 塊狀元素 內聯塊狀元素

行內元素 div,h1 h6,p,pre,ul,ol,li,form,table等 常見的行內元素 無法自動換行，無法設定寬高 有 a,img,span，i 斜體 em 強調 sub 下標 sup 上標 label等。常見的內聯塊狀元素 擁有內在尺寸，可設定高寬，不會自動換行 有 button,in...

塊狀元素和行內元素

塊級元素 譯為 block level element 塊級元素通常出現在瀏覽器 的開始與結束，塊狀元素 佔據一行，換行 如div ul ol li dl dt dd h1 h6 p form hr 行級元素譯為 inline element 行級元素在顯示時通常不會以新行開始。行內元素 在一行，不...