CSS中的box-sizing属性怎么使用
导读： 这是因为区域的大小不包含padding，border的值。 根据box-sizing属性改变设定，可以在区域大小中设置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代码
content-box(初始值)
的情况下、padding和border不包括在width和height之中
border-box的情况下、padding和border包括在width和height之中
设置宽度和高度完全相同的两个盒子（宽度400px，高度150px），第一个盒子设置的初始值content-box，第二个盒子设置的值是border-box。
CSS代码
p.content1{
width:400px;
height:150px;
background-color:#f0f8ff;
border:30pxsolid#4169e1;
padding:10px;
box-sizing:content-box;
}
p.content2{
width:400px;
height:150px;
background-color:#f0f8ff;
border:30pxsolid#4169e1;
padding:10px;
box-sizing:border-box;
}
运行结果本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS中的box-sizing属性怎么使用
本文地址： https://pptw.com/jishu/664691.html