塊狀元素和行內元素

2021-10-03 14:23:38 字數 676 閱讀 3357

「塊級元素」譯為 block level element

塊級元素通常出現在瀏覽器**的開始與結束,

塊狀元素:佔據一行,換行;

如div、ul、ol、li、dl、dt、dd、h1~h6、p、form、hr、。。。

行級元素譯為 inline element

行級元素在顯示時通常不會以新行開始。

行內元素:在一行,不換行;

b、em、img、input、a、sup、sub、textarea、span。。。

1、塊狀元素可以包含行內元素和某些塊狀元素;

2、行內元素不能包含塊狀元素,只能包含其他行內元素

3、塊狀元素不能放在p標籤內

4、特殊塊狀元素只能包含行內元素,不能再包含塊狀元素

(1) h1 h2 h3

…h6 p dt

5、塊狀元素和塊狀元素並列

6、行內元素和行內元素並列

我們可以用display這個屬性將 塊狀元素和行內元素相互的轉換。

div

此時將div這個塊狀元素轉換成了行內元素,它可以和其他行內元素併排。

span

此時將span這個行內元素轉換成了塊級元素,它將佔一行,可以設定width和height。無法與其他行內元素併排。

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

頁面元素主要分為三類 塊元素 行內元素,行內塊元素。三者可以通過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...

塊狀元素和行內元素

1.塊級元素 2.行內元素 3.塊級元素與行內元素的區別 1 塊級元素會獨佔一行,其寬度自動填滿其父元素寬度 行內元素不會獨佔一行,相鄰的行內元素會排列在同一行,直至一行排不下才會換行,其寬度隨元素的內容而變化。2 塊級元素可以包含行內元素和塊級元素 行內元素不能包含塊級元素。3 行內元素設定wid...