元素(塊 行內 行內塊

2021-08-07 13:28:17 字數 2159 閱讀 9517

塊元素的特點

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

/* 清除標籤預設條目符號*/

ul,ol

/* 將h標籤的文字大小設定為預設大小*/

h1,h2,h3,h4,h5,h6

行內元素的特點

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

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

2.寬高由內容決定

3.盒子並在一行,遇到邊界自動換行

解決行內元素的間距

1.去掉內聯元素之間的換行,**不換行

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

3.浮動

其他行內元素:labelinputaimg

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 元素以內聯塊元素顯示

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

塊級元素 一行只能放乙個,可以設定寬度高度,預設為容器的100 可以包含任何標籤 常用元素 div hr p h1 h6 ul ol dl form table 行內元素 一行可以放多個行內元素,不可以直接設定寬度高度,預設為本身內容的寬度,容納文字或其他行內元素 常用元素 span a i em ...

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

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

常見行內 塊級 行內塊級元素

1 元素分類 一 塊級元素 block element 獨佔一行,可以定義寬高。二 內聯元素 也叫行內元素 inline element 不獨佔一行,無法定義寬高。三 內聯塊級元素 inline block element 不獨佔一行,同時可以定義寬高。2 常見內聯元素 strong em del ...