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
的右下角原因:如果没有足够的水平空间让浮动元素占据,浮动元素将向下移动,直到下方空间足够容纳或下方已经没有浮动元素。
- 三张图片横向分布时,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>