学习笔记
##行高
line-height
—————————— 顶线(top line)
—————————— 中线(middle line)
—————————— 基线(ase line)
—————————— 底线(bottom line)
##盒子的相对位置
相对位置:是指相对于盒子在原本定位体系下的位置
将盒子的position属性设置为relative,以启用相对位置
position:不可继承
默认值:static 静态位置,盒子在原本定位体系下的位置
relative 相对盒子相对于原本位置进行偏移
absolute 绝对位置
}绝对定位
fixed 相对位置
relative:如果对一个位置进行相对位置设定的话,他原来所占用的位置依然占用,不脱离文档流
绝对位置:1.脱离文档流
2.会去找包含块(上一级),直到position的值≠static
当有层叠关系时才用绝对位置
固定位置:viewport(视口),脱离文档流
可以用于aside有广告,导航,右下角返回顶部时
##当浮动元素被设置为绝对定位
属于绝对定位,float属性被强制设置为none
* 绝对定位元素对其他元素的影响
绝对定位元素不会对其他任何元素造成任何影响
绝对定位位置
可通过left,right,top,bottom
绝对定位的包含块position:fixed(absolute)
position:absolute
以此判断元素是否拥有
↓
position≠static → 否 初始化包含块
↓
该元素的填充盒
##元素重叠问题
怎么解决:
堆叠级别(stack level)
他决定了元素谁显示在前,谁显示在后
通常情况下,堆叠级别越高,显示越靠前
通过z-index属性可以设置元素的堆叠级别
z-index:不可继承
默认值:auto 通常情况下,书写顺序靠后的元素显示在前
可取值:auto 手动设置堆叠级别,堆叠级别高的元素靠前显示
数字
注意:1.不要用于静态位置的元素
2.尽量不要使用z-index(除了层叠)