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è)一個(gè)寬 300px,高 400px 的 div,并設(shè)置 5px 的邊框和 20px 的 padding。然后我們來看效果:
這里我們會(huì)發(fā)現(xiàn)明明我們?cè)O(shè)置了 300*400 長寬比,為什么呈現(xiàn)出來的是一個(gè) 350*450 的盒子呢?接著讓我們打開調(diào)試頁面一探究竟。
我們可以找到下面的這張示意圖:
在這張圖中,我們發(fā)現(xiàn)我們?cè)O(shè)置的300*400
出現(xiàn)在了最里面的那個(gè)藍(lán)框中,與此同時(shí)我們可以發(fā)現(xiàn)在這個(gè)盒模型中除了我們?cè)O(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è)置元素在所有瀏覽器中的寬度和高度,你需要知道盒模型是如何工作的。
而我們?cè)跍y(cè)試效果圖看到的? 350*450
? 盒子,
350(width) = 300(content) + 20(padding)* 2 + 5(border)* 2
450(height)= 400 (content)+ 20(padding)* 2 + 5(border)* 2
CSS 的兩種盒模型
而引起上面效果的原因來自于 css 的兩種盒模型的不同,這里我先對(duì)兩種盒模型做個(gè)介紹。
W3C的標(biāo)準(zhǔn)盒模型
在標(biāo)準(zhǔn)的盒子模型中,width 指 content 部分的寬度
IE的盒模型
在 IE 盒子模型中,width 表示 content+padding+border 這三個(gè)部分的寬度
我們可以看出我們上面的使用的默認(rèn)正是 W3C 標(biāo)準(zhǔn)盒模型
而這里盒模型的選取更傾向于項(xiàng)目和開發(fā)者的習(xí)慣,并沒有絕對(duì)的好壞之分。
box-sizing的使用
如果想要切換盒模型也很簡單,這里需要借助 CSS3的box-sizing
屬性
box-sizing: ?
content-box
? 是W3C盒子模型
box-sizing: ?border-box
?是IE盒子模型
box-sizing 的默認(rèn)屬性是 content-box