新手必看型——盒子模型

1.浮动

Float

left	元素向左移动
right	元素向右移动
none	元素不会浮动并且会显示出在文本

1.如果左浮动，就浮动在左边；若是右浮动，就浮动在右边，下一个元素上来占据浮动点的位置。

在标准流的情况下：底部对齐

都浮动：紧跟后边，前提是方向一致

2. 若方向不一致就找上面与之相同浮动的一方

左浮动

左浮动了一个div元素div2

标准流

脱离标准流：设置了浮动

谁浮动，自己浮起来、下面的元素占据自己的位置。

浮动了两个div元素div2、div3设置浮动

div2-->行内块元素，没有独占一行

Div3紧跟在div2的后边

Div4 紧跟div1的下边

如果div3元素上一个元素也是浮动的，那么div3元素会跟随在上一个元素（div2）的后

如果div2元素上一个元素是标准流中的元素，那么div2的相对垂直位置不会改变，也就是说div2的顶部总是和上一个元素(div1)的底部对齐。

左浮动了两个div元素div2、div3、div4设置浮动

如果div4元素上一个元素(div3)也是浮动的，那么div4元素会跟随在上一个元素（div3）的后边

左浮动了两个div元素div2、div4设置浮动

右浮动

右浮动了一个div元素div2

右浮动了两个div元素div2、div3设置浮动

右浮动了两个div元素div2、div3、div4设置浮动

右浮动了两个div元素div2、div4设置浮动

右浮动了两个div元素div2、div4设置浮动，左浮动了div3

总结：

粗略定位

Flaot:left 左

Float:right 右

精准定位（向上找）

假设我是左浮动，

上一个元素无浮动：底部对齐

上一个元素左浮动：紧跟其“后”

上一个元素右浮动：前进一步，看上一个元素的上一个元素。

二：定位

Position:

默认：static

相对定位：relative

Top:垂直偏移量

Left:水平偏移量

span在运用了relative这个position属性值后，依然对width属性无效 

绝对定位

Position:absolute

相对于body

如果在其节点树中所有父（祖）元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移

相对于上一级（父级、祖级）元素，并且遵循就近原则。

当元素的父级设置了position属性，且position的属性值为absolute或者relative时，这个时候，元素将按照这个父级来进行定位。

补充

块元素设置了position: absolute之后，变成行内块元素。

固定定位

Position:fixed（固定），Left，Top，Bottom

三：补充属性

1.z-index

z-index只能在position属性值为relative或absolute或fixed的元素上有效。

基本原理是：z-index的值可以控制定位元素在垂直于显示屏幕方向（z轴）上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。

2.Display

块级元素：独占一行、可以设置宽和高。此元素前后会带有换行符。block

内联元素：设置宽和高没有作用 inline

行内块：没有独占一行、可以设置宽和高 inline-block

2.        None:不显示