行內元素 塊級元素以及行內塊元素的區別

2021-10-01 10:43:07 字數 652 閱讀 4883

a / strong / b / em / i / span / u / s / del / ins

天生自帶屬性display: inline,通常用來進行文字(加粗,斜體,鏈結)、小圖示(小結構)的搭建

不獨佔一行,從左到右依次排列;排列到超出父元素的寬度會自動折行;

設定寬高屬性以及margin和padding的上下不起作用,需要加display:block/inline-block 去轉換為塊級元素

不設定寬度屬性的情況下,它的寬高是本身內容的寬高;

div ul/li ol/li dl/dt/dd p h1-h6

天生自帶屬性display: block,一般用來劃分塊結構或者搭建整個網頁的布局

獨佔一行,每個塊級元素都會重新另起一行,從上到下依次排列;

可以設定寬高以及盒子模型的所有的css屬性

塊級元素不設定寬度的情況下,會繼承父級元素的寬度,它的寬度是父元素的寬度;

塊級元素不設定高度的情況下,高度是它本身內容的高度;

img

既有行內元素的特點,又有塊級元素的特點;

可以設定寬高以及盒子模型的所有屬性

不獨佔一行

行內元素和塊元素以及行內塊元素的特點

初學html,接觸很多標籤 等,當寫出簡單的小頁面的時候,例如僅僅是一篇帶有標題的文章,標題標籤單獨一行,不管後面有多大的空間 標籤中使用多個給某些詞做強調,但是卻和中的其他內容同一行,由此,會思考為什麼和會有這種的不同?想要知道為何不同,得先了解html標籤的型別。html標籤一般分為塊標籤和行內...

塊級元素以及行內元素居中顯示

title type text css container center style head id container id center div div body html 以上方法是我認為最好用的,不過缺點是需要知道元素的寬度和高度。通過設定需要定位的div元素為position absolu...

行內元素 塊級元素和行內塊元素

a 標籤定義鏈結 b 字型加粗 br 換行 i 斜體文字效果 img 在網頁中嵌入 input 輸入框 span 組合文件中的行內元素 small 呈現小號字型效果 big 呈現大號字型效果 sub 定義下標文字 sup 定義上標文字 div 定義文件中的分割槽或節 dl 定義列表 dt 定義列表中...