css-盒模型和box-sizing

盒模型：

盒模型

可以看到，一个盒模型包括margin（外边距）-->border(边框)-->padding(内边距)-->内容区

一般情况下，内容区的尺寸可以由设置的width和height来决定, 如果没有设置那么则有内容区的大小由内部填充元素决定。

box-sizing属性前提，必须指定width和height。也就是说要指定内容区大小

先不看box-sizing是怎么定义的，我们来看下box-sizing的值

1.content-box(默认值)

width和height分别应用到元素的内容框大小,也就是说内边距和边框显示在内容区之外

来看下案例:

添加一个div:

css样式:

最终显示的盒模型如下图所示

可以看到border和padding都是在width和height之外显示的。

2. border-box

边框和内边距显示在内容区之内，即width和height所在的区域内，包含边框和内边距部分。但是不包含外边距

看下下面的盒模型:

原本的内容区width，height是100，现在变为56，加上内边距和边框正好是原宽高。

3.inherit

继承父元素的该属性值

从这里可以看出box-sizing其实是来设置内容框和内边距，边框的关系的。通过这种方式我们可以忽略元素的内边距，边框对元素在父元素下排布的影响。