1 回答

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊
*選擇 DOM 中的所有元素。這包括<body>,這就是您所看到的邊界實(shí)際所在的位置。如果刪除浮動(dòng),效果會(huì)更明顯,其他所有內(nèi)容都與下面的代碼片段相同:
var elementCount = $("*").css("border", "3px solid red").length;
$("body").prepend("<h3>" + elementCount + " elements found</h3>");
h3 {
margin: 0;
}
div,
span,
p {
width: 80px;
height: 40px;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
浮動(dòng)元素不會(huì)導(dǎo)致其容器擴(kuò)展以適應(yīng)。當(dāng)您附加 時(shí)h3
,由于它是正文中唯一的非浮動(dòng)元素,因此正文的邊框看起來(lái)與 的邊框相同h3
。
類似地,如果你不附加 h3,你會(huì)在頂部看到一個(gè)奇怪的粗紅色邊框,它似乎沒(méi)有包圍任何東西,因?yàn)闆](méi)有元素占用主體中的空間:
$("*").css("border", "3px solid red");
h3 {
margin: 0;
}
div,
span,
p {
float: left;
width: 80px;
height: 40px;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
h3 實(shí)際上并沒(méi)有邊框——它只是看起來(lái)是這樣,因?yàn)橹黧w占據(jù)了相同的區(qū)域。
- 1 回答
- 0 關(guān)注
- 100 瀏覽
添加回答
舉報(bào)