您的位置:首页> 前端教程> CSS3教程
文章导航

CSS box-sizing

2019-11-22 12:52| 作者: admin| 查看: 542| 评论: 0|来自: 蚂蚁部落

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就是元素的实际宽度。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部