盒子模型

一、盒子模型
1.width、height

宽高可以用px或者%实现。%表示父亲元素的百分之多少。

2.border
2.1）border-width：边框粗细

数字+px。border-width:上 右 下 左；

2.2）border-style：边框样式

实线：solid、虚线：dashed、点线：dotted。border-style:上 右 下 左；

2.3）border-color：边框颜色

border-color:上 右 下 左；

2.4）单边框不连写

border-方向-width/style/color

2.5）连写(无顺序要求)

border/border-方向：width style color
比如：border: 1px solid #eeeee

二、CSS3盒子模型（自动内减）：box-sizing--border-box
3.1）box-sizing：content-box（不写这句话，默认这个盒子就是content-box）

box_base.jpg

3.2）box-sizing：border-box，此时这个盒子的宽度包含border、padding和内容。即border、padding不会撑开盒子了。这也就是IE模型

box_model.jpg

三、总结

margin不算在盒子本身大小上。开发中，如果因为添加了边框而导致一行的位置不够放，可以手动缩小内容宽高。
如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。