码迷,mamicode.com
首页 > 其他好文 > 详细

学习笔记

时间:2018-05-02 02:40:55      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:广告   基线   tom   返回   otto   体系   笔记   stack   position   

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

学习笔记

标签:广告   基线   tom   返回   otto   体系   笔记   stack   position   

原文地址:https://www.cnblogs.com/liuwujiang/p/8978021.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!