盒子模型之边框
border-(top/bottom/left/right)-style: solid 边框的风格 如(solid 实线，dotted 点线，dashed 虚线)
border-top-color: #aaa 边框颜色
border-top- 20px 边框粗细
边框四个方向连写： 如 border-color: #000
边框属性连写： border-top: #555 solid 5px
四个方向边框属性同写： border: 12px dashed 10px
注意： 没有顺序要求，但边框风格也就是线型不能少
补充：
边框合并： border-collapse: collapse
去掉边框： border: 0 none
去掉路轮廓线： outline-style: none
盒子模型之内边距
padding-left: 20px;
padding-right: 10px;
padding-top: 30%;
padding-bottom: 40%;
属性连写：
padding: 20px; 上下左右都为20px
padding: 10px 20px; 上下为10px，左右为20px
padding: 10px 20px 30px; 上内边距为10px，左右为20px，底为30px
padding: 10px 20px 30px 40px; 上10px，右20px，下30px，左40px
注意： 给盒子指定宽高，在里面使用padding会撑大盒子
补充： 盒子的宽度等于： 定义的宽度+边框宽度+左右内边距
盒子模型之外边距
margin(与内边距使用方法相似): margin: 20px
margin: 20px auto (auto表示自适应，个人理解就是居中)
补充： 两个盒子垂直，上面的盒子设置下边距。下面的盒子设置下边距，两个盒子的边距取设置边距大的那个
解决：嵌套的盒子外边距塌陷
当给子盒子里设置如margin-top: 10px时，父盒子相对于顶部向下移动了10px，而子盒子相对于父盒子没有移动
两种方法解决： 第一个是给父盒子设置一个边框；第二个方法是给父盒子设置： overflow: hidden;(内容溢出元素框时隐藏)
补充： 行内元素可以定义左右的内外边距，上下会被忽略；行内块可以定义内外边距
浮动布局
float: left / right
特点：
元素浮动后不占据原来的位置(脱标)
浮动的盒子在一行显示(除非边框已经无法容纳)
行内元素浮动后会转化成行内块元素
清除浮动的方法：
clear: left / both / right 用的最多的是clear: both
第一种方法： <div style="clear: both;"></div>
第二种方法： overflow: hidden
注意： 如果内容出了盒子，则不能使用这个方法
第三种方法： 伪元素清除浮动(推荐使用)
.clearfix:after{
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden; 规定元素不可见(但会占据页面上的空间)
clear: both;
}
兼容IE浏览器：
.clearfix{
zoom: 1;
}