盒模型：
盒模型
可以看到，一个盒模型包括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其实是来设置内容框和内边距，边框的关系的。通过这种方式我们可以忽略元素的内边距，边框对元素在父元素下排布的影响。
网友评论