css基礎 行內元素 區塊層級元素

標籤：put   element   lin   enter   外邊距   文本   size   定義   inline   

1、行內元素（內嵌元素 inlineElement）

特點：不佔據一行，無法設定寬高及行高，其寬度隨著內容增加，高度隨字型大小而改變，margin只對左右起作用，上下無效。

常見有：

a - 錨點，b - 粗體(不推薦)，br - 換行，em - 強調，font - 字型設定(不推薦)，i - 斜體，img - 圖片，input - 輸入框，label - 表格標籤，

select - 項目選擇，small - 小字型文本，span - 常用內聯容器，定義文本內區塊，strike - 中劃線，strong - 粗體強調

2、區塊層級元素

特點：從新行開始佔據一行，可設定寬高、行高、內外邊距，其寬度預設瀏覽器的寬度，高度隨字型大小而改變，margin只對左右起作用，上下無效。

常見有：

div -最常用的區塊層級元素，dl - 和dt dd搭配使用的區塊層級元素，form - 互動表單，h1 - 大標題，hr - 水平分隔線，ol - 排序表單，p - 段落，ul - 非排序

 

tips：1、display可以在一定情況下互相轉換行內元素和區塊層級元素

　　  2、text-align:center可以使區塊層級元素中的內嵌元素置中，但是將內嵌元素設定為區塊層級元素後無法使用margin:0 auto置中，這種情況下可以使用padding屬性擴充內嵌元素的寬高，而不改變其內聯屬性，即可置中。

　　  3、目前用到的置中方式，水平置中text-align:center可以使圖片或者文字在區塊層級元素水平置中，line-height可以設定為與區塊層級元素同高，實現水平置中；區塊層級元素間的置中使用margin:0 auto。

 

css基礎 行內元素 區塊層級元素