day5 浮动与定位笔记

浮动

一.添加浮动

首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。

即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的。

如何在一行内显示多个div元素？

显然标准流已经无法满足需求，这就要用到浮动。 浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

float：left 元素向左移动

float：right 元素向右移动

float：none 默认值 元素不浮动，并会显示在其文本中出现的位置。

如图

使div2浮动

div2浮动，因为div1是标准流，所以div2依旧在div1下方。div3为标准流，向上占据div2的位置。

二.添加多个浮动

如果使div2与div3同时浮动，则

总结：

假如某个div元素A是浮动的，

如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；

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

三.清除浮动

clear：left 不允许左边浮动

           right 不允许右边浮动

           none 默认值，允许两边都有浮动

           both 不允许有浮动对象

四.浮动的几个要点

1.只有横向浮动，没有纵向浮动。

2.当元素应用了float属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流。

3.会将元素的display属性变更为block。

4.浮动元素的后一个元素会围绕着浮动元素（典型应用是文字围绕图片）。

5.与应用了position的元素相比佛洞元素并不会遮盖后一个元素。

浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）

定位

position：

1.默认：static

2.相对定位：relative

  top：相对自己的垂直偏移量

  left：相对自己的水平偏移量

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

3.绝对定位

position：absolute

1)    相对于body

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

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

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

补充

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

补充属性

1.z-index

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

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

2.display

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

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

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

None:不显示

3.overflow

visible 默认值。内容不会被修剪，会呈现在元素框之外。

hindden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容。（默认有滚动条）

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余内容。（溢出才会有滚动条）

4.visibility

 visible默认值。元素是可见的。

hidden 元素是不可见的。