CSS 层叠样式表概览

一、CSS 语法

样式语法

选择器{
    属性名:属性值
}

@语法

@charset "UTF-8";
@import url(style2.css);
@media (min-width:100px) and (max-width:200px){
    样式语法
}

二、元素的宽度和高度

文档流

• 英文是 normal flow，意思是文本从左到由、从上到下显示

元素宽高的决定因素

• 内联元素的宽度由 content、padding 决定，高度由 line-height 决定
• 块级元素的宽度默认自适应，高度由内部文档流元素的总和决定
• 内联块级元素的宽度和高度都由内部文档流元素的总和决定

不要轻易写宽高

• 因为那样可以尽可能让页面响应式
• 所以尽可能写 max-width、min-height 这种样式

margin 合并

• 元素之间上下 margin 会合并，左右 margin 不会合并
• 所以我尽可能使用 padding，省得考虑合并问题

脱离文档流

• float、position:absolute、position:fixed 会让元素脱离文档流，position: relative 不会
• 脱离文档流等于告诉父元素“计算宽高的时候不要算上我”

水平居中

• 块级元素：marigin:auto;
• 内联元素：父元素加 text-align:center;

垂直居中

• 不写高度情况下：父元素加 padding
• 写高度的情况下：display:flex; justify-content:center;align-items:center;

demo展示：https://fetch200.github.io/mcx-wheels/src/components/element-width-height.html

三、堆叠顺序和堆叠上下文

正常的元素之间堆叠顺序从下往上的顺序如下所示

1. background
2. border
3. 块级元素
4. 浮动元素
5. 内联元素
6. 定位元素 z-index = auto
7. 定位元素 z-index > 0

z-index 的值可以改变自身在当前「堆叠上下文」的「堆叠顺序」，z-index 只有给定位元素才有效
堆叠上下文可以理解为堆叠作用域，类似于 BFC，以下方式会形成堆叠上下文（下面省略了许多）
推荐阅读：层叠上下文 —— MDN，z-index —— MDN

• 文档根元素（html）；
• position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；
• position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素
• flex (flexbox) 容器的子元素，且 z-index 值不为 auto；
• grid (grid) 容器的子元素，且 z-index 值不为 auto；
• opacity 属性值小于 1 的元素（参见 the specification for opacity）；
• mix-blend-mode 属性值不为 normal 的元素；
• 以下任意属性值不为 none 的元素：
  • transform
  • filter
  • perspective
  • clip-pathmask / mask-image / mask-borderisolation

比较两个不同 z-index 元素的堆叠顺序，先看它们的「堆叠上下文」是谁

• 比较堆叠顺序时，可以把 z-index = auto 当做 z-index = 0 看待

demo 展示：http://fetch200.github.io/mcx-wheels/src/components/stacking-sequence.html

四、BFC 块级格式化上下文

推荐阅读：块格式化上下文 —— MDN

五、IFC 内联级格式化上下文

推荐阅读：https://zhuanlan.zhihu.com/p/25808995

首先，知道这个概念，一个字体会被横向切成 5 条线，从上到下分别是

1. Ascender
2. Cap Height
3. X-Height
4. Baseline
5. Descender

当设计师设计字体时，有一个概念，叫做 em-square，它的有一个相对高度值，比如 1000，对应到实际的字体是 Ascender 到 Descender 的距离，我们前端工程师写的 font-size 像素值指的就是 em-square 的高度，这个高度我们无法观测到
设计师设计字体时，会设置一个高度，称呼它为“virtual-area高度”，一般比 em-square 高度更高，这个高度设计师可以随意地写，在页面展示的就是字体的实际占位高度，这个高度我们要通过特殊方式感知到，设置 line-height 像素值就是改变“virtual-area高度”，就改变了它实际的占位高度，我们常常设置的比原来的更高
使用不同设计师设计的字体摆放在同一行时，这些字体的对齐方式会以的“baseline(基线)”对齐，而不是采用各个字体的推荐高度自动上下居中，这就会导致可能有的字体实际占位偏上，有的字体实际占位偏下，于是这又引出了一个高度，基线对齐后最上面的高度到最下面的高度称之为“line-box 高度”，line-box 是这一行整体的最终实际占位高度

总结一下上面的内容

• font-size 写的是 em-square 高度
• line-height 写的是字体实际占用高度
• 不同字体摆在一行时，会引申出 line-box 高度

vertical-align 属性可以设置不同字体在一行的的对齐方式（这个属性无法在视觉上做上下对齐操作）

• vertical-align:top 以 virtual-area 高度最顶部对齐
• vertical-align:bottom 以 virtual-area 高度最底部对齐

img 为什么在包裹于 div 时，会出现间隙？

• 因为这个 img 会和字体做基线对齐，那时由于我们看不见的字体实际高度造成的，它下面有看不见的间隙
• 给图片使用 vertical-align:top 就能解决这个 bug

六、Flex 布局属性列举

Flex 布局特点

• 块级布局侧重垂直方向、行内布局侧重水平方向，flex 布局与方向无关
• 可以实现空间自动分配、自动对齐
• 适用于简单的线性布局

container 有六个属性：

flex-direction 【决定主轴方向】
flex-wrap 【决定如何换行】
flex-flow 【flex-direction、flex-wrap 的缩写形式】
justify-content【决定主轴的对齐方式】
align-items 【决定次轴的对齐方式】
align-content 【决定多根轴线的对齐方式】

item 有六个属性：

order 【定义项目的排列顺序】
flex-grow 【定义项目的放大比例】
flex-shrink 【定义项目的缩小比例】
flex-basis 【定义项目初始占用空间】
flex 【flex-grow、flex-shrink、flex-basis 的缩写形式】
align-self 【决定该单个项目不一样的对齐方式】

七、常用的 CSS Reset 样式

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
*::before,*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
a{
  text-decoration:none;
  color:inherit;
}
button:focus{
  outline:none;
}
ul,li{
  list-style:none;
}
table{
  border-collapse:collapse;
  border-spacing:0;
}
video{
  outline:none;
}

八、跨平台 font-family 样式

参看链接：《跨平台中文字体解决方案》，下面是黑体和楷体的两种 font-family

body{
  font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}
body{
  font-family: Baskerville, Georgia, "Liberation Serif", "Kaiti SC", STKaiti, "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, DFKai-SB, "TW\-Kai", serif;
}

九、内容溢出省略号样式

单行文字溢出省略号

.oneline{
  white-space:nowrap;
  text-overflow:ellipsis;
}

多行内容溢出省略

.multiline{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow:hidden;
}

十、文字两端对齐样式

.both-sides-aligned{
  text-align:justify;
  line-height:20px;
  height:20px;
  overflow:hidden;
}
.both-sides-aligned::after{
  content:'';
  display:inline-block;
  width:100%;
}

十一、图片的多种展示样式

img 标签

<img class="icon" src='./dog.png'>

background 属性

.icon{
  background: url("./dog.png") no-repeat center/cover;
  width:300px;
  height:300px;
}

iconfont 方法（配合www.iconfont.cn网站）

<link href="./iconfont.css" rel="stylesheet">
<i class="iconfont icon-xxx"></i>

symbol 方法（配合www.iconfont.cn网站）

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>
<script src="./iconfont.js"></script>

用CSS 自己画
可以看看这个作者：https://cssicon.space/#/

.search.icon {
    color: #000;
    position: absolute;
    margin-top: 2px;
    margin-left: 3px;
    width: 12px;
    height: 12px;
    border: solid 1px currentColor;
    border-radius: 100%;
    transform: rotate(-45deg);
}
.search.icon::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 5px;
    height: 6px;
    width: 1px;
    background-color: currentColor;
}

十二、@media 和 rem 样式

媒体查询可以根据宽度层叠样式

@media(max-width:1200px){
  body{
    background:red;
  }
}
@media(min-width:1200px) and (max-width:1920px){
  body{
    background:orange;
  }
}
@media(min-width:1920px){
  body{
    background:green;
  }
}

link 标签也可以根据宽度进行层叠样式

<link rel="stylesheet" href="./style.css" media="(max-width:320px)">

动态REM 适配手机端页面方案

• 将手机的宽度设置根元素 html 的 font-size 宽度
• 布局使用 rem 方案写宽高，原理是 1rem 等于根元素html 的 font-size

  let pageWidth = window.innerWidth
  document.write(`<style>html{font-size:${pageWidth}px}</style>`)

「@浪里淘沙的小法师」