美文网首页让前端飞
CSS学习笔记一——盒子模型,定位,z-index

CSS学习笔记一——盒子模型,定位,z-index

作者: Rocky_Wong | 来源:发表于2018-08-05 23:33 被阅读26次

    盒子模型

    结构:content + padding + border + margin

    基本分类

    • 标准盒子

      • width / height = content(即width 和height只等于内容的宽高)
    标准盒子模型.jpeg
    • IE盒子
      • width / height = content + padding + border (即width 和height包括了content + padding + border)
    ie盒子模型.jpeg

    css3新属性 box-sizing(默认值 content-box)

    • box-sizing: content-box

      • 相当于标准盒子
      • 设定的width只含内容宽度,不包括padding + border
    • box-sizing: border-box

      • 相当于IE盒子
      • 设定的width包括content + padding + border
    • 使用场景

      • 其实是看设计师的习惯和团队的统一规范,其实两种都可以实现,就看哪种更好维护罢了

      • 对于按照百分比布局,同时有内边距的时候使用 box-sizing: border-box会更好维护,你不需要在意改动内边距和边框会影响到盒子的宽高。

      • 笔者一般都直接全局设置 *{box-sizing: border-box}

      • 如需兼容ff和移动端的话最好加上前缀-moz-,-webkit-,所以格式如下

          *, *:before, *:after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        }
      
    • ⚠️在IE8,box-sizing的值为border-box时,不能与min-width, max-width, min-height或max-height的一起使用,因为IE8对min-和max-的解析,仍是作用于content-box,不受box-sizing属性控制

    关于margin

    • ⚠️margin外边距不属于盒子模型范围内,它只占有对应的外边距位置

    • 对于行级元素inline,margin-top和margin-bottom对于上下元素无效,margin-left和margin-right有效

    • 对于相邻的块级元素block,margin-bottom和margin-top

      • 若都是正数,取最大值
      • 若都是负数,取最小值
      • 一正一负,正负相加

    Position 定位

    absolute

    脱离文档流,相对于已定位的父元素进行移动,当某个absolute定位元素的父元素具有position:relative/absolute/fixed时,定位元素都会依据父元素而定位,而父元素没有设置position属性或者设置了默认属性,那么定位属性会依据html元素来定位

    fixed

    脱离文档流,不随着滚动条的移动而改变位置,相对于浏览器窗口,对于IE78需要DOCTYPE

    relative

    相对于自身位置移动,原位置还保留在文档流中,内容发生了移动

    static

    position默认值

    sticky

    • css新属性——粘性定位

    • 被滚动超过指定的偏移值时,元素在容器内固定在指定位置,所以必须设置上下左右其中一个值(达到阈值前会相对定位,达到后变成固定定位)

    • 不脱离文档流,仍然保留元素原本在文档流中的位置

    nav{
      position:sticky;
      top:10px; /* 阈值 */
    }
    
    • 但是兼容性非常不乐观
    position: -webkit-sticky;
    position: sticky;
    
    • 挺好玩的,例如我们不再用监听scroll事件,即可实现导航栏滚动绝对定位

    • ⚠️注意

      • 父元素不能overflow:hidden或者overflow:auto属性。

      • 必须指定top、bottom、left、right4个值之一,否则只会处于相对定位

      • 父元素的高度不能低于sticky元素的高度

      • sticky元素仅在其父元素内生效

    z-index

    • 只对于absolute,relative,fixed三种定位有效

    • 子级无论z-index为何值,都不会对父级元素层级造成影响,但是可以通过设置子元素的z-index为负数来控制顺序。

    网上看到一个不错的比喻:

    你可以把同一层级的层叠上下文元素看做是两个不同的人,不同的人有不同的高度,你可以比较两个人的高度,但是你不能说手长身高就更高一点吧。

    • 别滥用z-index,乱设999之类的,会导致项目日后越来越难维护

    相关文章

      网友评论

        本文标题:CSS学习笔记一——盒子模型,定位,z-index

        本文链接:https://www.haomeiwen.com/subject/priivftx.html