分享CSS干货笔记

总结并分享一些CSS当中常见，但是对于大家来说可能不太清晰的概念，当我们熟记于心的时候，在CSS开发上相信也会更加得心应手。

一、盒模型

盒模型：

• 标准盒模型（content-box）：占用宽度 = 内容宽度（content）+ padding+border+margin
• IE盒模型（border-box）：占用宽度 = 内容宽度（content+border+padding）+ margin

一言以蔽之，content-box的宽高是规定内容的宽高，border-box的宽高规定了content+border+padding三者和的宽高

---

二、CSS优先级

!important > 行内样式 >id > 类（class，伪类，属性选择器） > 标签元素 > 通配符 > 继承 > 默认

---

三、元素居中

3.1 margin 0 auto

要求目标元素宽度固定，并且与父元素左右margin有空余。

.child {
    width: 200px;
    border: 1px solid gray;
    margin: 0 auto;
}

3.2 absoulte + tarnsform

绝对定位，然后利用tarnsform移动目标元素宽高的50%（上下居中）

.child{
    width: 200px;    //此处可以不设置，默认为父元素的一半
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

3.3 absolute + margin

与3.2同理，但必须设置width

.child{
    position: absolute;
    left: 50%;
    width: 100px; // 此处必须设置
    margin-left: -50px; // 设为元素自身宽度的一半，必须根据元素自身宽高明确左移动距离
}

3.4 flex

.child{
    display: flex;
    justify-content: center;
    align-items: center;
}

3.5 text-align: center

适用于行内元素居中

3.6 vertical-align: middle

• 使行内盒模型与行内元素容器垂直对齐，例如文本与图片
• 垂直对齐表格单元内容
• 如果父元素未设置高度，则与行内最高高度对齐，表现为本行与父元素垂直居中

3.7 line-height

垂直居中，适用于单行文本、行内元素、行内块级元素

.child{
    line-height: 30px;
    height: 30px;
}

• 如果一个标签没有定义高度，那么其高度将由line-height决定，例如，当div没有设置height属性时，设置line-height:0，那么div的高度就为0

3.8 IOS10上居中失效

在开发的时候遇到的一个兼容性问题

.ios-center{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

如上即可解决绝对定位不居中的问题

Reference: 《可食用的「css布局干货」,纯Html示例，可调试 | 水平、垂直、多列》

---

四、定位属性position

position:

• absolute：绝对定位，定点位于最近postion值为绝对或相对值的父元素的左上角
• relative：相对定位，定点原点为自身所在位置
• fixed：固定
• static：默认值
• inherit：继承
• sticky：元素根据正常文档流进行定位，可以被认为是相对定位和固定定位的混合。当元素在屏幕或滚动元素显示区域时，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。可用来做吸顶特效

---

五、浮动

元素加了浮动属性后，会脱离文档流，提升半层层级，向指定方向移动，直到遇到父元素的边界或另一个浮动元素后停止。

层级：如果元素看作一层，那么下半层就是背景元素，上半层就是内容

1. 浮动元素之间是漂浮着，并不会形成一个流。浮动元素总会保证自己的顶部与上一个标准文档流的底部对齐
2. 利用position的absolute，会让元素以inline-block形式显示，此时可以设置长宽

元素浮动会影响兄弟元素的位置，父级元素高度塌陷

解决的方法：

• 父级元素定义固定高度
• 最后一个浮动元素之后，增加<div style="clear:both;"></div>
• 包含浮动元素的父元素设置overflow: hidden

---

六、页面渲染过程

一个网页接收到服务器返回的数据后，浏览器大致进行的操作步骤：

1. 构建DOM树
2. 构建CSSOM树
3. 将DOM与CSSOM结合，构建渲染树
4. 回流（layout布局）
5. 重绘
6. display

---

七、margin的高度塌陷问题（外边距折叠）

涉及到BFC（Block Formatting Context，块级格式化上下文）知识，简单来说就是一个独立的块级渲染区域，与外界不相干

BFC的布局约束规则:

• 内部的Box会在垂直方向，一个接一个地放置。

• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

• 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。即BFC中子元素不会超出他的包含块。

• BFC的区域不会与float box重叠。

• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

• 计算BFC的高度时，浮动元素也参与计算。

折叠边距计算规则：

1. 两者边距为正值或负值，则取绝对值大那个
2. 两者边距一正一负，则取两者之和

margin的左右是不受影响，外边距重叠主要是由于重叠的两个元素处于同一个BFC下。通过某些属性使元素生成新的BFC上下文即可解决。

BFC触发方式：

• 根元素，即HTML标签
• 浮动元素：float值为left、right
• overflow值不为visible，为 auto、scroll、hidden
• display值为inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
• 定位元素：position值为 absolute、fixed

注意：
display: table也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell，是这个匿名的table-cell生成了BFC。

---

八、行内元素与块级元素

块级元素，独占一行，宽、高、外边距、内边距可控

行内元素，共享一行，宽、高和margin与padding的top/bottom均不可控

---

九、img标签的底部边距问题

有时候发现图片的底部有着一条缝的视觉效果，其原因是因为img是一个行级置换元素，图片默认的对齐方式是基线，与字体大小有关

解决办法：

• display: block;
• float: left;
• 定义vertical-align

  img {
    border: 0;
    vertical-align: bottom;
  }
  

• 父容器的字体大小设置为0
• 标签设置与图片相同的高度

十、属性值中的百分比

1. 宽高百分比相对于父级
2. margin/padding中的百分比相对于自身，但padding值不能为负值
3. translate的百分比相对于自身

十一、poniter-events

该属性可以用于设置当前元素的点击事件的是否进行处理，具体可参看MDN关于pointer-events的内容

用于点击穿透，比如网页水印，兼容性很好～

---

十二、z-index

z-index是控制层级的属性（换个词语：堆叠顺序），在网页中除了xy的二维，同时也存在z轴，比如元素叠加重合，优先级问题。元素重合后的从下到上主要由在文档流中顺序、z-index、层叠上下文、层叠水平决定。

z-index仅在定位元素中生效

层叠上下文元素有如下特性：

• 层叠上下文的层叠水平要比普通元素高；
• 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
• 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。
• 每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素。
• 层叠上下文可以阻断元素的混合模式；

层叠顺序的优先级顺序如下：

1. z-index > 0 (要求z-index属性生效)
2. z-index: auto 或者 z-index: 0 (z-index: auto 不会创建层叠上下文)
3. inline、inline-block 行内盒子
4. float浮动盒子
5. block块级盒子，非 inline-block，无position 定位（static除外）的子元素
6. z-index < 0
7. 层叠上下文元素的 background/border

偶然看到说默认firefox中的z-index是auto，IE是0，有待验证，一般来讲z-index，常用编码下，z-index越大越靠前

堆叠顺序规则可以简单归纳为：

• 兄弟元素，文档流后者居上，兄弟元素的子元素相互比较根据堆叠上下文（父级元素）来排序
• 在相同的堆叠上下文中，按照明显的优先级顺序来，比如设置了z-index，那么值越大，显示距离用户越近