持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第27天，点击查看活动详情
CSS基础教程7——盒子模型
基本模型
盒子由：内容(content),内边距区域(padding),边框(border),外边距(margin)组成一个基本的模型。
内容的width和height
盒子的大小通过width和height设置，取值为数字+px，由于行内元素不能设置宽高，因此在为行内元素设置宽高时，需要先将该元素转为行内块元素。
边框(border)
border: 数值 线条种类 颜色;
三个值不区分先后顺序，单独设置方位边框border-方位名词，例如:border-left:1px solid rgb(0,0,0);就是单独设置左边框。
内边距(padding)以及padding多值
padding: 值;，默认四个方向都为该值，padding:值 值 值 值;，pading多值最简单的为四个值都有，分别对应的是上、右、下、左；如果只有三个值的话，分别为上、右、下，左边因为没有值，因此自动对齐右边的值；如果只有两个值的话，分别对应上、右，下自动对齐上，左自动对齐右。
盒子实际大小计算
盒子尺寸 = width / height + 边框线 + padding。
上图的盒子实际大小为+2+3+250+2+2+=259，+2+4+200+1+2+=209，因此该盒子虽然在设置时为250 * 200但是盒子实际的大小为259 * 209。
在我们设计盒子的大小时应该提前考虑到margin、padding以及边框的粗度！！！
内减模式
上面说到盒子的实际大小会受到border和padding的影响，我们除了在设计盒子前考虑到这两个因素还可以使用，box-sizing:border-box;，自动减去border和padding。
外边距(margin)以及margin多值
margin:值;，默认四个方向都为该值，margin多值的方式与padding多值一致~~
清除默认的内外边距
为什么要清除默认的内外边距？
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此在布局前，首先要清除下网页元素的内外边距，下面就介绍两个大厂对应的实现方式。
淘宝：并集选择器{margin: 0; padding:0;}
京东：通配符选择器{margin: 0; padding:0;}
这里还是推荐大家使用京东的实现方式，写法简单一些。
版心(网页有效内容)居中——与标题居中一致
margin: 0 auto;，可以用于将整个盒子居中等等...
外边距折叠问题
垂直布局的块级元素margin会合并，只取最大值，为了解决这种问题我们尽量只给一个盒子设置margin值就可以。
互相嵌套的块级元素margin塌陷，给父级添加overflow:hidden;，也可以将元素转成行内块，还可以给父级添加一个隐形的边框，或者给父级一个内边距。
行内元素的内外边距问题
行内元素margin和padding垂直不生效，为了解决问题可以直接将元素转为块级元素，或者通过line-height解决 CSS浮动。
