CSS的兩種盒模型

猿友 2021-02-04 13:43:30 瀏覽數(shù) (3444)

反饋

IE的盒模型

問題

下面的代碼可以直接復(fù)制出去運(yùn)行哦

?<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css盒模型</title>
</head>
<style type="text/css">
.content {
	width: 300px;
	height: 400px;
	border: 5px solid #242424;
	padding: 20px;
	background-color: #898989;
}
</style>
<body>
	<div class="content" id="zwkkkk1"></div>
</body>
</html>

上面代碼的邏輯很簡單，就是設(shè)一個寬 300px，高 400px 的 div，并設(shè)置 5px 的邊框和 20px 的 padding。然后我們來看效果：

微信截圖_20210204100502

這里我們會發(fā)現(xiàn)明明我們設(shè)置了 300*400 長寬比，為什么呈現(xiàn)出來的是一個 350*450 的盒子呢？接著讓我們打開調(diào)試頁面一探究竟。

我們可以找到下面的這張示意圖：

微信截圖_20210204100759

在這張圖中，我們發(fā)現(xiàn)我們設(shè)置的300*400出現(xiàn)在了最里面的那個藍(lán)框中，與此同時我們可以發(fā)現(xiàn)在這個盒模型中除了我們設(shè)置的內(nèi)容（content），還有margin（外邊距）、border（邊框）、padding（內(nèi)邊框）

?margin(外邊距)? - 清除邊框外的區(qū)域，外邊距是透明的。
?border(邊框)? - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
?padding(內(nèi)邊距)? - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
?content(內(nèi)容) ?- 盒子的內(nèi)容，顯示文本和圖像。

為了正確設(shè)置元素在所有瀏覽器中的寬度和高度，你需要知道盒模型是如何工作的。

而我們在測試效果圖看到的? 350*450? 盒子，

350（width） = 300（content） + 20（padding）* 2 + 5（border）* 2

450（height）= 400 （content）+ 20（padding）* 2 + 5（border）* 2