塊元素的特點
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.浮動
其他行內元素: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 元素以內聯塊元素顯示
塊元素 行內元素 行內塊元素
塊級元素 一行只能放乙個,可以設定寬度高度,預設為容器的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 ...