盒模型概念

基础属性

盒模型中包含的属性有

• width height
• padding
• border
• margin

盒模型区域

蓝色区域是content-box

绿色区域是padding-box

黄色区域是border-box

最外层区域是margin

盒模型布局特性

当我们设置了宽高之后，只是设置了content-box区域，如果再添加padding和border，则元素会变大。这就是w3c标准盒模型的特性。

IE5/6盒模型：设置宽高设置的是border-box区域，如果添加了boder和padding则会像内压缩content-box区域

随着时代的发展，开发者一致认为，IE5/6盒模型更适合开发的顺序，所以W3C在CSS3中添加了一个新的属性box-sizing，这个属性可以将标准的盒模型设置成IE5/6盒模型。

box-sizing

这个属性可以改变标准盒模型，解决一个问题：不需要在设置宽高后，添加了padding再减去对应的padding了，浏览器会自动帮我们压缩。

• content-box 默认值
• border-box

建议我们所有的网页开发中，给所有的元素都添加这个属性。值为border-box

怎么样才能给所有的标签都添加某个属性呢？

*通配选择器，能够选择到所有的标签

*, *::after, *::before {
  box-sizing: border-box;
}

为了让性能更好，我们可以利用继承

html {
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

所以上面的属性，可以给我们的reset.css补充上去。

盒模型布局规律

当我们进行布局时，整个一行所占的空间由左margin + 左border + 左padding + width + 右padding + 右border + 右margin 分配

margin的分配问题

• 左右为定值，右侧不生效，是auto，自动占据剩余空间
• 左侧为auto 右侧为定值，则左侧占据剩余空间
• 左右都是auto，则平分剩余空间。元素居中就是利用这个特性

如果右多个元素浮动，那么我们就是多个元素的左margin + 左padding + 左border + 总宽度 + 右padding + 右border + 右margin = 总的占据空