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

HTML5+CSS3自用笔记

news 2025/9/17 5:21:27

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

浏览器的渲染过程

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

springboot 百货中心供应链管理系统小程序

一、前言随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，百货中心供应链管理系统被用户普遍使用，为方…...

编程新知 2025/9/16 1:39:16

ES6从入门到精通：前言

ES6简介 ES6（ECMAScript 2015）是JavaScript语言的重大更新，引入了许多新特性，包括语法糖、新数据类型、模块化支持等，显著提升了开发效率和代码可维护性。核心知识点概览变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

云计算——弹性云计算器（ECS）

弹性云服务器：ECS 概述云计算重构了ICT系统，云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台，包含如下主要概念。 ECS（Elastic Cloud Server）：即弹性云服务器，是云计算…...

编程新知 2025/8/16 21:50:27

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 ）⽤户级环境变量与系统级环境变量全局属性：环境变量具有全局属性，会被⼦进程继承。例如当bash启动⼦进程时，环境变量会⾃动传递给⼦进程。本地变量限制：本地变量只在当前进程(ba…...

编程新知 2025/7/9 17:20:48

基础测试工具使用经验

背景 vtune，perf, nsight system等基础测试工具，都是用过的，但是没有记录，都逐渐忘了。所以写这篇博客总结记录一下，只要以后发现新的用法，就记得来编辑补充一下 perf 比较基础的用法： 先改这…...

编程新知 2025/8/25 23:10:09

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2025/7/22 6:12:57

Spring Boot面试题精选汇总

🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/7/21 4:41:44

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。它们中的大多数将生成纯 CSS 代码，而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库，可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画，可以包含在你的网页或应用项目中。 3.An…...

编程新知 2025/9/2 17:48:09

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存：一级缓存、二级缓存默认情况下，只有一级缓存开启（sqlSession级别的缓存）二级缓存需要手动开启配置，需要局域namespace级别的缓存一级缓存（本地缓存&#…...

编程新知 2025/9/9 10:08:24

数据结构：递归的种类（Types of Recursion）

目录尾递归（Tail Recursion） 什么是 Loop（循环）？ 复杂度分析头递归（Head Recursion） 树形递归（Tree Recursion） 线性递归（Linear Recursion）…...

编程新知 2025/9/7 8:48:11

浏览器的渲染过程

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