塊元素的特點

1.支持所有樣式 2.塊級元素 獨占一行 3.塊級元素默認寬度和父元素一樣

?

常用塊元素塊級元素 一般 div p ol ul h1-h6 li dl dt dd 等都是

?

初始化(樣式重置)

1.實際開發中，我們會把這些默認的樣式在樣式定義開頭清除掉，清除掉這些默認樣式，方便我們寫自己的定義的樣式，這種做法叫樣式重置。

body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd{
??? margin:0px;
??? padding:0px;
}

/* 清除標簽默認條目符號*/
ul,ol{
??? list-style:none;
}

/* 將h標簽的文字大小設置為默認大小*/
h1,h2,h3,h4,h5,h6{
??? font-size:100%;
??? /* 根據實際需求來加?? */
??? font-weight:normal;
}

?

?

行內元素的特點

內聯元素，也可以稱為行內元素，布局中常用的標簽如：a、span等等都是內聯元素，它們在布局中的行為：

?

1.不支持寬、高、margin上下、padding上下(支持的有問題)

2.寬高由內容決定

3.盒子并在一行，遇到邊界自動換行

?

解決行內元素的間距

?

1.去掉內聯元素之間的換行，代碼不換行

2.將內聯元素的父級設置font-size為0，內聯元素自身再設置font-size

3.浮動

?

其他行內元素：label、input、a、img

?

em 標簽行內元素，表示語氣中的強調詞

i 標簽行內元素，表示專業詞匯

b 標簽行內元素，表示文檔中的關鍵字或者產品名

strong標簽 行內元素，表示非常重要的內容

?

行內塊元素(內聯塊元素)

?

內聯塊元素，也叫行內塊元素，是新增的元素類型，現有元素沒有歸于此類別的，img和input元素的行為類似這種元素，但是也歸類于內聯元素，我們可以用display屬性將塊元素或者內聯元素轉化成這種元素。它們在布局中表現的行為：

1、支持全部樣式

2、如果沒有設置寬高，寬高由內容決定

3、盒子并在一行

4、代碼換行，盒子會產生間距

5、子元素是內聯塊元素，父元素可以用text-align屬性設置子元素水平對齊方式。這三種元素，可以通過display屬性來相互轉化：

display屬性：將塊元素和行內元素轉化成行內塊元素

display屬性是用來設置元素的類型及隱藏的，常用的屬性有：

1、none 元素隱藏且不占位置

2、block 元素以塊元素顯示

3、inline 元素以內聯元素顯示

4、inline-block 元素以內聯塊元素顯示

?

列別	特點	常用元素	?
塊元素	1.霸占一行, 2.支持所有樣式, 3.默認的寬度為父級寬度100%	Div,li,h1-h6,ol,ul,dl,p	?
行內元素	1.不支持寬高,margin上下,padding上下; 2.盒子寬高內容決定 3.元素并在一行 4.代碼換行, 元素之間有間距	a,span 最常用	?
行內塊元素	身兼塊元素和行內元素的優勢	通過display: 轉換元素: 1、none 元素隱藏且不占位置 2、block 元素以塊元素顯示 3、inline 元素以內聯元素顯示 4、inline-block 元素以內聯塊元素顯示	?

?

?

總結

以上是生活随笔為你收集整理的元素（块、行内、行内块的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。