溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“CSS盒子模型及box-sizing屬性實例分析”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“CSS盒子模型及box-sizing屬性實例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
CSS 基礎框盒模型是 CSS 規(guī)范的一個模塊，它定義了一種長方形的盒子, 包括它們各自的內(nèi)邊距（padding）與外邊距（margin
），并根據(jù)視覺格式化模型來生成元素，對其進行布置、編排、布局。常被直譯為盒子模型、盒模型或框模型。
盒模型有以下分類：
標準定義：
標準盒模型
怪異模式盒模型
元素類型
塊級盒子
內(nèi)聯(lián)盒子
行內(nèi)塊
寬度width = 內(nèi)容寬度(content) + padding + border + margin
內(nèi)容寬度僅僅只有content。如果設置一個元素的寬為100px，那么這個元素的內(nèi)容區(qū)會有100px寬，并且任何邊框和內(nèi)邊距的寬度都會被增加到最后繪制出來的元素寬度中。
寬度width = 內(nèi)容寬度(content + padding + border) + margin
內(nèi)容寬度包含了content、border、padding。如果將一個元素的width設為100px，那么這100px會包含它的border和padding，內(nèi)容區(qū)的實際寬度是width減去(border + padding)的值。大多數(shù)情況下，這使得我們更容易地設定一個元素的寬高。
box-sizing屬性有以下兩個屬性值。
box-sizing屬性定義如何計算一個元素的總寬度和總高度，主要設置是否需要加上內(nèi)邊距(padding)和邊框等。
例如，假如您需要并排放置兩個帶邊框的框，可通過將 box-sizing 設置為 "border-box"。這樣就可以讓瀏覽器呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中。
默認情況下，元素的寬度(width) 和高度(height)計算方式如下：
width(寬度) + padding(內(nèi)邊距) + border(邊框) = 元素實際寬度
height(高度) + padding(內(nèi)邊距) + border(邊框) = 元素實際高度
默認值，使用標準盒子模型。
.contentBox {
box-sizing: content-box;
width: 350px;
border: 10px solid black;
padding: 0 10px;}以上代碼在瀏覽器中的渲染的實際寬度是390px。
使用怪異模式盒子模型。
.borderBox {
box-sizing: border-box;
width: 350px;
border: 10px solid black;
padding: 0 10px;}以上代碼在瀏覽器中的渲染的實際寬度就是350px。
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div.container {
width: 100%;
border: 2px solid black;
}
div.box {
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">這個 div 占據(jù)了左邊部分</div>
<div class="box">這個 div 占據(jù)了右邊部分</div>
<div style="clear:both;"></div>
</div>
</body>
</html>輸出結果：
示例二：
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
#example1 {
width: 300px;
padding: 40px;
border: 15px solid blue;
}
#example2 {
width: 300px;
padding: 10px;
border: 2px solid red;
}
</style>
</head>
<body>
<h2>通用的 box-sizing</h2>
<p>使用 “box-sizing:border-box” 可以讓前端開發(fā)人員減少很多工作。 上面 head 部分中的第一個樣式確保所有元素都以這種更直觀的方式調整大小。
你設置的寬度就是實際的寬度，不需要考慮內(nèi)邊距和邊框：</p>
<div id="example1">div 的完整寬度為 300px, 不需要考慮內(nèi)邊距和邊框。</div>
<br>
<div id="example2">這個 div 的完整寬度也是 300px, 也不需要考慮內(nèi)邊距和邊框。</div>
</body>
</html>輸出結果：
一個被定義成塊級的（block）盒子會表現(xiàn)出以下行為：
盒子可以占據(jù)父容器的所有可用空間
每個盒子都會換行
width和height屬性可以發(fā)揮作用
默認情況下h2-h7、p、p、section都處于block狀態(tài)
一個被定義成內(nèi)聯(lián)的（inline）盒子會表現(xiàn)出以下行為：
盒子不會產(chǎn)生換行
width和height屬性將不起作用
默認情況下用做鏈接的a元素、span、em以及strong都處于inline狀態(tài)
如果不希望一個項切換到新行，但希望它可以設定寬度和高度，此時我們可以將該元素設置為inline-block。
display屬性值 | |
|---|---|
| 塊級盒子 | block |
| 內(nèi)聯(lián)盒子 | inline |
| 行內(nèi)塊 | inline-block |
1個值：四個方向
2個值：上下、左右
3個值：上、左右、下
4個值：上、右、下、左
border: 10px double red;
10px、雙實線、紅色邊框。
讀到這里，這篇“CSS盒子模型及box-sizing屬性實例分析”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內(nèi)容的文章，歡迎關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
