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

盒子模型

结构：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

• 使用场景

      *, *:before, *:after {
  　　-moz-box-sizing: border-box;
  　　-webkit-box-sizing: border-box;
  　　box-sizing: border-box;
  　　}

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

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

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

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

• 在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之类的，会导致项目日后越来越难维护

作者：Eason_Wong
链接：https://www.jianshu.com/p/57e215debade