盒模型与Box-sizing

盒模型

一个盒子由四部分组成：context ,padding,margin,border

• 盒子总宽度 = width + padding + border + margin;

• 盒子总高度 = height + padding + border + margin

Box-sizing

CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度

box-sizing: content-box|border-box|inherit:

• content-box 默认值，元素的 width/height 不包含padding，border，与标准盒子模型表现一致
• border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致
• inherit 指定 box-sizing 属性的值，应该从父元素继承

 

使用场景

border-box属性在form上的使用
当我们要做一个登陆页面的时候，这时候就需要表单和按钮这些元素
首先我们在一个div中设置两个表单，一个用来输入用户名，一个用来输入密码，同时还有有一个登录按钮，
当我们想让这两个表单与一个登录按钮的长度相同时，这时我们试着把它们三个的width的值都设置为100%

 

这里看到它们三个的width都设置为100%，而它们的长度并不一致，由此可以看出表单和按钮的padding、border值不统一，这时我们给表单的属性中添加一个
box-sizing：border-box；此时表单和按钮的长度保持一致。
当不给表单添加box-sizing：border-box；属性时，而是添加一个padding值会发现表单长度宽度都有所增加。
当给按钮添加padding时它的长度并不会改变。由此可以看出表单默认content-box，按钮submit默认border-box，button的默认值也为border-box。