css3的box属性 |css打印加水印

.box{
/* 设定元素的盒子宽度 */
width: 100px;
/* 设定元素的盒子高度 */
height: 100px;
/* 设定元素的内边距 */
padding: 10px;
/* 设定元素的边框宽度、样式和颜色 */
border: 1px solid #ccc;
/* 设定元素的外边距 */
margin: 10px;
/* 使用CSS3的box-sizing属性，将元素的尺寸计算方式改为border-box，这样内边距和边框的宽度就不会撑开元素 */
box-sizing: border-box;
}

通过上面的代码，大家定义了一个名为.box的元素，并使用了box属性来设定它的宽高、内边距、边框、外边距等。其中，box-sizing属性是CSS3中新增的，它可以取两个值：content-box（默认值）和border-box。前者的计算方式是将元素的尺寸作为内容区的尺寸，而后者的计算方式是将元素的尺寸作为包含内边距和边框的总尺寸。

比如说，当大家设置一个元素的宽度为100px、内边距为10px、边框宽度为1px时，如果使用content-box计算方式，那么元素的真实宽度为100+10+1+10+1+10+1=133px。而如果使用border-box计算方式，那么元素的真实宽度就是100px。显然，使用border-box可以更好地控制盒子模型。