CSS3 box-sizing

admin發表於2018-07-21
CSSS3

從屬性的名稱來看它是與盒模型是相關的，事實也是如此。

一.盒模型介紹:

盒模型分為兩種：

（1）.符合w3c標準的盒模型。

（2）.怪異模式下的盒模型。

1.w3c標準的盒模型：

此種盒模型規則：

（1）.佔據的實際寬度:width+padding+border+margin。

（2）.佔據的實際高度:height+padding+border+margin。

圖示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/31/210741wqj9w9aahamhqm33.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

從上面的圖示可以看出，在標準盒模型下，width屬性純粹是用來規定內容區域的，並不包含padding和border。

2.怪異模式下的盒模型：

此種盒模型規則：

（1）.佔據的實際寬度：width+margin。

（2）.佔據的實際高度：height+margin。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201808/31/210746rc640a4ql7xxs1qf.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面是怪異模式下的盒模型，width屬性所規定的尺寸包含border、padding和content。

二.box-sizing的用法:

簡單的說，box-sizing屬性用來規定使用哪種盒模型。

語法結構:

[CSS] 純文字檢視 複製程式碼
box-sizing ：content-box || border-box || inherit

（1）.如果屬性值是content-box，那麼將採用標準盒模型。

（2）.如果屬性值是border-box，那麼將採用怪異模式盒模型。

（3）.如果屬性值是inherit，那麼將採用繼承方式。

三.程式碼例項:

通過一個程式碼例項介紹一下box-sizing屬性的應用，更為靈活的應用需要自己在程式碼中不斷積累。

首先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box{
  width:600px;
  height:500px;
  background:black;
}
.left{
  width:100px;
  height:200px;
  background:red;
  float:left
}
.right{
  width:500px;
  height:200px;
  background:blue;
  float:left;
}
</style>
</head>
<body>
<div id="box">
  <div class="left"></div>
  <div class="right"></div>
</div>
</body>
</html>

以上程式碼中，有一個box容器和兩個子div，由於精確設定了左右兩個子div的寬度，恰好和box容器寬度相同，且採用浮動，所以兩個子div可以水平排列。但是在實際應用中可能需求發生變化，需要給子div新增border或者padding，程式碼修改如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box{
  width:600px;
  height:500px;
  background:black;
}
.left{
  width:100px;
  height:200px;
  background:red;
  float:left
}
.right{
  width:500px;
  height:200px;
  background:blue;
  float:left;
}
#box div{
  border:5px solid green;
}
</style>
</head>
<body>
<div id="box">
  <div class="left"></div>
  <div class="right"></div>
</div>
</body>
</html>

在預設狀態下采用的標準盒模型，所以兩個子div設定邊框之後，總寬度超過父元素，會導致換行；要避免這種情況，可以採用修改兩個子div的width屬性值的方式，不過box-sizing屬性可以使我們更為便利的消除此種問題。

程式碼修改如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box{
  width:600px;
  height:500px;
  background:black;
}
.left{
  width:100px;
  height:200px;
  background:red;
  float:left
}
.right{
  width:500px;
  height:200px;
  background:blue;
  float:left;
}
#box div{
  border:5px solid green;
  box-sizing:border-box;
}
</style>
</head>
<body>
<div id="box">
  <div class="left"></div>
  <div class="right"></div>
</div>
</body>
</html>

以上程式碼實現了我們的要求，只要應用box-sizing:border-box即可。

四.瀏覽器相容:

IE8和IE8以上瀏覽器和其他標準瀏覽器支援此屬性。

相關文章