Css3中,计算盒子的宽度+想包括内边距在内,应该设置属性什么。其属性值为？

Question

如题所述

Answer 1

可以用box-sizing  它是用于控制元素框模型的重要CSS属性

box-sizing 属性有两个常见的取值：

content-box（默认值）：元素的宽度和高度仅包括内容框(content)，不包括内边距（padding）、边框(border)和外边距(margin)。如果你设置元素的宽度为100px，那么元素的内容框宽度将为100px，而内边距、边框和外边距将会导致整个元素占用的空间变大。

/* 设置元素的框模型为 content-box */  

box 总宽度 （width + padding（左右） +  border（左右））= (100px+20px+2px)

.box{

box-sizing: content-box;

width:100px; 

padding:10px;

margin:10px;

border:1px solid #333;

｝

border-box：元素的宽度和高度包括内容框(content)、内边距（padding）和边框(border)，但不包括外边距(margin)。如果你设置元素的宽度为100px，那么元素的总宽度将为100px，把内容框、内边距和边框都算在里面，外边距除外

/* 设置元素的框模型为 border-box */

box 总宽度 （ width = (padding（左右） +  border（左右）)）即 100px= 100px+20px+2px

把padding 和border的宽度计算在内容框设置的width里了。 就实际box的宽度没有变化，但里面的空间变小了

.box{

box-sizing: border-box;

width:100px; 

padding:10px;

margin:10px;

border:1px solid #333;

}