盒子模型之边框

border-(top/bottom/left/right)-style: solid 边框的风格 如(solid 实线，dotted 点线，dashed 虚线)

border-top-color: #aaa 边框颜色

border-top-width: 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;

}