css塊元素和行內元素以及屬性詳解

2021-09-30 14:31:46 字數 605 閱讀 1502

div(css layout的主要標籤)、dl(定義列表) 、h1~h6(標題)、p(段落)、table(**) , ul(非排序列表)

特點: 會自動佔據一定矩形空間,可以通過設定高度、寬度、內外邊距等屬性,來調整的這個矩形的樣子

內聯元素(inline element)

a(超連結)、span(常用內聯容器,定義文字內區塊)、i(斜體)、img、em(強調)、label

特點:和其他元素都在一行上、元素的高度、寬度、行高及頂部和底部邊距不可設定、元素的寬度就是它包含的文字或的寬度,不可改變。

補充:inline-block

將物件呈現為inline物件,但是物件的內容作為block物件呈現,之後的內聯物件會被排列在同一行內。

inline-block

水平呈現的元素間,換行顯示或空格分隔的情況下會有間距,更改非inline-block水平元素為inline-block水平,也會有該問題

解決方法:

父元素設定:font-size:0;

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

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

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

a strong b em i span u s del ins 天生自帶屬性display inline,通常用來進行文字 加粗,斜體,鏈結 小圖示 小結構 的搭建 不獨佔一行,從左到右依次排列 排列到超出父元素的寬度會自動折行 設定寬高屬性以及margin和padding的上下不起作用,需要加d...

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

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