CSS中的box-sizing属性怎样运用【css教程】,box-sizing

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;
}

运转结果

在浏览器大将显现以下结果