盒模型

在 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 class="clearfix">
        <div class="left wh">我是浮动 div 一</div>
        <div class="left wh">我是浮动 div 二</div>
        <div class="left wh">我是浮动 div 三</div>
    </div>