盒模型
在 htm 中每一个元素都可以看成是一个盒子，默认情况下盒子的边框是无，背景色是透明的，所以在默认情况下看不到盒子。
盒子由 margin , border , padding , content (盒子中的内容)四部分组成。
1、margin 元素与元素之间的距离
a、上边距 margin-top
b、右边距 margin-right
c、下边距 margin-bottomd
d、左边距 margin-leftb
A、1 个属性值——margin:10px;表示上下左右的值都是该值
B、2 个属性值 ——margin:10px 20px;前者表示上下值，后者表示左右的值
C、4 个属性值——margin:10px 20px 30px 5px;表示上、右、下、左
D、3 个值——margin:10px 20px 5px;(一般不用)表示上、左右、下
2、border(对不同的边框设置不同的属性值 如同上述(a、b、c、d)(A、B、C、D)格式
边框粗细 border-width
边框样式 border-style
边框颜色 border-color
3、padding 内边距 用于控制内容与边框的距离对 padding 设置不同的方向和数值 如同上述(a、b、c、d)和(A、B、C、D)格式)
盒子在标准流中的定位原则：行内元素之间的水平 margin 相加块级元素之间的竖直 margin 取最大值(这个现象称为 margin 的塌陷(合并)现象
display 属性
display：none;(隐藏不占网页空间)
display：block(将目标元素转换成块元素)span 原本是行内元素，设置宽高是没有效果的，只有转换成块元素才有效果。
display：inline(将目标元素设置为行内元素)转换成了行内元素，则设置宽高没有效果display：inline-block(将目标元素设置为行内块元素)既具有行元素特性，又具有块元素的特性
浮动
“标准文档流”(Normal Document Stream)，简称“标准流”，是指在不使用其他与排列和定位相关的特殊 CSS 规则时，各种元素的排列规则。
float：none(默认)/left(左浮动)/right(右浮动)
浮动：使元素脱离文档流。
1.所有的元素都可以浮动。
2.具有 float 属性元素在父标签中是不占空间的。 3.float 能解决标签之间有间隙的问题。
float 对行内属性标签的影响：
1、 float 之后可以设置 width 和 height 属性。
2、并支持 margin 和 padding 属性。
float 对块属性标签的影响
1、在没有设置宽高的情况下浮动后，内容撑开宽度高度。
2、可以使块属性元素并排排列。
清除浮动
1、clear 应用的原理是清除元素两侧浮动元素带来的影响。
clear: left; 左侧不允许有浮动元素(本身起作用)，邻后的元素需清除左侧浮动元素带来的影响则可以用 clear:left； 进行清除。
clear: right; 右侧不允许有浮动元素(本身起作用)，邻后的元素需清除右侧浮动元素带来的影响则可以用 clear:right；进行清除。
clear: both;清除元素两侧浮动影响。原理：添加一个空 div，利用 css 的 clear:both 清除浮动，让父级 div 能自动获取到高度。
2、overflow: hidden;超出内容隐藏
(父级下的子元素都是浮动状态，父级添
overflow:hidden;属性解决子元素浮动造成父级高度塌陷现象，父级的相邻元素正常显示。)
overflow: visible：显示超出内容，不剪切内容也不添加滚动条 overflow: auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow: scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
3、after 伪类清除浮动
.clearfix:after {content:""; display:block;clear:both; }
.clearfix { zoom:1; }//IE 清除浮动Eg:
我是浮动 div 一
我是浮动 div 二
我是浮动 div 三
