理解css笔记｜青训营笔记关于css的基础知识，布局方法，层叠上下文，变形、过渡和动画，响应式设计，css预处理器，

一、基础知识

1.层叠三大规则

层叠的优先程度为样式表来源最高，源码位置最低。其中样式表来源分为浏览器默认样式、用户样式表和开发样式表，优先级是递增的，也就是开发样式表会覆盖前两个样式表，需要注意的是，如果浏览器样式中出现了!important，就是无法修改了，因为其的优先级最高。

样式表来源
1. 浏览器默认样式
2. 用户样式表（很少有）
3. 开发样式表
4. 开发样式表 + !important
5. 用户样式表 + !important
6. 浏览器默认样式 + !important
选择器优先级
源码位置

2.良好做法

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

3.继承

子元素可以从其父元素接收样式属性值。这使得我们可以在一个地方设置通用样式，然后让其他元素自动继承这些样式，从而减少代码的重复和提高可维护性。大部分具有继承特性的属性和文本相关，比如color，font-size，还有少部分的列表和表格的属性，这些值在父元素设置后，子元素会自动继承这些样式，我们可以使用inherit关键字显示指定一个属性值从其父元素继承。

4.盒模型特性的展现形状

// 三角形
<div class="triangle"></div>

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

// 固定比例矩形
<div class="ratio-box"></div>

.ratio-box {
    background-color: pink;
    width: 100%;
    height: 0;
    padding: 0;
    padding-bottom: 75%; // 注意，这里是父元素宽度的75%
}

// 渐变边框
<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-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
    
    background-origin: padding-box, border-box;
    // background-origin 规定了指定背景图片background-image 属性的原点位置的背景相对区域。
    
    background-image:
    linear-gradient(to right, #fff, #fff),
    linear-gradient(135deg, #e941ab, #a557ef);
}

5.负外边距

它可以在盒子之间创建重叠或者调整盒子的位置。左边距为负时，它会向左移动；右边距为负时，它会向右移动；上边距为负时，它会向上移动；下边距为负时，它会将下方所有的元素向上移动。所以，负外边距可能会导致布局上的问题，比如元素重叠、脱离正常文档流等等，最好在细微调整子元素相对于父元素的位置时使用。

二、布局

1.常用布局与新增布局

css3之前的常用布局

常规流（div）
浮动流（float）
定位流（position）

css3之后新增的布局

flex弹性布局（1维，基于内容）
grid网格布局（2维，基于布局）
multicol多列布局（文本内容多列展示）

2.常规流布局

常规流布局主要包括两类元素：块级元素和行内元素。块级元素会独占一行，即它们会从上到下排列，其默认的宽度为其父容器的宽度，高度取决于其内容，常见的块级元素有<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>等；行内元素会在同一行内从左到右排列，直到容器宽度不足时才会换行，其宽度和高度不取决于父容器，而是依据内容，常见的行内元素有：<span>、<a>、<strong>、<em>、<img>等。

格式化上下文分为块级格式化上下文（BFC）和内联级格式（IFC）化上下文，特点如下：

BFC： 块级格式化上下文，一个独立的容器，内外元素的布局不会互相影响，按照垂直方向逐一排列，内部元素元素不会受到外部浮动元素的影响。

IFC：内联级格式化上下文，行内元素的布局环境，行内元素会根据它们在文档流中的顺序排列，并根据字体的基线对齐，并按照水平方向逐一排列。

3.flex布局

父盒子设置属性

display: flex | inline-flex;  //对应块元素和行内元素

子盒子常用属性

// 主轴排列方向
@flex-direction: row | row-reverse | column | column-reverse;
// 容器内项目是否可换行
@flex-wrap: nowrap | wrap | wrap-reverse;
// 上面两种属性的简写
@flex-flow: <flex-direction> || <flex-wrap>;
// 主轴对齐方式
@justify-content: flex-start | flex-end | center | space-between | space-around;
// 主轴元素内对齐方式
justify-item: stretch | flex-start | flex-end | center | baseline;
// 副轴对齐方式
@align-items: stretch | flex-start | flex-end | center | baseline;
// 副轴多根轴线的对齐方式
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
// 单个元素对齐方式
justify-self: stretch | start | end | center;
align-self: stretch | start | end | center;
// 项目在容器中的排列顺序，数值越小，排列越靠前,默认值为0
order: <integer>;
// 项目占据的主轴空间，主轴为row时，相当于优先级更高的width
flex-basis: auto | <length>;
// 项目的放大比例
flex-grow: <number>;
// 项目的缩小比例
flex-shrink: <number>;
// 上面三种属性的简写
@flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

4.grid布局

父盒子设置属性

display: grid | inline-grid;
// 生成显式的列/行
grid-template-colums/rows: 数值 | 百分比 | fr | repeat()等
// 规定区域分布
grid-template-areas: "header header" | "sidebar content" | "footer footer";
// 规定默认的排序方向
grid-auto-flow: row | column;

子盒子常用属性

// 规定占用的列/行
grid-column/row: <start-line> | <end-line>;
// 规定占用的area
grid-area: header;

三、层叠上下文

是对HTML元素的三维构想，将元素沿着垂直屏幕的虚构的Z轴排开，层叠顺序的规则如下：

背景和边框：层叠上下文元素的背景和边框位于最底层
负 z-index：拥有负 z-index 值的子元素按照 z-index 从小到大的顺序绘制
块级元素：按照 HTML 代码中的顺序绘制非定位的块级元素。位于后面的元素将覆盖位于前面的元素
浮动元素：按照 HTML 代码中的顺序绘制浮动元素。位于后面的元素将覆盖位于前面的元素
内联元素：按照 HTML 代码中的顺序绘制非定位的内联元素。位于后面的元素将覆盖位于前面的元素

其他还有z-index为正数，opacity属性值不为1，transform属性值不为none等等，可以简单记忆：

装饰（background） < 布局（block、float） < 内容（inline-block）

四、变形、过渡、动画

1.变形

// 常用属性
transform: rotateX(angle); 绕 X 轴旋转指定的角度。
transform: rotateY(angle); 绕 Y 轴旋转指定的角度。
transform: rotateZ(angle); 绕 Z 轴旋转指定的角度。
transform: scale3d(sx, sy, sz); 分别沿 X、Y 和 Z 轴缩放元素。
transform: translate3d(tx, ty, tz); 分别沿 X、Y 和 Z 轴移动元素。
transform: perspective(p); 设置透视距离。较小的值会增强 3D 效果。
transform: transform-origin; 定义变换的基点，即元素进行变换时以哪个点为中心。默认值为中心点。
transform: perspective; 定义观察者距离元素的距离，需要设置在父元素上。
transform: perspective-origin; 定义透视投影点的位置。默认值为 "50% 50%"，即元素的中心点。

2.过渡

transition:<property> <duration> <timing-function> <delay>

property为属性名，比如height、margin等
duration为持续时间，比如0.1s
timing-function为时间变化函数，比如'linear','ease-in','step'等
delay为延迟触发时间，比如1s

3.动画

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInDown {
    // 动画名称 
    animation-name: fadeInDown;
    // 动画持续时间
    animation-duration: 1s;
    // 动画执行前后的样式
    animation-fill-mode: both;
}

4.性能

五、响应式设计

1.DPI和PPI

dpi(dots per inch): 每英寸多少点

ppi(pixels per inch): 每英寸多少像素数

当用于描述显示器设备时ppi和dpi是同一个概念，说的是每英寸多少物理像素及显示器设备的点距。当屏幕分辨率为X*Y时，ppi计算公式如下：

PPI = X / 屏幕宽度（inch）= Y / 屏幕高度（inch）= (X^2 + Y ^2)^0.5 / 屏幕对角线（inch）

2.DPR

设备像素比（Device Pixel Ratio）表示一个 CSS 像素与设备物理像素之间的比例，描述了一个 CSS 像素占据了多少个设备物理像素，比如设备的 DPR 为 3，那么一个 CSS 像素占据了 3x3 = 9 个物理像素。目的是使得在高分辨率屏幕上显示的内容更加清晰和细腻。

3.移动端viewport

移动设备的屏幕尺寸和分辨率通常比PC设备小得多。默认情况下，许多移动浏览器将尝试将整个网页缩放到屏幕的宽度以适应屏幕尺寸，这可能导致文本和元素变得过小，难以阅读和操作。为了解决这个问题，可以使用 viewport 来控制浏览器如何显示页面内容。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
width=device-width // 将 viewport 的宽度设置为设备的物理屏幕宽度,使内容在不同尺寸的设备上自适应。
initial-scale=1 // 设置页面的初始缩放比例为 100%
maximum-scale=1 // 定义页面的最大缩放比例为 100%
user-scalable=no // 指定用户是否可以手动缩放页面

六、语言增强

1.常用预处理器

scss、less、stylus拥有比css更强大的编程能力，能够提高开发效率，但是最后都是要通过预处理器解析成css。

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

自定义变量 ——提高复用性
嵌套、作用域 ——避免全局污染
mixins、继承 ——提高可维护性
操作符、条件/循环语句、自定义函数 ——提高可编程能力

七、工程架构

1.css-in-js

将应用的css样式写在js文件中，利用js动态生成css，优点是拥有局部的作用域，样式仅应用于特定的组件，避免了全局样式污染和命名冲突，并且可以使用js来根据属性和逻辑创建动态样式、根据变量和对象共享主题和样式、根据模块系统管理样式依赖简化构建和打包过程。流行的 CSS-in-JS 库有styled-components，emotion，JSS

八、总结

通过这次课程的学习弥补之前学习css时的漏洞，比如flex布局和grid布局的具体使用方法，并且了解了一些css运行原理和机制，虽然最后的工程化还是没太记住，可能是没有实战吧，不过还是有大致的印象，留到以后的实践中再了解啦。

理解css笔记 ｜ 青训营笔记