壹寄疏、內(nèi)聯(lián)模型
我們看一行html代碼
<p> 這是一行代碼<em>em</em>標(biāo)簽</p>
分析里邊有很多的盒子
- 內(nèi)容區(qū)域： 圍繞文字看不見(jiàn)的盒子涣觉，大小受字符本身的大小決定 尝蠕。但是如果是圖片這種替換元素联喘，沒(méi)有字符华蜒，受圖片大小決定。內(nèi)容區(qū)域可以看成元素自身
- 內(nèi)聯(lián)盒子： 不會(huì)讓內(nèi)容成塊顯示豁遭，而是顯示成一排叭喜，這里的內(nèi)聯(lián)實(shí)際就是說(shuō)這個(gè)元素的外在盒子。這個(gè)盒子又分為匿名內(nèi)聯(lián)盒子和內(nèi)聯(lián)盒子蓖谢。
<em>em</em>這個(gè)就是內(nèi)聯(lián)盒子捂蕴，這是一行代碼和標(biāo)簽外邊什么沒(méi)有，只有文字的就是匿名內(nèi)聯(lián)盒子 - 行框盒子：每一行就是一個(gè)
行框盒子闪幽，每個(gè)行框盒子又是一個(gè)一個(gè)的內(nèi)聯(lián)盒子組成 - 包含盒子：
<p> 這是一行代碼<em>em</em>標(biāo)簽</p>這種由一行一行的行框盒子組成的盒子叫包含盒子
貳啥辨、幽靈空白點(diǎn)
每個(gè)行框盒子之前有一個(gè)空白節(jié)點(diǎn)，這個(gè)空白節(jié)點(diǎn)永遠(yuǎn)透明盯腌，沒(méi)有高度溉知，無(wú)法獲取，但是實(shí)實(shí)在在存在腕够，表現(xiàn)和一個(gè)節(jié)點(diǎn)一模一樣级乍，所以叫幽靈空白點(diǎn)
<div ><span></span></div>
這個(gè)時(shí)候span里邊什么也沒(méi)有，我們卻能看到div有高度燕少，所以我們認(rèn)為在span前邊還有個(gè)寬度我為0的字符卡者，這個(gè)字符的高度撐起了div
