CSS | 青训营笔记为什么学习css https://codepen.io/yao-mo 基础知识 CSS：Casca

为什么学习css

基础知识

CSS：Cascading Style Sheet，层叠样式表。（规则声明的集合，产生冲突）

Cascading规则

cascading层叠规则：我们一般写的样式都归类在作者样式表，作者样式表根据书写位置又分为三类：行内式、内嵌式、外部链接式，这三类样式的优先级要根据选择器的优先级确定。

选择器

内联样式（写在标签内部的）1000，id选择器100，类和伪类10，元素选择器1，通配选择器0.当选择器中包含多种选择器时，需要将各种选择器的优先级相加然后再比较，但是多个相同级的选择器相加的结果不会超过上一个级别的优先级。（选择越详细精确，权重越高，优先级越高）

对于@import的样式，根据@import的顺序

对于link和style标签的样式，根据在document中的顺序决定

h1是green

少用id
尽量不要!important
自己的样式加载在引用库样式后面

继承

值和单位

盒模型

外边距（margin）： 可正可负可auto

提供4个数据：（如margin：20px 20% 0.2em 20px；）将依次作用于上，右，下，左。（顺时针）
提供3个数据：将依次作用于上，左右，下
提供2个数据：将依次作用于上下，左右
提供1个数据：将依次作用于上下左右

margin负值最终减少的是外界可感知的宽高。

不提倡使用负外边距，因为这会增加代码复杂度。

内边距（padding）： 不可为负，其余同上。

由盒模型的特性能够实现一些展现形式：

<!-- 三角形 -->
<div class="triangle-bottom"></div>

.triangle-bottom{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
}

<!-- 固定比例矩形，也可以使用新特性aspect-ratio：https://developer.mozilla.org/zh-CN/docs/Web/CSS/aspect-ratio -->
<div class="ratio-box"></div>

.ratio-box{
    /* 新特性写法 */
    /* aspect-ratio: 4 / 3;
    background-color: greenyellow; */
    
    background-color: cadetblue;
    width: 100%;
    height: 0;
    padding: 0;
    /* 是父元素宽度的75% */
    padding-bottom: 75%;
}

<!-- 水平居中 -->
    <div class="wrap">
        <div class="h-center"></div>
    </div>
    
.wrap{
    width: 100%;
    height: 100%;
    border: 1px dashed grey;
}
.h-center{
    width: 100px;
    height: 50px;
    background-color: navajowhite;
    /* 使用auto将左右2侧的剩余空间均分 */
    margin: 10px auto;
}

<!-- 渐变边框，这块有点疑问 -->
<div class="awesome-border"></div>

.awesome-border{
    width: 150px;
    height: 100px;
    border: 8px solid transparent;
    border-radius: 12px;
    background-clip: padding-box,border-box;
    background-origin: padding-box,border-box;
    background-image: linear-gradient(to right,#fff,#fff),linear-gradient(135deg,#e941ab,#a557ef);
}

布局和定位

常规流中的任意盒子都只会参与一种格式化上下文。

BFC

外边距塌陷或外边距重叠问题：

IFC

内联格式化上下文：

实现单行元素居中对齐常用方式：

将line-height和height设置为相同的高度即可
使用flex布局的align-items:center即可

flex布局

一维布局

grid布局

2017年推出的布局方式，可以定义由行和列组成二维布局，然后将元素放置到网格中。元素可以只占其中一个单元格，也可以占据多行或多列。

grid和flex布局的使用策略

使用建议：

position定位

为了我们可以在文档流的基础上，让元素移动，做出更多灵活的改变。当position属性的取值非static的时候，可以使用top, right, bottom, left对其进行定位。

层叠上下文

层叠上下文：The Stacking Context。是对HTML元素的三维构想，将元素沿着垂直屏幕的虚构的 Z 轴排开。

浏览器渲染部分过程示意图（英文）：www.chromium.org/developers/…

形成条件

文档中的层叠上下文由满足以下任意一个条件的元素形成：

文档根元素（<html>）；
css3之前
- position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；
- position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；
- flex (flex) 容器的子元素，且 z-index 值不为 auto；
- grid (grid) 容器的子元素，且 z-index 值不为 auto；
opacity 属性值小于 1 的元素（参见 the specification for opacity）；
mix-blend-mode 属性值不为 normal 的元素；
以下任意属性值不为 none 的元素：
isolation 属性值为 isolate 的元素；
will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；
contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。

在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。重要的是，其子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。

总结：

层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级。
每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素。
每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。

层叠上下文介绍：developer.mozilla.org/zh-CN/docs/…

层叠顺序

层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序:

z-index 只在同一个层叠上下文内比较

子元素的z-index无法超越父元素的z-index显示顺序

编写 z-index 的建议：

变形、过渡、动画

transform 变形

在线试一试： codepen.io/yao-mo/pen/…

transition 过渡

通过指定某些元素属性从一种起始状态，在-段时间内以某种变化节奏，过渡到终止状态。

语法：transition: <property> <duration> <timing-function> <delay>

animation 动画

animation 属性参考：developer.mozilla.org/zh-CN/docs/…

css 动画样式参考：animate.style/

transform、transition、animation性能

重绘(repaint) ：是指一个元素外观属性的变化触发浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

回流(reflow) ：当渲染树中的一部分(或全部)因为元素的规模尺寸、布局、隐藏等改变需要重新构建,这就是回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。

重绘和回流的关系:在回流的时候,浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后,浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。

所以，回流必定会引发重绘，但重绘不一定会引发回流

硬件加速详情：www.chromium.org/developers/…

动画性能相关深入了解：fed.taobao.org/blog/taofed…

响应式设计

响应式设计原则

优先选用流式布局，如百分比、flex、 grid等
使用响应式图片，匹配尺寸，节省带宽
使用媒体查询为不同的设备类型做适配
给移动端设备设置简单、统一的视口
使用相对长度，em、rem、vw 做为长度度量

媒体查询

媒体查询允许某些样式只在页面满足特定条件时才生效。我们可以将媒体类型（如screen、print) 以及媒体特性（如视口宽度、屏幕比例、设备方向：横向或纵向）做为约束条件。

使用媒体查询的一些Tips:

媒体查询同样遵循cascading层叠覆盖原则，min- 和max-选择一个
由于设备的多样化逐渐不可枚举，断点的选择尽量根据内容选择，而不是屏幕大小
由于断点的增加会增加样式处理的复杂度，所以尽量减少断点

媒体查询学习参考：developer.mozilla.org/zh-CN/docs/…

设备像素

设备像素(物理像素) :显示器上绘制的最小单位,显示屏通过控制每个像素点的颜色，使屏幕显示出不同的图像。

设备像素和设备相关，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了。

CSS像素

CSS像素也叫参考像素。CSS像素(reference pixel) 其实是一个视角单位。规范给出的定义是，1css像素是从一臂之遥看解析度为96DPI (即1英寸96点)的设备输出时，1点(即1/96英寸)的视角。

通常认为常人臂长为28英寸，那么视线与水平线的夹角是:(1/96)in / (28in* 2 * PI/ 360deg) = 0.0213度

存在意义：保证在不同设备上的阅读体验是相对一致的。

viewport

布局视口(viewport)是页面中html元素(根元素)的包含块，默认情况下，window.document.documentElement.clientWidth 就是viewport的宽度。在移动设备中，默认的布局视口由于历史兼容pc屏幕的原因，并不符合需求，我们经常需要用<meta>标签对viewport进行设定，来完成移动端设备的适配。

移动端 viewport 的 meta 标签中的属性：

width
height
initial-scale
minimum-scale
maximum-scale
user-scalable：是否允许用户缩放

initial-scale在未设定时，如果width设定了，那么它会自动设置放缩值:initial-scale =屏幕宽度(例子中是390) / 980 ≈ 0.398。相比scale=1的时候，缩小了0.398倍

<meta name="viewport" content="width=device-width, initial-scale=1.0">
复制代码

相对长度

em

rem：根据根元素的字体大小确定。通过伪类:root或者html选择器选定。由于是根元素的font-size，所以不会像 em 那样出现多重嵌套问题，减少了复杂性，同时作为一个相对单位，可以进行适配放缩，可以用来做响应式布局.

vw 和 vh：vw：视窗宽度的1%。vh：视窗高度的1%。同样，vw 也可以作为响应式布局的基准单位。由于vw天然是视口宽度的1%，所以不需要js动态配置。和rem方案类似，方案设定可以如下:

移动端页面适配方案参考：www.w3cplus.com/css/vw-for-…

CSS生态相关

因为目前CSS的可编程性较差，不可维护性较高，代码污染啊等等问题催生出一系列的处理器。

常见样式处理流程

语言增强-CSS预处理器

预处理器如何提高研发效率？

自定义变量：提高可复用性
嵌套、作用域：避免全局污染、结构层次清晰、减少复杂组合选择器
mixins、继承：提高可复用性、可维护性
操作符、条件或循环语句、自定义函数：提高可编程能力、增加灵活性

SCSS、less、stylus简单对比：

语言增强-CSS后处理器

cssnano：cssnano.co/

stylelint：github.com/stylelint/s…

autoprefixer：github.com/postcss/aut…

postcss-custom-properties：github.com/csstools/po…

postcss-custom-media：github.com/csstools/po…

postcss-nested：github.com/postcss/pos…

doiuse：github.com/anandthakke…

postcss plugins：postcss.org/docs/postcs…