盒子模型、溢出的知识

盒子模型：
以div为例作为一个盒子，如果起初已经设置了div的宽高，再进行内边距、边框厚度，div就会相应的扩大，可以通过背景颜色就可以判断，但是盒子里可容纳的内容尺寸还是起初的宽高

内边距padding：盒子可容纳的区域离盒子边界的距离
1个值代表四边
2个值代表上下、左右
3个值代表上、左右、下
4个值代表上、右、下、左（顺时针）
如果想设置单边的内边距，可以用padding-top、padding-right、padding-bottom、padding-left设置

边框border：这是复合属性，包含border-width粗细、border-style样式、border-color颜色
border-style属性值有solid实线、double双实线、dashed虚线、dotted点状线
这三个属性同样也可以是1~4个值，方向跟内边距的规格是一样的
同样的这个也是可以单边设置border-top、border-right、border-bottom、border-left

外边距margin：盒子对于同一级其他盒子的距离，如果没有同级或者上一级的盒子，外边距针对窗口
外边距不会扩大盒子的尺寸
值跟内边距的规格是一样的，但是这个值可以是负值
如果想设置水平居中，可设置值为0 auto，这里的auto自动居中，但是垂直不会自动居中
注意点：如果两个盒子垂直方向之间的外边距不会叠加，会重叠，水平方向是叠加

如果想在嵌套盒子中，子盒子与父盒子有间距，直接将子盒子设置外边距是不生效的，有4种方案解决
1、给父盒子添加内边距
2、给父盒子添加边框
这两种方案都会导致父盒子扩大的副作用，需要相应的调整父盒子的尺寸
3、给父盒子或者子盒子浮动，然后将子盒子设置外边距
4、将父盒子转化为块状元素overflow:hidden，然后将子盒子设置外边距

溢出overflow：
visible：默认值，溢出内容显示在元素之外
hidden：隐藏溢出部分
scroll：溢出部分以滚动条显示
auto：根据是否溢出显示滚动条
inherit：继承父元素的overflow的属性
还有两个属性overflow-x：横向溢出；overflow-y：纵向溢出