指定针对元素的宽度与高度的计算方法—

指定针对元素的宽度与高度的计算方法—— box-sizing

本文主要是介绍指定针对元素的宽度与高度的计算方法—— box-sizing，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在CSS 3中，使用box-sizing属性来指定针对元素的宽度与高度的计算方法。
本文将针对这个属性做详细介绍。

1. box-sizing属性

在CSS中，使用width属性与height属性来指定元素的宽度与高度。但使用box-sizing属性，可以指定width属性值与height属性值是否包含元素内部的补白区域（padding），以及边框的宽度与高度。

属性值有：

content-box
表示元素的宽度和高度不包括内部补白区域，以及边框的宽度与高度。（默认值）
border-box
表示元素的宽度和高度包括内部补白区域，以及边框的宽度与高度。

在样式代码中，使用Firefox浏览器时，需要将其书写成 “-moz-box-sizing” 的形式；使用Safari浏览器或Chrome浏览器时，需要将其书写成 “-webkit-box-sizing” 的形式；使用Opera浏览器时，需要将其书写成 “-ms-box-sizing” 的形式。

示例

<body><div id="divl">示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文宇示例文字示例文字示例文字示例文宇示例文字示例文字示例文字示例文字示例文宇示例文字示例文字</div><div id="div2">示例文字示例文字示例文字示例文字示例文宇示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字</div>
</body>

<style>div{width: 300px;border: 30px solid #fa0;padding: 30px;background-color: #ff0;margin: 30px auto;}#div1{box-sizing: content-box;}#div2{box-sizing: border-box;}
</style>

在这里插入图片描述

在这个示例中，虽然同时指定两个div元素的宽度都是300px，但是#div1指定的是元素内容部分的宽度为300px，元素的总宽度=（元素内容宽度300px + 内部补白宽度30px * 2 + 边框宽度30px * 2）=420px；
#div2指定的是元素的总宽度为300px，元素内容部分的宽度=（元素总宽度300px - 内部补白宽度30px * 2 - 边框宽度30px * 2）=180px。

2. 为什么要使用box-sizing属性

使用box-sizing属性的目的是控制元素的总宽度，如果不使用该属性，样式中默认使用的是content-box属性值。有些场合下利用border-box属性值会使得页面布局更加方便。比如下面的示例所示，只要将两个div元素的border-box属性值都设定为50%，就可以确保两个div元素的并列显示了。

<body><div id="divl">示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文宇示例文字示例文字示例文字示例文宇示例文字示例文字示例文字示例文字示例文宇示例文字示例文字</div><div id="div2">示例文字示例文字示例文字示例文字示例文宇示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字</div>
</body>

<style>div{width: 50%;border: 30px solid #fa0;padding: 30px;background-color: #ff0;float: left;box-sizing: border-box;}#div2{border: 30px solid green;}
</style>

在这里插入图片描述