CSS中的box-sizing属性如何运用
发表时间：2025-08-25 来源：浏览器大全整理相关软件相关文章人气：
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
box-sizing属性可用于设置更改区域大小，比如，如果你需要并排放置两个带边框的框，可通过将 box-sizing 设置为 border-box实现，下面我们就来看具体的内容。
box-sizing属性是用于更改区域大小计算的设置，使用padding和border属性设定边距和边界线的粗细时，在区域的width和height中加入padding和border的部分，因此，根据padding和border的值，整个区域的大小就会改变。
这是因为区域的大小不包含padding，border的值。
根据box-sizing属性改变设定，可以在区域大小中设置padding和border。这使得可以确定盒子的大小而不受padding和border的影响。
我们接着来看box-sizing的使用方法
box-sizing属性写法如下
box-sizing：value ;
value的值你可以写入content-box和border-box。
content-box：宽度和高度分别应用到元素的内容框；在宽度和高度之外绘制元素的内边距和边框。
border-box：为元素设定的宽度和高度决定了元素的边框盒，也就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
此外，如果输入inherit，则继承父元素的值。
下面我们来看一个具体的例子
代码如下
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="content1">content-box(初始值)
的情况下、padding和border不包括在width和height之中</p>
<p class="content2">border-box的情况下、padding和border包括在width和height之中</p>
</body>
</html>
设置宽度和高度完全相同的两个盒子（宽度400px，高度150px），第一个盒子设置的初始值content-box，第二个盒子设置的值是border-box。
CSS代码
p.content1 {
width: 400px;
height: 150px;
background-color:#f0f8ff;
border: 30px solid #4169e1;
padding: 10px;
box-sizing: content-box;
}
p.content2 {
width: 400px;
height: 150px;
background-color:#f0f8ff;
border: 30px solid #4169e1;
padding: 10px;
box-sizing: border-box;
}运行结果
在浏览器上将显示如下效果
以上就是CSS中的box-sizing属性怎么使用的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
