学习笔记

Posted 2020-11-02 liuwujiang

##行高
    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(除了层叠)