溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“CSS的兩種盒模型是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS的兩種盒模型是什么”吧!
下面的代碼可以直接復制出去運行哦
?<!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>上面代碼的邏輯很簡單，就是設一個寬 300px，高 400px 的 div，并設置 5px 的邊框和 20px 的 padding。
這里我們會發現明明我們設置了 300*400 長寬比，為什么呈現出來的是一個 350*450 的盒子呢？接著讓我們打開調試頁面一探究竟。
我們發現我們設置的300*400出現在了最里面的那個藍框中，與此同時我們可以發現在這個盒模型中除了我們設置的內容（content），還有margin（外邊距）、border（邊框）、padding（內邊框）
margin(外邊距)- 清除邊框外的區域，外邊距是透明的。
border(邊框)- 圍繞在內邊距和內容外的邊框。
padding(內邊距)- 清除內容周圍的區域，內邊距是透明的。
content(內容)- 盒子的內容，顯示文本和圖像。
為了正確設置元素在所有瀏覽器中的寬度和高度，你需要知道盒模型是如何工作的。
而我們在測試效果圖看到的 350*450 盒子，
350（width） = 300（content） + 20（padding）* 2 + 5（border）* 2
450（height）= 400 （content）+ 20（padding）* 2 + 5（border）* 2
而引起上面效果的原因來自于 css 的兩種盒模型的不同，這里我先對兩種盒模型做個介紹。
在標準的盒子模型中，width 指 content 部分的寬度
在 IE 盒子模型中，width 表示 content+padding+border 這三個部分的寬度
我們可以看出我們上面的使用的默認正是 W3C 標準盒模型
而這里盒模型的選取更傾向于項目和開發者的習慣，并沒有絕對的好壞之分。
如果想要切換盒模型也很簡單，這里需要借助 CSS3的box-sizing屬性
box-sizing:
content-box是W3C盒子模型
box-sizing:border-box是IE盒子模型
box-sizing 的默認屬性是 content-box
到此，相信大家對“CSS的兩種盒模型是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
