Position (定位)

一、position

1、属性描述： 设置或获取元素的定位方式

2、版本变更： 有

3、语法模板：

position : static | relative | absolute | fixed

4、默认值： static 尽量避开影响其他元素

5、属性值描述：

static: 静态位置，即正常文档流（常规流），此时四个方向的定位属性无用;

relative: 相对位置，同样保持常规流，相对于自身常规流的位置定位。

absolute: 绝对定位，脱离常规流，相对于最近的非静态祖辈元素定位，如果外部都为静态元素，则参照与窗口中的可视页面定位（全部的页面）。

fiexd: 固定定位，脱离常规流，相对于客户端（浏览器）的窗口进行定位（初始化页面）;当可视化页面发生变化时，元素也会移动。

6、适用元素： display属性值不为table-column-group或者table-column的所有元素

7、是否具有继承性： 否

8、是否具有动画性： 否

9、脚本接口： position

注意事项： 当position属性为非静态，且四个定位属性都为未设置时（即默认值auto），那么该元素将尽可能的展现为常规流所展现的样子

二、relative相对定位

相对定位有没有脱离标准图层？答案：没有

-解析：本体做透明化处理，但依然存在于标准图层中，我们看到的和移动的元素是元素的投影，投影在非标准图层上
移动：移动的是投影，参照本体来定位，参照本体不同方向来移动时，xy轴的正负会发生变化
宽高属性：投影虽然是浮动元素，但本体还在标准图层中，所以宽高属性不为0
因为实体并没有脱流，非浮动元素不会覆盖在实体上方，并且块元素都独占一行
行内元素：相对定位后，并不会改变它的display，依然是inline，不支持宽高属性
参照不同方向（上下左右）移动，xy轴的正负会发生变化

三、fixed固定定位

浮动：无投影，直接是本体脱标
移动本体
定位：参照可视化窗口的边界（并非body）来定位，移动滚动条时，元素并不会移动
- 可视化界面：网页展示出来的部分
行内元素：支持行内元素宽高属性

四、absolute绝对定位

浮动：本体脱离标准图层
移动本体
定位：参照物是可变的

-参照不是窗口，而是浏览器呈现出来的部分页面（初始可视化页面的边框），当页面发生变化时，元素也会动

-如果有非静态元素，就参照它的边框；如果没有非静态元素，则参照可视页面的边框
行内元素：支持行内元素宽高属性

五、top

1、属性描述： 设置或获取元素与参照物顶边界的偏移量

2、版本变更： 否

3、语法模板：

top: auto | <length> | <percentage>

4、默认值： auto，自动判断

5、属性值描述：

auto: 自动，根据尽量保持常规流状态的规则自动分配;

<length>: 长度值，可以为负;

<percentage>: 百分比，相对定位参照父级元素的宽度，绝对定位参照非静态的祖辈元素的宽度，固定定位参照窗口的宽度，可以为负;

6、适用元素： position为非静态的元素

7、是否具有继承性： 无

8、是否具有动画性： 当值为<auto>或<percentage>时

9、脚本接口： top

注意事项： 该属性用来指定盒子参照相对物顶边界向下偏移。相对定位元素的相对物是自身，绝对定位和居中定位元素是从包含块的padding边界开始计算偏移值

六、z-index

属性描述： 设置或获取元素的层叠顺序

版本变更： 否

语法模板：

z-index: auto | <integer>

默认值： auto

属性值描述：

auto: 层叠级别为0，该种情况下元素不会创建新的局部层叠上下文;

<integer>: 使用整数来表示层叠级别，值越大层级越高，可以为负值;

适用元素：

是否具有继承性： 否

是否具有动画性： 是否

脚本接口： zIndex

**现象：**当两个元素的z-index值相同时，根据元素的顺序来排列，后来者居上；但如果是非浮动元素层次高于浮动元素并不会产生影响，即浮动元素在上层。

注意事项： 如果同一个层叠上下文中存在相同层级的元素，那么则根据文档流的顺序，后面的覆盖前面的层级

七、calc四则运算

**值描述：**该值一般用于容器的居中

margin: calc(50% -<lenght>);

lenght：容器宽的一半

布局 ( Layout )

float

**属性描述：**一个元素脱离标准图层，尽力的往左靠

**标准图层：**又称标准文档流，处于浏览器的最底部，每个浮动元素也存在自身的标准图层。

脱离标准图层，简称脱标，脱流。

版本变更： 否

语法模板：

float：none | left | right

默认值： none

属性值描述：

none：设置对象不浮动;

left：设置对象浮在左边;

right：设置对象浮在右边;

**适用元素：**所有元素

是否具有继承性： 否

是否具有动画性： 否

规则和特点：

规则1：元素在浮动时，不能对已经布局完毕的元素造成影响
规则2：无论什么元素，只要浮动以后都会变成浮动块（块元素）
规则3：在标准图层中，块元素必须独占一行，但因为浮动元素脱标了，多个浮动元素会显示在同一行中，当一行放不下时，会自动换行。
规则4：无论什么元素脱离标准图层后，在标准图层中默认宽高都为0*0，都自动转成block（块）
- 在非标准图层中，没有行的概念，更没有文本的概念，所以在非标准图层没有inline属性存在
规则5：浮动元素不会与任何元素发生margin的折叠或穿透，因为不在同一个平行空间
规则6：两个浮动元素之间没有空格（两个块元素之间有空间）

现象：

只要元素发生绝对定位或固定定位，它就不能再float脱流

原因：相对定位、绝对定位本体已经脱流了
相对定位和浮动可以共存

原因：常规流中保留了本体，本体可以浮动；元素先定位，再本体脱流
浮动元素不会元素发生margin折叠，但当它为负值时，会与浮动元素折叠
div1、div2、div3是兄弟关系，若div1，div3浮动，div2不浮动，div3会移动到div1的右下角

原因：如果没有足够的水平空间让浮动元素占据，浮动元素将向下移动，直到下方空间足够容纳或下方已经没有浮动元素。
1. 三张图片横向分布时，width=33.333%会产生白边，直接采用浮动就可以解决，这种图片被称为自适应图片。

**使用场景：**该浮动通常用来做导航条

脚本接口： styleFloat(IE)或 cssFloat非(IE)

注意事项： float在绝对定位和display为none时不生效

clear

属性描述：清除浮动对某个元素**的影响，而不是清除float属性

版本变更： 否

语法模板：

clear：none | left | right | both

默认值： none

属性值描述：

none：允许两边都可以有浮动对象;

both：不允许所有浮动对象;

left：不允许左边有浮动对象;

right：不允许右边有浮动对象;

适用元素： 块级元素

是否具有继承性： 否

是否具有动画性： 否

脚本接口： clear

父级高度坍塌

定义：父元素内部的子元素都是浮动元素，但因为浮动元素脱标，因此导致了父级元素的高度为0，规则4的现象。
解决方法：在浮动元素的底部添加一个clearfix（清除浮动、修复）的div

clearfix标准名

.clearfix{    clear: both;        }
<div class="clearfix"></div>

定位、浮动

Position (定位)

一、position

二、relative相对定位

三、fixed固定定位

四、absolute绝对定位

五、top

六、z-index

七、calc四则运算

布局 ( Layout )

float

clear

父级高度坍塌

猜你喜欢