整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
SS3中有關增強用戶界面的屬性中具備一個名為box-sizing的屬性，該屬性用于設置CSS3盒模型寬度和高度的計算方法。本篇文章小海前端（頭條號）為大家來介紹該屬性的取值以及具體的用法。
承接文章：CSS3對塊級元素實現了陰影效果，類似于Photoshop中的圖層樣式
技術等級：中級 | 適合有一定的CSS基礎的人士閱讀。
CSS3所提供的增強用戶界面的屬性以及與此相關的屬性比較多，小海前端（頭條號）將分幾次對其進行講解。所包含的所有增強用戶界面的屬性包括：
box-shadow
box-sizing
overflow-x
overflow-y
resize
outline
outline-width
outline-style
outline-color
outline-offset
pointer-events
user-select
appearance
content
counter-increment
counter-reset
quotes
本篇文章為大家講解第二個增強用戶界面屬性：盒模型計算公式box-sizing。
一、認識box-sizing屬性：
在默認的盒模型中，當設置了寬度和高度后，若又使用了padding屬性，則盒子的寬度和高度會由于paddin屬性的存在而增大。要想依舊保持原有的寬度和高度，需要從寬高中減去padding屬性的取值。
CSS3增加了box-sizing屬性來改善上述問題的存在。
CSS3 使用box-sizing屬性調整盒模型尺寸的就算方式
該屬性可以取下列值：
content-box，默認值，盒模型的padding和border的大小不包括在盒模型的width和height中。
border-box，盒模型的padding和border的大小包括在盒模型的width和height中。
二、content-box取值的理解：
例1：在頁面中有一個id屬性取值為box1的塊級元素。設置box1的寬度和高度均為700像素。為該塊級元素設置一個50像素的填充距離，再為該塊級元素設置一個25像素的邊框距離。CSS3代碼如下所示。
#box{
width:700px; height:700px;
border:solid 20px #ff5857;
padding:50px;
box-sizing: content-box;
}
因為content-box取值的含義是padding和border得大小不包括在盒模型的width和height中，因此最終盒模型的尺寸計算公式如下所示：
盒模型的寬度=width + padding-left-width*2 + border-left-width*2;
盒模型的高度=height + padding-left-height*2 + border-left-height*2
因此例1中#box的實際尺寸為：
寬度=700px + 50px*2 + 25px*2=850px
高度=700px + 50px*2 + 25px*2=850px
如果仍希望最終的實際尺寸保持700px*700px的大小，那就需要從寬度和高度中減去padding和border的大小。
width=700px - 50px*2 - 25px*2=550px
height=700px - 50px*2 - 25px*2=550px
最終的CSS3代碼如下所示。
#box{
width:550px; height:550px;
border:solid 20px #ff5857;
padding:50px;
box-sizing: content-box;
}
三、border-box取值的理解：
例2：仍采用例1中的塊級元素，設置box-sizing屬性的取值為padding-box，CSS3代碼如下所示。
#box{
width:700px; height:700px;
border:solid 20px #ff5857;
padding:50px;
box-sizing: border-box;
}
因為border-box取值的含義是padding和border得大小都包括在盒模型的width和height中，因此最終盒模型的尺寸計算公式如下所示：
盒模型的寬度=width
盒模型的高度=height
因此例1中#box的實際尺寸為：
寬度=700px
高度=700px
這樣就不要從width和height中減去任何數據，就可以得到希望的尺寸了。
在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。
關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。
明天的文章中，繼續為大家講解CSS3中有關增強用戶界面的屬性。
天學習下css的盒子模型，這是一種布局模式，所謂盒子模型，就是將所有元素表示為一個個矩形的盒子（box）。CSS 決定這些盒子的大小、位置以及屬性（例如顏色、背景、邊框尺寸）。
一個CSS盒子模型主要由以下幾個部分組成：
這些組成部分共同定義了CSS盒子的總尺寸和布局方式。了解盒子模型對于掌握CSS布局至關重要，因為幾乎所有的頁面布局都是基于盒子模型的。
Web開發中，理解和掌握HTML5盒模型是至關重要的。盒模型不僅是CSS布局的基礎，而且它直接影響著頁面元素如何在瀏覽器中呈現。本文旨在深入探討盒模型的各個組成部分以及它們如何影響網頁布局。
盒模型是CSS布局的核心概念，它決定了文檔中的元素如何定位，以及它們之間的空間關系。一個元素的盒模型由以下幾部分構成：
每個部分都對元素的最終尺寸和頁面布局有著直接影響。
在標準盒模型中，元素的width和height屬性僅包括內容區域。內邊距和邊框的寬度是額外計算的。
box-sizing: content-box;
在IE盒模型中，元素的width和height包括內容、內邊距和邊框。
box-sizing: border-box;
現代瀏覽器支持box-sizing屬性，允許開發者選擇使用哪種盒模型。
當兩個垂直外邊距相遇時，它們會合并成一個外邊距，這通常稱為邊距合并（margin collapsing）。這個現象會影響布局，特別是在構建垂直間距時。
在響應式設計中，盒模型的理解尤為重要。使用border-box可以簡化計算，因為元素的寬度包含了內邊距和邊框，這使得元素的尺寸更容易控制。
浮動元素會影響盒模型，因為它們脫離了正常的文檔流。清除浮動則是為了防止相鄰元素的盒子相互覆蓋。
絕對定位和相對定位的元素有著不同的盒模型表現。絕對定位元素的外邊距不會與其他外邊距合并，而相對定位元素可能會影響其周圍元素的布局。
當涉及到內邊距和邊框時，計算元素的實際尺寸可能會變得復雜。理解盒模型有助于精確計算和預測元素的實際占位。
為了更好地控制布局，以下是一些推薦的最佳實踐：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Layout Example</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.sidebar {
background-color: #f9f9f9;
padding: 20px;
border-right: 2px solid #ddd;
float: left;
width: 20%;
height: calc(100vh - 40px); /* Full height minus header and footer */
}
.main-content {
padding: 20px;
float: left;
width: 80%;
}
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
clear: both;
}
.box {
background-color: #007bff;
color: white;
padding: 10px;
margin: 10px 0;
border: 3px solid #0056b3;
}
</style>
</head>
<body>
<div class="header">
<h1>My Website</h1>
</div>
<div class="sidebar">
<h2>Sidebar</h2>
<p>This is the sidebar area.</p>
</div>
<div class="main-content">
<h2>Main Content</h2>
<p>This is the main content area.</p>
<div class="box">Box Model Example</div>
</div>
<div class="footer">
<p>Footer Content</p>
</div>
</body>
</html>
盒模型是網頁布局的基石，它決定了元素如何在頁面上占據空間。作為一名前端工程師，深入理解盒模型的工作原理對于創建精確和靈活的布局至關重要。隨著技術的發展，雖然我們有了更多的布局工具和框架，但盒模型仍然是所有布局決策的基礎。掌握它，你將能夠更加自信和高效地設計和構建現代Web頁面。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
