塊元素(block)
塊元素基本特征
塊元素會(huì)獨(dú)占一行,多個(gè)block元素會(huì)各自新起一行。默認(rèn)情況下,block元素寬度自動(dòng)填滿其父元素寬度。
塊元素可以設(shè)置width,height屬性。塊級(jí)元素即使設(shè)置了寬度,仍然是獨(dú)占一行。
塊元素可以設(shè)置margin和padding屬性。
塊元素支持所有的 CSS 樣式
塊元素基本可以劃分以下幾類:
1.div無意義,主要是配合界面布局(雙標(biāo)簽)
2.p語(yǔ)義:段落(雙標(biāo)簽)
3.h1~h6定義一級(jí)標(biāo)題至六級(jí)標(biāo)題
假如使用 p 標(biāo)簽的時(shí)候,里面嵌套了 div 標(biāo)簽,這樣會(huì)導(dǎo)致 p 標(biāo)簽里面的樣式被分割掉,這點(diǎn)需要注意。
除此之外,塊元素還包括有序列表 ol,html' target='_blank'>無序列表 ul ,以及列表dl,dt,dd。
內(nèi)聯(lián)元素(inline)
內(nèi)聯(lián)元素基本特征
inline元素不會(huì)獨(dú)占一行,多個(gè)相鄰的行內(nèi)元素會(huì)排列在同一行里,直到一行排列不下,才會(huì)新?lián)Q一行
內(nèi)容撐開寬度
inline元素設(shè)置width,height屬性無效。
inline元素不支持上下的margin和padding,只支持左右的margin和padding
代碼換行被解析
內(nèi)聯(lián)元素中,有一個(gè)我們最常見的標(biāo)簽,那就是超鏈接 a 標(biāo)簽。它能從一個(gè)頁(yè)面中跳轉(zhuǎn)到另外一個(gè)界面,同時(shí)也可以在同一個(gè)頁(yè)面之中設(shè)置空間‘錨點(diǎn)’,實(shí)現(xiàn)特定位置的跳轉(zhuǎn)
注意:a 標(biāo)簽中一定不能嵌套 a 標(biāo)簽
a標(biāo)簽的錨點(diǎn)設(shè)置方法:
可以通過設(shè)置 href = “# + 錨點(diǎn)名稱” 的方式進(jìn)行跳轉(zhuǎn),注意,一定要加 #
例如:
<!DOCTYPE html<html lang="en"<head
<meta charset="UTF-8"
<titleDocument</title</head<body
<span id=“top”</span
<pasdnajsd</p
<br
<br
<br
<br
<br
<br
<br
<a href=“#top”回到頂部</a</body</html
標(biāo)簽的初始化
下劃線的樣式初始化/*下劃線的樣式初始化*/a { text-decoration: none;
}/*字體樣式初始化*/em { font-style:normal;
}
內(nèi)聯(lián)塊元素
內(nèi)聯(lián)塊元素基本特性
1.支持所有css的樣式
2.除塊屬性的標(biāo)簽以外,同屬性以及行屬性標(biāo)簽排在一排
3.代碼換行被解析
內(nèi)聯(lián)塊元素同時(shí)具有了塊元素可以設(shè)置寬度和高度的特點(diǎn),同時(shí)又可以像內(nèi)聯(lián)元素一樣,可以和其他行屬性標(biāo)簽處于同一行。
雖然內(nèi)聯(lián)塊元素能同時(shí)擁有塊元素和內(nèi)聯(lián)元素的特性,但很多時(shí)候,在頁(yè)面中還是要使用不同標(biāo)簽對(duì)應(yīng)的特性。其次就是,內(nèi)聯(lián)塊也并不是完美無缺的。因?yàn)樵O(shè)置內(nèi)聯(lián)塊的時(shí)候,它的換行會(huì)被解析。
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。
新聞熱點(diǎn)
疑難解答
圖片精選