CSS box-sizing

admin發表於2019-11-22
CSS

box-sizing屬性規定元素應用何種盒模型規則。

盒模型型別的不同決定了計算元素實際尺寸的規則。

很久之前就存在兩種盒模型規則：

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

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

當前上述兩種盒模型都符合W3C標準，可以通過box-sizing屬性切換。

語法結構：

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

下面通過程式碼例項詳細分析一下各個屬性值的功能。

一.content-box：

此屬性值規定採用標準盒模型，也是此屬性的預設值。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/22/125350uegeyyye5e1ukhh5.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面結合上述圖示分析如下：

（1）.此屬性值規定採用標準盒模型，也是box-sizing屬性的預設值。

（2）.此時，width與height屬性值僅包括內容的寬與高，不包括內邊距和邊框。

二.border-box：

此屬性值規定採用怪異模式盒模型。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/22/125426jqgbhnglhbdpv6pq.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面結合上述圖示分析如下：

（1）.此屬性值規定採用怪異盒模型。

（2）.此時，width與height屬性值不僅包括內容的寬與高，而且還包括內邊距和邊框。

三.程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#ant{
  box-sizing:content-box;
  width:50px;
  height:50px;
  padding:5px;
  border:10px solid red;
  text-align:center;
}
</style>
<script>
window.onload = () => {
  let odiv=document.getElementById("ant");
  odiv.innerHTML=odiv.offsetWidth;
}  
</script>  
</head>
<body>
  <div id="ant"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/22/125511zeec8v673dd0i627.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.offsetWidth屬性可以返回元素的實際寬度（不包括margin）。

（2）.box-sizing屬性值設定為content-box，也就是採用標準盒模型。

（3）.width屬性值僅包括內容區域，所以實際寬度=width+padding+border。

關於offsetWidth可以參閱JavaScript offsetWidth一章節。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#ant{
  box-sizing:border-box;
  width:150px;
  height:50px;
  padding:5px;
  border:10px solid green;
  text-align:center;
}
</style>
<script>
window.onload = () => {
  let odiv=document.getElementById("ant");
  odiv.innerHTML=odiv.offsetWidth;
}  
</script>  
</head>
<body>
  <div id="ant"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/22/125614c4xfcfk3c3ufohdh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.兩端程式碼唯一的不同之處在於box-sizing屬性值的不同。

（2）.所以，width屬性值150px，涵蓋邊框、內邊距和content內容區域的寬度，height也是如此。

（3）.那麼這個150px就是元素的實際寬度。

相關文章