当前位置：首页 > news >正文

HTML5+CSS3自用笔记

news 2025/7/7 7:35:38

助解：解析=编译，加载=运行

浏览器的渲染过程

JS加载+执行

普通js/sync：阻塞 DOM加载+解析

在这里插入图片描述

async：下载完就执行，无依赖

在这里插入图片描述

defer：渲染完再执行，依赖

在这里插入图片描述

CSS 、JS 阻塞 DOM 解析和渲染

浏览器将页面从网络下载到本地后：

解析HTML，创建DOM，同时加载依赖的资源：CSS、图片等（加载资源的过程不会阻塞DOM解析），然后调用渲染进程渲染到界面上。

所谓渲染，就是显示

css不阻止dom的解析

js阻止dom的解析

js有可能影响dom的解析，比如在js里面新增dom等这些操作

css js都会阻止dom的渲染

dom的渲染是需要等js，css都解析完成后才进行的

尽量将CSS放头部，JS放底部，这样可以提高页面的性能。

猜测预加载

为了减缓渲染被阻塞的情况，现代的浏览器都使用了猜测预加载。

当解析被阻塞的时候，浏览器会有一个轻量级的HTML（或CSS）扫描器（scanner）继续在文档中扫描，查找那些将来可能能够用到的资源文件的url，在渲染器使用它们之前将其下载下来。

优先级（高->低）

样式表

内联样式表<style="...">

<p style="background:red"></p>

嵌入样式表<style type="text/css">p{...}</style>

<head><title></title><style type="text/css">p{background-color:yellow;}</style></head>

外部样式表<link type="text/css" href="xxx.css" rel="stylesheet" />

rel=relationshiphref=hypertext Reference<head><title></title><link href="xxx.css" rel="stylesheet" type="text/css"/></head>

通过 link 进行对外部CSS样式文件的引用，也可以引用网上别人写好的样式

选择器(权值)：层级越深的优先级越高

权值：解决样式冲突

div p.myClass#myId：元素选择器（1） + 元素选择器（1）+ 类选择器（10）+ ID选择器（100），权重为 112。

!important （会覆盖CSS的任何声明，其实与优先级毫无关系）

内联样式（1000）：style

ID 选择器（100）：`#`

类、属性、伪类选择器、特殊符号选择器（10）： `.classname`、`[attribute]`、`:hover` 、ul li

属性选择器：`[attribute^$*=value]`

/* 选择所有含有 "data-attribute" 属性的元素 */
[data-attribute] {}[title]
{color:blue;
}/* 选择所有 "data-attribute" 属性值为 "value" 的元素 */
[data-attribute=value] {/* 样式 */
}
[title=runoob]
{border:5px solid green;
}/* 选择所有 "data-attribute" 属性值以 "prefix-" 开头的元素 */
[data-attribute^=prefix-] {/* 样式 */
}
/* 选择所有 "data-attribute" 属性值以 "-suffix" 结尾的元素 */
[data-attribute$=-suffix] {/* 样式 */
}
/* 选择所有 "data-attribute" 属性值包含 "substring" 的元素 */
[data-attribute*="substring"] {/* 样式 */
}/*复合选择*/
/* 选择所有 "data-attribute" 属性值以 "start" 开头且以 "end" 结尾的元素 */
[data-attribute^=start][data-attribute$=end] {/* 样式 */
}

伪类选择器：:hover/active/nth-child(even)/first-child/last-child

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

特殊符号选择器

子元素选择器：ul li

直接子元素选择器：h1>son

兄弟选择器：h1~bros

相邻兄弟选择器：h1+bro

群组选择器：h1,h2 同时选择

元素/HTML标签、伪元素选择器（1）： `div`、`::before`

通用选择器（0）：`*`

查询选择器：document/元素.`querySelector` /`querySelectorAll`

// 选择 ID 为 "myElement" 的元素
const elementById = document.querySelector("#myElement");// 选择类名为 "myClass" 的第一个匹配元素
const firstElementWithClass = document.querySelector(".myClass");const tabElement = this.$refs.tabs.$el.querySelector(`[name="${domId}"][id="1"]`);

盒模型：width=

class="content-box"内容盒模型（W3C盒）

width = content宽度

class="border-box"边框盒模型（IE 盒）

width = content宽度 + padding + border

单位⭐⭐⭐

绝对长度单位：px 像素

相对长度单位：% 父元素

字体：em/rem（默认16px）根元素

视窗：vw，vh

position关键字⭐⭐⭐

`static（默认）：无相对`（`top`, `right`, `bottom`, `left` , `z-index无效`

`absolute，`fixed，`relative：`相对 static 外的第一个父元素，视窗，正常位置

float：沿其容器的水平方向，允许文本和内联元素环绕它。sticky(CSS3新增) ：屏幕滚出时会粘住

inherit

overflow：溢出padding

`visible（默认）：超出可见`

内容不能被裁减并且可能渲染到边距盒（padding）的外部。

`hidden：可scrollTo()滚动`

如果需要，内容将被裁减以适应边距（padding）盒。不提供滚动条，也不支持允许用户滚动（例如通过拖拽或者使用滚轮）。

内容可以以编程的方式滚动（例如，通过设置 scrollLeft 等属性的值或 scrollTo() 方法）, 因此该元素仍然是一个滚动的容器。

`clip：禁止所有滚动`

clip 和 hidden 之间的区别是 clip关键字禁止所有滚动，包括以编程方式的滚动。该盒子不是一个滚动的容器，并且不会启动新的格式化上下文。

`scroll：无论是否超出都显示滚动条`

`auto`：超出才显示滚动条

flex布局

容器属性

flex-direction：row（默认）/column(-reverse)

flex-wrap: nowrap（默认） | wrap | wrap-reverse

flex-flow=flex-direction flex-wrap

justify-content：flex-start（默认）/end、center、space-between/around/evenly

align-items：flex-start/end、center、stretch（默认）、baseline(center，text在交叉轴)

align-content:多根主轴，以交叉轴为对齐 flex-start |end | center | space-between | around | stretch（默认）

项目属性

flex-grow：默认0，若存在剩余空间

flex-shrink ：默认为1，若空间不足

默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。

如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

flex-basis：默认auto（计算main axis size）和width/height同单位

属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。

浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小

flex：默认1=flex-grow:0, flex-shrink:1 ,flex-basis:auto

flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。

`auto` (`1 1 auto`) ，none (`0 0 auto`)

/* 一个值，width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;/* 两个值：flex-grow | flex-basis */
flex: 1 30px;/* 两个值：flex-grow | flex-shrink */
flex: 2 2;/* 三个值：flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

align-self

display:inline、block、inline-block⭐⭐⭐

HTML 标签分类

文本级标签：p（段落）、span、a（超链接）、b（粗体）、i（斜体）、u（下划线）

容器级标签：div、h系列、ul、li

行显示标签分类

行内元素：文本级标签（除了p）

p在段落前后添加空行。

特征：只有在行内显示，不会自动进行换行，

宽、高不可设置，由内容决定

可替换元素：img、input、textarea文本域可设置宽高，

它们的尺寸可以通过指定属性（如width和height）来进行设置。这些元素因为通常包含外部资源或用户输入，所以允许开发者设置宽度和高度，以便更好地控制它们的显示。

设置float后脱离了文档流，可以设置宽、高

对 margin 仅设置左右方向有效，上下无效

padding 设置上下左右都有效

块级元素：容器级标签+p

特征：独占一行，换行显示，可以设置宽高，可以嵌套块和行

BFC规范

BFC块级格式化上下文（Block Fromatting Context）

问题

外边距重叠：magrin=max(top，bottom)

外边距合并（margin collapsing）是正常文档流中的一种行为，

块的上外边距margin-top和下外边距margin-bottom会合并为单个边距（为单个边距的最大值）

浮动导致父高度塌陷

不浮动的元素被浮动元素覆盖

常见触发条件

独立布局，设置后不会被其他元素影响

overflow: hidden

display: flex | inline-block | table-cell

position: absolute | fixed

文档流

顺序依次布局+块级/行内特性

脱离正常文档流：`absolute，`fixed，float

创建BFC独立渲染区：`absolute，`float

相对于父容器居中

水平居中

块元素margin：auto

行内元素->block+margin：auto

文本text-align=center（除了p）

水平垂直居中

transform:translate(-50%)+top+left: 50%;

flex:align-items/justify-content:center

响应式布局⭐⭐

flex弹性布局

百分比单位

HTML5+CSS3自用笔记

助解：解析编译，加载运行浏览器的渲染过程 JS加载执行普通js/sync：阻塞 DOM加载解析 async：下载完就执行，无依赖 <script type"text/javascript" src"x.min.js" async"async"&g…...

编程日记 2023/8/18 19:29:04

无则插入有则更新(PostgreSQL，MySQL，Oracle、SqlServer)

无则插入有则更新 PostgreSQL 无则插入有则更新 conflict(带有唯一性约束的字段)，根据此字段判断是更新还是插入 INSERT INTO student(id,name,sex) VALUES(1, 小明, 男) ON conflict (id) DO UPDATE SET id 1,name 小明,sex 男;无则插入有则不做操作 INSERT I…...

编程日记 2023/8/18 19:28:03

常见的 JavaScript 框架比较

以下是10种常见的JavaScript框架的比较： React：是由Facebook开发和维护的开源JavaScript库，用于构建用户界面。它允许你使用组件来构建复杂的UI，并专注于每个组件的内部逻辑，而不必担心管理整个应用程序的状态。WebBu…...

编程日记 2023/8/18 19:27:02

基于R语言APSIM模型进阶应用与参数优化、批量模拟

随着数字农业和智慧农业的发展，基于过程的农业生产系统模型在模拟作物对气候变化的响应与适应、农田管理优化、作物品种和株型筛选、农田固碳和温室气体排放等领域扮演着越来越重要的作用。APSIM (Agricultural Production Systems sIMulator)模型是世界知名的作物生…...

编程日记 2023/8/18 19:26:00

AMD卡启动Stable Diffusion AI绘画的方法

WindowsAMD安装法 1.安装python 3.10.6，在python官网上下载安装程序，***重要*** 在安装的第一个窗口下方勾选“将python添加到path”。 2.安装git 3.WindowsAMD使用AUTOMATIC1111的directml这一个fork，在这个页面的第一段：https:/…...

编程日记 2023/8/18 19:24:59

Ubuntu系统kubeadm安装K8S_v1.25.x容器使用docker(K8S_v1.24版本以后依然使用docker容器管理)

安装所需要的全部文档请点击这里下载系统是： root@k8s-master:~# cat /etc/lsb-release DISTRIB_ID=Ubuntu DISTRIB_RELEASE=22.04 DISTRIB_CODENAME=jammy DISTRIB_DESCRIPTION=“Ubuntu 22.04.3 LTS” root@k8s-master:~# uname -a Linux k8s-master 5.15.0-76-generic #8…...

编程日记 2023/8/18 19:23:58

【MaxKey对接一】对接gitlab的oauth登录

MaxKey的Oauth过程引导进入 GET http://{{maxKey_host}}/sign/authz/oauth/v20/authorize?client_idYOUR_CLIENT_ID&response_typecode&redirect_uriYOUR_REGISTERED_REDIRECT_URI 登录后回调地址 YOUR_REGISTERED_REDIRECT_URI/?code{{code}} 换取Access Token GET…...

编程日记 2023/8/18 19:22:57

【Buildroot】构建根文件系统等

文章目录 0. 前言10. 环境软件硬件 20. Buildroot 环境搭建简述下载环境搭建toolchain下载、安装构建镜像（仅供参考） 80. 问题点1. 编译、清除时提示权限不足 0. 前言对嵌入式linux开发和linux开发环境不熟悉的同志们就不要往下看了对嵌入式linux开发和…...

编程日记 2023/8/18 19:21:56

利用css动画和定时器setTimeout，实现上传图片进度条

思路利用css动画和js定时器（setTimeout），实现简单的进度条。优势不使用 setInterval，减少js代码量，业务代码更加简洁。示意图上传中上传成功上传失败代码 html <!-- img-wrap有两种状态：u…...

编程日记 2023/8/18 19:20:55

关于VScode插件，你不得不知道的几件事

一、前言 VSCode是微软家一个非常轻量化的编辑器，体量虽轻，但是却有异常强大的功能。原因在于VSCode许多强大功能都是基于插件实现的，IDE只提供一个最基本的框架和基本功能，我们需要使用插件来丰富和扩展它的功能。由于插件的重…...

编程日记 2023/8/18 19:19:50

MySQL 奇遇记三则

公司新项目，要使用 MySQL 数据库。第一次使用 MySQL，有点小激动。听说过 N 多次，这一次终于用上了。为什么是奇遇记？ 因为在网上几乎搜索不到别人遇到和我一样的问题。系统 ：WINDOWS10X64 中文版数据库&#xf…...

编程日记 2023/8/18 19:18:45

UI设计师的主要职责说明（合集）

UI设计师的主要职责说明1 职责： 1、负责公司移动端、PC端产品相关的交互、UI等设计 2、负责公司宣传册、海报、运营物料、banner等设计 3、负责公司品牌相关的视觉设计 3、制定相关设计规范，提高产品的可用性、不断优化产品体验; 4、与PM、运营紧密…...

编程日记 2023/8/18 19:17:42

SOLIDWORKS 2023中装配体配合的正确使用方法硕迪科技

-SOLIDWORKS 装配体打开时是由不同的阶段和性能检查组成的。如果在创建装配体时未应用基本的配合方法，问题会随着时间的推移而累积，并且在使用时会出现明显的速度减慢。如果您的装配体运行速度很慢，则很可能是在创建配合时出现了不良操作的症…...

编程日记 2023/8/18 19:16:36

代码随想录——96.不同的二叉搜索树

class Solution {public int numTrees(int n) {int[] dp new int[n1];dp[0] 1;dp[1] 1;for(int i 2;i < n ; i){for(int j 1; j < i;j){dp[i] dp[j-1]*dp[i-j];}}return dp[n];} }...

编程日记 2023/8/18 19:15:35

智安网络|零信任安全框架：保障数字化时代网络安全的最佳实践

随着数字化时代的快速发展，网络安全问题变得越来越突出。传统的安全防御模式已经不再适用于现代复杂的网络环境中。为了应对日益增长的网络威胁，零信任安全模式应运而生。一、什么是零信任？ 零信任是一种安全框架和哲学，它基于…...

编程日记 2023/8/18 19:14:34

Rancher管理K8S

1 介绍 Rancher是一个开源的企业级多集群Kubernetes管理平台，实现了Kubernetes集群在混合云本地数据中心的集中部署与管理，以确保集群的安全性，加速企业数字化转型。Rancher 1.0版本在2016年就已发布，时至今日，Ranche…...

编程日记 2023/8/18 19:13:32

【Linux】一切皆文件

Linux 下一切皆为文件， 文件包括头文件，库文件（静态库和共享库），可执行文件，目录文件，软链接文件，配置文件等。每个文件都依据权限分为用户、用户组和其他人三个身份，…...

编程日记 2023/8/18 19:12:32

C++学习笔记4

什么是指针？ 指针是存储内存地址的变量。就像int变量用于存储整数值一样，指针变量用于存储内存地址。指针是一种指向内存单元的特殊变量。内存单元地址通常使用的是16进制表示（0～9和A～F）来表示数字。显示…...

编程日记 2023/8/18 19:11:30

x11 gtk qt gnome kde 之间的区别和联系

Linux 下的图形库介绍一、Linux 图形领域的基础设施 1.1 X Window X Window从逻辑上分为三层：X Server、X Client和X协议。最底层的X Server（X服务器）主要处理输入/输出信息并维护相关资源，它接受来自键盘、鼠标的操作并将…...

编程日记 2023/8/18 19:10:29

MAC访问MySQL下的data目录

1.查看创建表存储路径 show variables like datadir 2.快捷键comshiftG，输入查询到的地址 3.终端输入 sudo chmod -R arwx /usr/local/mysql/data 然后输入密码即可...

编程日记 2023/8/18 19:09:27

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展：显示创建时间8. 功能扩展：记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/6/15 12:05:47

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...

编程新知 2025/6/17 14:49:12

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时，需结合业务场景设计数据流转链路，重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点： 一、核心对接场景与目标商品数据同步场景：将1688商品信息…...

编程新知 2025/7/7 4:15:57

【AI学习】三、AI算法中的向量

在人工智能（AI）算法中，向量（Vector）是一种将现实世界中的数据（如图像、文本、音频等）转化为计算机可处理的数值型特征表示的工具。它是连接人类认知（如语义、视觉特征）与…...

编程新知 2025/7/4 5:47:52

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/6/24 5:44:40

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...

编程新知 2025/6/17 4:01:05

Linux --进程控制

本文从以下五个方面来初步认识进程控制： 目录进程创建进程终止进程等待进程替换模拟实现一个微型shell 进程创建在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程，创建出来的进程就是子进程，原来的进程为父进程。…...

编程新知 2025/7/7 7:10:35

【Go语言基础【12】】指针：声明、取地址、解引用

文章目录零、概述：指针 vs. 引用（类比其他语言）一、指针基础概念二、指针声明与初始化三、指针操作符1. &：取地址（拿到内存地址）2. *：解引用（拿到值） 四、空指针&am…...

编程新知 2025/6/21 2:18:57

人工智能--安全大模型训练计划：基于Fine-tuning + LLM Agent

安全大模型训练计划：基于Fine-tuning LLM Agent 1. 构建高质量安全数据集目标：为安全大模型创建高质量、去偏、符合伦理的训练数据集，涵盖安全相关任务（如有害内容检测、隐私保护、道德推理等）。 1.1 数据收集描…...

编程新知 2025/6/22 5:40:16

【前端异常】JavaScript错误处理：分析 Uncaught (in promise) error

在前端开发中，JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作（如 Promise、async/await 等），开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝（r…...

编程新知 2025/7/6 8:20:01

浏览器的渲染过程

JS加载+执行

普通js/sync：阻塞 DOM加载+解析

async：下载完就执行，无依赖

defer：渲染完再执行，依赖

CSS 、JS 阻塞 DOM 解析和渲染

css不阻止dom的解析

js阻止dom的解析

css js都会阻止dom的渲染

猜测预加载

优先级（高->低）

样式表

内联样式表<style="...">

嵌入样式表<style type="text/css">p{...}</style>

外部样式表<link type="text/css" href="xxx.css" rel="stylesheet" />

选择器(权值)：层级越深的优先级越高

!important （会覆盖CSS的任何声明，其实与优先级毫无关系）

内联样式（1000）：style

ID 选择器（100）：#

类、属性、伪类选择器、特殊符号选择器（10）： .classname、[attribute]、:hover 、ul li

属性选择器：[attribute^$*=value]

伪类选择器：:hover/active/nth-child(even)/first-child/last-child

特殊符号选择器

子元素选择器：ul li

直接子元素选择器：h1>son

兄弟选择器：h1~bros

相邻兄弟选择器：h1+bro

群组选择器：h1,h2 同时选择

元素/HTML标签、伪元素选择器（1）： div、::before

通用选择器（0）：*

查询选择器：document/元素.querySelector /querySelectorAll

盒模型：width=

class="content-box"内容盒模型（W3C盒）

class="border-box"边框盒模型（IE 盒）

单位⭐⭐⭐

绝对长度单位：px 像素

相对长度单位：% 父元素

字体：em/rem（默认16px）根元素

视窗：vw，vh

​​​​​​​​​​​​​​position关键字⭐⭐⭐

static（默认）：无相对（top, right, bottom, left , z-index无效

absolute，fixed，relative：相对 static 外的第一个父元素，视窗，正常位置

float：沿其容器的水平方向，允许文本和内联元素环绕它。sticky(CSS3新增) ：屏幕滚出时会粘住

inherit

overflow​​​​​​​：溢出padding

visible（默认）：超出可见

hidden：可scrollTo()滚动

clip：禁止所有滚动

scroll：无论是否超出都显示滚动条

auto：超出才显示滚动条

flex布局

容器属性

flex-direction：row（默认）/column(-reverse)

flex-wrap: nowrap（默认） | wrap | wrap-reverse

flex-flow=flex-direction flex-wrap

justify-content：flex-start（默认）/end、center、space-between/around/evenly

align-items：flex-start/end、center、stretch（默认）、baseline(center，text在交叉轴​​​​​​​)

align-content:多根主轴，以交叉轴为对齐 flex-start |end | center | space-between | around | stretch（默认）

项目属性

flex-grow： 默认0，若存在剩余空间

flex-shrink ：默认为1，若空间不足

flex-basis：默认auto（计算main axis size）和width/height同单位

flex：默认1=flex-grow:0, flex-shrink:1 ,flex-basis:auto

auto (1 1 auto) ，none (0 0 auto)

align-self

display:inline、block、inline-block⭐⭐⭐​​​​​​​

HTML 标签分类

文本级标签：p（段落）、span、a（超链接）、b（粗体）、i（斜体）、u（下划线）

容器级标签：div、h系列、ul、li

行显示标签分类

行内元素：文本级标签（除了p）

宽、高不可设置，由内容决定

可替换元素：img、input、textarea文本域 可设置宽高，

设置float后脱离了文档流，可以设置宽、高

对 margin 仅设置左右方向有效，上下无效

padding 设置上下左右都有效

块级元素：容器级标签+p

特征：独占一行，换行显示，可以设置宽高，可以嵌套块和行

BFC规范

问题

ID 选择器（100）：`#`

类、属性、伪类选择器、特殊符号选择器（10）： `.classname`、`[attribute]`、`:hover` 、ul li

属性选择器：`[attribute^$*=value]`

元素/HTML标签、伪元素选择器（1）： `div`、`::before`

通用选择器（0）：`*`

查询选择器：document/元素.`querySelector` /`querySelectorAll`

position关键字⭐⭐⭐

`static（默认）：无相对`（`top`, `right`, `bottom`, `left` , `z-index无效`

`absolute，`fixed，`relative：`相对 static 外的第一个父元素，视窗，正常位置

overflow：溢出padding

`visible（默认）：超出可见`

`hidden：可scrollTo()滚动`

`clip：禁止所有滚动`

`scroll：无论是否超出都显示滚动条`

`auto`：超出才显示滚动条

align-items：flex-start/end、center、stretch（默认）、baseline(center，text在交叉轴)

flex-grow：默认0，若存在剩余空间

`auto` (`1 1 auto`) ，none (`0 0 auto`)

display:inline、block、inline-block⭐⭐⭐

可替换元素：img、input、textarea文本域可设置宽高，

脱离正常文档流：`absolute，`fixed，float

创建BFC独立渲染区：`absolute，`float