盒子模型

1.宽高属性

宽度 width：长度值 | 百分比 | auto
最大宽度 max-width：长度值 | 百分比 | auto
最小宽度 min-width： 长度值 | 百分比 | auto
注意： 宽和高只这只一个时，另一个自动为auto

2.边框border

border-top-color:red; 边框颜色
border-top-width:10px; 边框粗细
border-top-style:solid; 边框的线性，常用的有：solid(实线) dotted(点线) dashed(虚线)
边框属性连写：borde:10px solid red; 没有顺序要求，线性为必写项

3.内边距padding

• padding-top：20px; /* 设置顶部内间距20px */
• padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左
  四个方向的内边距值。 */
• padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */
• padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/
• padding：20px; /* 设置四边内边距为20px */

padding的使用技巧

• padding的值不能为负， margin可以为负
• 盒子所占的空间不单和width和height有关，还和padding’和border有关
• 盒子的宽度=定义的宽度+左右边框宽度+左右内边距
• 行内元素只能定义左右内外边距

4.外边距margin

外边距的设置方法和padding的设置方法相同，将上面设置项中的’padding’换成’margin’就是外边距设置方法。

margin的使用技巧

• 设置元素水平居中： margin:x auto
• margin负值让元素位移及边框合并
• 垂直方向外边距合并。即两个盒子一个设置下外边距，一个设置上外边距，取设置较大的值

margin-top 塌陷 这是个bug
在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

• 外部盒子设置一个边框
• 外部盒子设置 overflow:hidden
• 外部盒子使用伪元素类：（最常用）

.clearfix:before{
    content: '';
    display:table;
}

css元素溢出

当子元素的尺寸超过父元素（父元素设置了高度）的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：

• visible 默认值。内容不会被修剪，会呈现在元素框之外。
• hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
• inherit 规定应该从父元素继承 overflow 属性的值。

元素溢出示例：