HTML+CSS知识点标签语义化根据内容的结构选择合适的标签增加代码的可读性，结构清晰，有利于开发和维护有利于SE

标签语义化

根据内容的结构选择合适的标签
增加代码的可读性，结构清晰，有利于开发和维护
有利于SEO ，搜索引擎能更好地抓取和理解网页内容。
即使在没有CSS的情况下也可以呈现容易阅读的内容结构

header footer main aside article section

DOCTYPE 的作⽤是什么？

告知浏览器的解析器⽤什么⽂档标准解析这个⽂档

HTML基础-data-开头的元素属性是什么

在标签上添加一些数据

允许开发者在 HTML 元素上存储额外的自定义数据，以便在 JavaScript 中进行访问和操作

h5的新内容

语法更加标准 html5 一套标准
新增语义化标签，功能性标签：header main footre nav aside section video
新增input type属性日历，email 自带表单校验
新增全域属性可编辑和可拖拽
新增一些api

⾏内元素有哪些？块级元素有哪些？空(void)元素有那些？

⾏内元素有： a b span img input select strong button label textarea
块级元素有： div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p ；
空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：
常⻅的有： <br 、 <hr 、 <img 、 <input 、 <link、 <meta ；

script标签中defer和async的区别

使用 async 属性。当 async 属性添加到 <script> 标签时，脚本会异步加载，并在加载完成后立即执行，不会阻塞页面的渲染。适用于不依赖其他脚本或页面内容的独立脚本，但多个 JS 文件时无法保证加载和执行顺序。
使用 defer 属性。defer 属性使得脚本延迟执行，直到 HTML 文档解析完毕。这意味着脚本不会阻塞 HTML 渲染，且会按照文档中 <script> 标签的顺序执行。适用于依赖 DOM 元素的脚本（如操作页面内容）
都是异步加载文件，都不会阻塞页面渲染，一个按照脚本顺序，一个不按照脚本顺序。不同点是： defer的加载完成之后，JS会等待整个⻚⾯全部加载完成了再执⾏，⽽带async属性的JS是加载完成之后，会⻢上执⾏

meta 标签是干什么的，都有什么属性和作用

HTML 中的 <meta> 标签用于提供页面的元信息，这些信息不会直接显示在网页内容中，但对浏览器、搜索引擎和其他服务非常重要。

常见的 meta 信息如下：

字符编码。指定网页的字符编码，确保正确显示内容。

<meta charset="UTF-8" />

2. 页面视口设置（响应式设计）。控制页面在移动设备上的显示和缩放行为。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

width=device-width：页面宽度匹配设备屏幕宽度
initial-scale=1.0：初始缩放比例为 1

搜索引擎优化（SEO）。提供描述性信息，便于搜索引擎索引。

<meta
  name="keywords"
  content="前端, 面试, 前端面试, 面试题, 刷题, 面试流程, 前端面试流程, 面试准备, 简历, 前端简历, Javascript, Typescript, React, Vue, webpack, vite, HTTP, 算法"
/>
<meta name="description" content="面试派，双越老师整理的前端面试真实流程，大厂面试规范，开源免费" />
<meta name="robots" content="index, follow" />

4. 作者信息。提供网页作者信息。

<meta name="author" content="双越老师" />

src和href的区别

src：主要用于引入外部资源到当前文档，并且会替换当前元素的内容。当浏览器解析到带有 src 属性的标签时，会暂停对当前文档的解析，转而请求 src 所指向的资源，直到资源加载完成后才会继续解析后续的文档内容。
href：超文本引用，主要用于建立当前文档与外部资源之间的关联。浏览器在解析到带有 href 属性的标签时，不会暂停对当前文档的解析，而是并行地请求 href 所指向的资源。

`src` 的使用场景

图片引入：使用 <img> 标签引入图片时，src 属性指定图片的路径。

<img src="example.jpg" alt="示例图片">

脚本引入：使用 <script> 标签引入 JavaScript 脚本时，src 属性指定脚本文件的路径。

<script src="script.js"></script>

内联框架引入：使用 <iframe> 标签引入内联框架时，src 属性指定要嵌入的页面的 URL。

<iframe src="https://www.example.com"></iframe>

`href` 的使用场景

超链接：使用 <a> 标签创建超链接时，href 属性指定链接的目标地址。

<a href="https://www.example.com">访问示例网站</a>

样式表引入：使用 <link> 标签引入外部 CSS 样式表时，href 属性指定样式表文件的路径。

<link rel="stylesheet" href="styles.css">

对页面加载的影响
src：由于 src 会让浏览器暂停解析当前文档去加载资源，所以大量使用 src 引入资源可能会影响页面的加载速度。尤其是在引入较大的图片或脚本时，页面可能会出现明显的卡顿。
href：href 不会阻塞文档的解析，浏览器会并行地加载 href 指向的资源，因此对页面的加载速度影响较小

src 用于引入需要替换当前元素内容的外部资源，会阻塞文档解析；而 href 用于建立文档与外部资源的关联，不会阻塞文档解析

link和@import引⼊css 区别

link：它是 HTML 标签，需放在 HTML 文件的 <head> 部分。

<link rel="stylesheet" href="styles.css">

@import：这是 CSS 规则，既可以放在 CSS 文件里，也能放在 HTML 文件的 <style> 标签内。

    <style>
        @import url('styles.css');
    </style>

加载顺序

link：属于 HTML 标签，在页面加载时，会与 HTML 页面的其他资源（如图片、脚本等）并行加载，不会阻塞页面的其他资源加载。兼容性更好
@import：在 CSS 文件中使用时，会等到 CSS 文件被解析时才去加载引入的 CSS 文件，这意味着如果在 @import 之前有大量的 CSS 代码，那么引入的 CSS 文件加载会延迟，可能导致页面出现短暂的无样式状态。兼容性一般。

px，rem，vh，vw区别，rem怎么换算的，知道vmin、vmax

Px 像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的。绝对单位

Rem 相对单位相对根标签字体大小html（响应式布局设计，屏幕大小改变时改变根元素的字体大小即可）

Em 相对单位相对当前元素字体大小。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值

Vh vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。相对单位视口宽度或高度

Vmin 最小值

Vmax 最大值

css优先级

/* 后代选择器：选择 <div> 元素内的所有 <p> 元素 */
div p {
    color: pink;
}

/* 子选择器：选择 <div> 元素的直接子元素 <p> */
div > p {
    font - style: italic;
}

/* 相邻兄弟选择器：选择紧跟在 <h2> 元素后面的 <p> 元素 */
h2 + p {
    text - decoration: underline;
}

/* 通用兄弟选择器：选择 <h2> 元素后面的所有兄弟 <p> 元素 */
h2 ~ p {
    background - color: lightgray;
}

后代选择器 (空格)

⼦选择器 (>)

相邻兄弟选择器 (+)

通⽤兄弟选择器 (~)

!important >内联样式 > id选择题 > 类选择器 > 标签选择器 >通配符选择器
相同的选择器后面写的覆盖前面写的 style 里面
权重计算累加
内联样式 1000 id选择题 100 类选择器 10 标签/伪元素选择器 1 通配符选择器 > + 0
class = “gre red yellow blue” 这个选择权的权重还是10 .gre,.red,.yellow,.blue

伪类与伪元素的区别有：

定义不同：伪类选特定状态元素；伪元素选元素特定部分。
语法不同：伪类用单冒号 :；伪元素 CSS3 建议用双冒号 ::。
数量限制：一个选择器中可多个伪类组合；通常只用一个伪元素。
对文档树影响：伪类不创建新元素；伪元素创建虚拟元素。

css中隐藏元素的方法

1. `display: none`

特点：元素不可见，不占据空间，无法响应点击事件。会触发回流

2. `visibility: hidden`

不会触发重排，但是会触发重绘。特点：元素不可见，占据页面空间，无法响应点击事件

3. `opacity: 0`

不会引发重排，一般情况下也会引发重绘特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件

4. `position` 属性结合 `top`、`left` 等偏移量

position 属性设置为 absolute 或 fixed，然后将其偏移到屏幕外，从而达到隐藏元素的目的。元素仍然存在于文档流中，但在视觉上不可见。 元素不可见，不影响页面布局

5. `width: 0; height: 0; overflow: hidden`

元素不可见，不占据页面空间，无法响应点击事件

最常用的还是display:none和visibility:hidden

响应式布局

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport。

<meta> 标签中的 viewport 声明是用于控制网页在移动设备上的显示方式。它允许开发者定义视口的宽度、初始缩放比例、是否允许用户缩放等属性，以确保网页在不同尺寸的移动设备屏幕上能够正确显示和布局

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

属性对应如下：

width=device-width: 是自适应手机屏幕的尺寸宽度
maximum-scale:是缩放比例的最大值
inital-scale:是缩放的初始化
user-scalable:是用户的可以缩放的操作

rem单位都是相对于根元素html的font-size来决定⼤⼩的,根元素的font-size相当于提供了⼀个基准，当⻚⾯的size发⽣变化时，只需要改变font-size的值，那么以rem为固定单位的元素的⼤⼩也会发⽣响应的变化。因此，如果通过rem来实现响应式的布局，只需要根据视图容器的⼤⼩，动态的改变font-size即可（⽽em是相对于⽗元素的）。

使用媒体查询（Media Queries）。媒体查询是响应式布局的核心技术，通过检测设备的宽度、高度、分辨率等条件应用不同的样式。可根据屏幕宽度调整字体大小、布局样式等。

/* 默认样式 */
body {
  font-size: 16px;
  padding: 20px;
}

/* 屏幕宽度小于等于768px时的样式 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
    padding: 10px;
  }
}

/* 屏幕宽度大于1200px时的样式 */
@media (min-width: 1200px) {
  body {
    font-size: 18px;
    padding: 30px;
  }
}

BFC

块级格式化上下文，是一块独立的渲染区域。将bfc内部和外部隔离开。内部元素怎么做，都不会影响到外部元素。bfc内部有自己的渲染规则。规定了内部的块级元素如何布局

应用：

清除浮动
处理magin合并
处理margin塌陷
实现两栏布局

BFC 可以解决的问题

清除浮动：解决浮动元素导致的父元素高度塌陷问题。当父元素包含浮动子元素时，父元素开启 BFC 后会包含浮动子元素，从而正常显示高度。
防止 margin 重叠：处于不同 BFC 中的元素不会发生 margin 合并。
自适应两栏布局：一侧宽度固定，另一侧自适应宽度的布局可以通过 BFC 实现。

margin 合并是什么

margin 合并（也称为 margin 塌陷）是指在垂直方向上，两个或多个相邻元素的 margin 相遇时，它们会合并成一个 margin，合并后的 margin 大小是这些 margin 中的最大值，而不是它们的总和。

防止margin重叠（塌陷）

相邻兄弟元素：相邻的兄弟元素的垂直 margin 会合并 父子元素：如果父元素没有 border、padding、inline content 或 clearfix 来分隔时，子元素的 margin 会和父元素的 margin 合并。

通过将相邻元素或父子元素分别放在不同的 BFC 中，可以避免 margin 合并。例如，对于父子元素 margin 合并问题，可以让父元素开启 BFC：对于相邻兄弟元素，也可以将其中一个元素放在一个开启 BFC 的容器中，避免它们的 margin 合并。

高度塌陷

高度塌陷通常是由于父元素包含浮动子元素，而浮动元素脱离了正常文档流，导致父元素无法感知浮动子元素的高度，进而使父元素高度塌陷为 0。BFC（块级格式化上下文）可以用来处理高度塌陷问题，下面为你详细介绍相关原理、实现方式和示例代码。

原理

BFC 有一个重要特性，即会包含其内部的浮动元素。当父元素创建了 BFC 后，它会将浮动的子元素包含在内，从而使父元素能够正常计算高度，避免高度塌陷。

兄弟浮动：第一个浮动，第二个正常（对正常的开启bfc，就不会被浮动元素覆盖）

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <p>Hehe</p >
</body>

两个p元素之间的距离为100px，发生了margin重叠（塌陷），以最大的为准，如果第一个P的margin为80的话，两个P之间的距离还是100，以最大的为准。

同一个BFC的俩个相邻的盒子的margin会发生重叠

可以在p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC，则不会出现margin重叠

<style>
    .wrap {
        overflow: hidden;// 新的BFC
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <div class="wrap">
        <p>Hehe</p >
    </div>
</body>

清除内部浮动

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

而BFC在计算高度时，浮动元素也会参与，所以我们可以触发.par元素生成BFC，则内部浮动元素计算高度时候也会计算

.par {
    overflow: hidden;
}

自适应多栏布局

这里举个两栏的布局

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

前面讲到，每个元素的左外边距与包含块的左边界相接触

因此，虽然.aslide为浮动元素，但是main的左边依然会与包含块的左边相接触

而BFC的区域不会与浮动盒子重叠

所以我们可以通过触发main生成BFC，以此适应两栏布局

.main {
    overflow: hidden;
}

这时候，新的BFC不会与浮动的.aside元素重叠。因此会根据包含块的宽度，和.aside的宽度，自动变窄

可以看到上面几个案例，都体现了BFC实际就是页面一个独立的容器，里面的子元素不影响外面的元素

dispaly有哪些值？

display：none 不显示隐藏元素不显示，会从⽂档流中移除
block：显示为块级元素
inline：默认。将元素显示为内联元素。默认！！！⾏内元素类型。默认宽度为内容宽度，不可设置宽⾼，同⾏显示，可设置内外边距，但只对左右起作⽤，只能容纳⽂本或其他⾏内元素。
inline-block：行内块元素

清除浮动

在网页布局中，浮动元素会脱离文档流，这可能导致父元素无法自动适应其高度，进而破坏页面布局

父元素触发bfc；overflow:hidden 或者 overflow:auto
最后⼀个浮动元素之后添加⼀个空的div标签，并添加 clear:both 样式（在父元素的内部）
通过给父元素添加伪元素，并设置其clear属性来清除浮动创建伪元素：after : before ul：after { content:'' display:block; clear：both }

Margin 重叠

Margin 重叠是指在某些情况下，两个或更多相邻元素的外边距（margin）可能会合并成⼀个较⼤的外边距，⽽不是简单地相加。这种现象可能会在垂直⽅向上发⽣，导致元素之间的间距⽐预期的要⼤。

Margin 重叠是由 CSS 规范定义的⾏为，通常会在以下情况下发⽣：

相邻兄弟元素重叠：
⽗元素与第⼀个/最后⼀个⼦元素重叠

使⽤内边距（padding）来代替外边距，避免元素之间直接相邻。
使⽤ overflow: hidden; 或 overflow: auto;
触发 BFC（块级格式化上下⽂），从⽽阻⽌Margin 重叠。
使⽤空的或透明的边框来分隔相邻元素，以阻⽌ Margin 重叠。

有几种定位

static 默认没有定位
static时，该元素会按照文档流的顺序进行布局，也就是元素会依次从左到右、从上到下排列。采用static定位的元素不会受到top、bottom、left、right和z-index这些定位属性的影响。
fixed 固定定位根据可视区定位相对于浏览器窗口定位
relative 相对定位相对于自身定位，不脱离文档流
absolute 绝对定位相对于第一个有relative 的父元素，脱离文档流
relative如果同时有 top left right bottom 最后只有 left top （分开写都可以有）
absolute如果有 top left right bottom 最后都有 top left right bottom

如何实现垂直水平居中，至少说4种****

利用定位+margin:auto 四个定位属性的值都设置了0 子绝父相对
利用定位+margin:负值子元素移动自身50% （子元素宽高已知）
利用定位+transform 子元素移动自身50%
（不需要已知宽高） Top left 50% transform ：translate -50% -50%

2. 偏移+margin 负值（子绝父相对）（盒子宽高已知）

Top left 50%

margin-top: -50px; （自己高度的一半）

margin-left: -50px;

3. 上下左右 0 margin auto （子绝父相对）

4. Flex布局父 dispaly ：flex align-items:center justify-content:center

5. 行内块元素行高设置为盒子高度 display：inline-block

行内元素可设置：text-align: center
单行文本父元素确认高度：height === line-height

上述方法中，不知道元素宽高大小仍能实现水平垂直居中的方法有：

利用定位+margin:auto
利用定位+transform
flex布局
grid布局

实现两栏布局

实现两栏布局：自适应布局

左边浮动右边BFC
flex布局，将左固定宽度右flex:1

三栏布局左右定宽中间自适应先加载中间

两边使用 float，中间使用 margin（一个左浮动，一个都浮动）

需要将中间的内容放在html结构最后

<style>
    .wrap {
        background: #eee;
        overflow: hidden; <!-- 生成BFC，计算高度时考虑浮动的元素 -->
        padding: 20px;
        height: 200px;
    }
    .left {
        width: 200px;
        height: 200px;
        float: left;
        background: coral;
    }
    .right {
        width: 120px;
        height: 200px;
        float: right;
        background: lightblue;
    }
    .middle {
        margin-left: 220px;
        height: 200px;
        background: lightpink;
        margin-right: 140px;
    }
</style>
<div class="wrap">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
    <div class="middle">中间</div>
</div>

原理如下：

两边固定宽度，中间宽度自适应。
利用中间元素的margin值控制两边的间距
宽度小于左右部分宽度之和时，右侧部分会被挤下去
这种实现方式存在缺陷：
主体内容是最后加载的

双飞翼布局： float左浮动和负 margin

    <style>
        .container > div {
            float: left;  //加浮动
        }
        .c {
            width: 100%;
            height: 200px;
            background-color: aqua;
        }
        .l{
            width: 200px;
            height: 200px;
            background-color:bisque;
            margin-left: -100%;    //margin 负值
        
        }
        .r{
            width: 300px;
            height: 200px;
            background-color:blue;
            margin-left: -300px;
        }

    <div class="container">
        <div class="c"></div>
        <div class="l"></div>
        <div class="r"></div>
    </div>

外层是浮动的，以便左中右能在同一行展示
左边通过使用负 margin-left:-100%，相当于中间的宽度，所以向上偏移到左侧
右边通过使用负 margin-left:-100px，相当于自身宽度，所以向上偏移到最右侧

利⽤flex布局，左右两栏设置固定⼤⼩，中间⼀栏设置为flex:1。

五栏布局，中间的高度自适应，头部和底部给了固定高度

使用flex布局，主轴方向向下。上中下，中间flex 1 实现高度自适应中间：flex布局两边定宽，中间flex：1 两层flex布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three Column Layout with Flexbox</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
        }

        .container {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        .header {
            height: 60px;
            background-color: #333;
            color: white;
            text-align: center;
            line-height: 60px;
        }

        .main {
            flex: 1;
            display: flex;
        }

        .left-column,
        .right-column {
            width: 20%;
            border: 1px solid #ccc;
            padding: 10px;
        }

        .middle-column {
            flex: 1;
            border: 1px solid #ccc;
            padding: 10px;
        }

        .footer {
            height: 40px;
            background-color: #333;
            color: white;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">这是头部</div>
        <div class="main">
            <div class="left-column">左侧栏内容</div>
            <div class="middle-column">中间栏内容</div>
            <div class="right-column">右侧栏内容</div>
        </div>
        <div class="footer">这是底部</div>
    </div>
</body>

</html>

用css画三角形

用边框去画border+透明度左不透明其余的都透明或者其他

border width : 0 height : 0 三边 transparent

 div{
        width: 100px;
        height: 100px;
        background-color: #ccc;
    border-left:100px solid #ccc   //solid 表示 实线
    border-right:100px solid transformed
    border-top:100px solid transformed
    border-right:100px solid transformed  //表示 透明的
    }
    形状如下
    1 
    1 1 1
    1

css reset 是什么

reset.css 是一个css文件，用来重置css样式

css sprite

是精灵图/雪碧图，把多个小图标合并成一个大图片，为了减少网络请求的次数，提升性能缺点是维护比较差一改都改（图片位置进行修改或者内容宽高都需要修改）

弹性布局

目的：更方便的对容器中的子元素进行排列，适应不同的屏幕大小和设备的变化。
概念：

容器：包含子元素的元素，容器的属性会印象子元素；
弹性项，容器内的子元素，根据容器的属性进行排列
主轴和交叉轴：每个弹性容器都有一个主轴和交叉轴，主轴通常是水平/垂直方向

⽤在⽗元素（Flex 容器）上的属性：

display: flex;：将元素设置为 Flex 容器，使其内部⼦元素成为 Flex 项⽬。
flex-direction：决定 Flex 项⽬在容器内的排列⽅向。属性值：row row-reverse column
justify-content：控制 Flex 项⽬在主轴⽅向上的对⻬⽅式。

属性值：flex-start 从左到右
center 水平居中
flex-end 从右到左
space around 环绕对其
space-bettwen 两段对齐

align-items：控制 Flex 项⽬在交叉轴⽅向上的对⻬⽅式。stretch 拉伸对齐
align-content：在存在多⾏ Flex 项⽬的情况下，控制各⾏在交叉轴⽅向上的对⻬⽅式。定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
flex-wrap：决定 Flex 项⽬是否可以换⾏以及如何换⾏。wrap no-wrap （默认不换行，空间不够会缩小）
flex-flow：flex-direction 和 flex-wrap 的缩写形式。

⽤在⼦元素（Flex 项⽬）上的属性

容器成员属性如下：

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order

定义项目的排列顺序。数值越小，排列越靠前，默认为0

flex-grow

上面讲到当容器设为flex-wrap: nowrap;不换行的时候，容器宽度有不够分的情况，弹性元素会根据flex-grow来决定定义项目的放大比例（容器宽度>元素总宽度时如何伸展）

默认为0，即如果存在剩余空间，也不放大

.item {
    flex-grow: <number>;
}

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）

如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

弹性容器的宽度正好等于元素宽度总和，无多余宽度，此时无论flex-grow是什么值都不会生效

flex-shrink

定义了项目的缩小比例（容器宽度<元素总宽度时如何收缩），默认为1，即如果空间不足，该项目将缩小

.item {
    flex-shrink: <number>; /* default 1 */
}

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

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

在容器宽度有剩余时，flex-shrink也是不会生效的

flex-basis

设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸

浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目的本来大小，如设置了width则元素尺寸由width/height决定（主轴方向），没有设置则由内容决定

.item {
   flex-basis: <length> | auto; /* default auto */
}

当设置为0的是，会根据内容撑开

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，也是比较难懂的一个复合属性

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

一些属性有：

flex: 1 = flex: 1 1 0%
flex: 2 = flex: 2 1 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto，常用于固定尺寸不伸缩

flex:1 和 flex:auto 的区别，可以归结于flex-basis:0和flex-basis:auto的区别

当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸

当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑

注意：建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

grid布局

二维布局，允许在水平和垂直方向上同时控制元素的位置和大小 display:grid

CSS动画

CSS动画指元素从一种样式逐渐过渡为另一种样式的过程.

常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合

css实现动画的方式，有如下几种：

transition 实现渐变动画
transform 转变动画
animation 实现自定义动画

transition 实现渐变动画

transition的属性如下：

property:填写需要变化的css属性
duration:完成过渡效果需要的时间单位(s或者ms)
timing-function:完成效果的速度曲线
delay: 动画效果的延迟触发时间

其中timing-function的值有如下：

值	描述
linear	匀速（等于 cubic-bezier(0,0,1,1)）
ease	从慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)）
ease-in	慢慢变快（等于 cubic-bezier(0.42,0,1,1)）
ease-out	慢慢变慢（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out	先变快再到慢（等于 cubic-bezier(0.42,0,0.58,1)），渐显渐隐效果
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

注意：并不是所有的属性都能使用过渡的，如display:none<->display:block

transform 转变动画

包含四个常用的功能：

translate：位移
scale：缩放
rotate：旋转
skew：倾斜

animation 实现自定义动画

animation是由 6 个属性的简写 CSS 动画只需要定义一些关键的帧，而其余的帧，浏览器会根据计时函数插值计算出来，通过 @keyframes 来定义关键帧因此，如果我们想要让元素旋转一圈，只需要定义开始和结束两帧即可

区别

transition主要做简单的过渡效果，⽽animation可以做复杂的动画效果，在语法和⽤法上有⾮常⼤的区别。
transition是过渡属性，强调过渡，他的实现需要触发⼀个事件（⽐如⿏标移动上去，焦点，点击等）才执⾏动画，过渡只有⼀组（两个：开始-结束）关键帧。
animation是动画属性，他的实现不需要触发事件，设定好时间之后可以⾃⼰执⾏，且可以循环⼀个动画（设置多个关键帧）。

Less Sass 的作用

css需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。

预处理语言

扩充了 Css 语言，增加了诸如变量、混合（mixin）、函数等功能，让 Css 更易维护、方便。本质上，预处理是Css的超集包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 Css 文件。

预编译处理器

Css预编译语言在前端里面有三大优秀的预编处理器，分别是：

sass
less
stylus

使用

sass：变量以$符号开头

// 定义变量 
$primary-color: #007bff;
$font-size: 16px;
// 使用变量
body { 
color: $primary-color;
font-size: $font-size; }

可以在选择器中嵌套其他选择器，让代码结构更清晰，与 HTML 结构相对应。 在 Sass 中，& 符号是一个非常有用的特殊字符，它代表当前选择器的父选择器。

嵌套结构与父选择器

在 Sass 的嵌套语法里，代码的层次结构反映了 CSS 选择器的嵌套关系。上述代码里，a 选择器嵌套在 li 选择器内部，而 li 又嵌套在 ul 中，ul 再嵌套于 nav 内。这里 a 的父选择器就是 nav ul li a。

2. & 代表父选择器

当在 a 选择器的嵌套样式中使用 & 时，& 会被替换为父选择器。在 &:hover 中，& 被替换成 nav ul li a，所以 &:hover 最终生成的 CSS 选择器就是 nav ul li a:hover。

nav {
    ul {
        list-style: none;
        margin: 0;
        padding: 0;

        li {
            display: inline-block;
            margin-right: 10px;

            a {
                color: $primary-color;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}

混合器用于定义可复用的样式代码块，使用@mixin定义，@include调用

/ 定义混合器
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

// 使用混合器
.button {
    @include border-radius(5px);
    background-color: $primary-color;
    color: white;
}

通过@extend可以让一个选择器继承另一个选择器的样式。

导入（Import）使用@import可以将多个 Sass 文件合并成一个 CSS 文件。
假设存在一个_base.scss文件：

// _base.scss
body {
    font-family: Arial, sans-serif;
}

在main.scss中导入它：

// main.scss
@import 'base';

// 其他样式

函数（Functions）：Sass 提供了一些内置函数，你也可以自定义函数。

// 自定义函数
@function double($number) {
    @return $number * 2;
}

.box {
    width: double(100px);
    height: double(50px);
}

代码自定义了一个double函数，接收一个参数并返回其两倍的值，在.box类中使用这个函数设置宽度和高度

优点

Less 和 Sass 均为 CSS 预处理器，它们为 CSS 赋予了编程式的能力，使开发者能够更高效、便捷地编写和管理样式代码。

提高代码的可维护性
Less 和 Sass 都提供了变量功能。在大型项目里，一些样式属性经常会被重复使用。要是没有变量，当需要修改这些样式时，就得逐个去修改代码里所有使用到这些样式的地方，这既浪费时间又容易出错。而借助变量，我们可以把这些样式属性定义成变量。
增强代码的复用性
它们支持嵌套规则，这能让代码结构更清晰，还能提高代码的复用性。在编写 HTML 结构时，元素之间存在嵌套关系，在 CSS 里如果也能体现这种嵌套关系，代码就会更易读。
提供了便捷的代码编写方式
Less 和 Sass 都有函数和混合器（Mixin）的功能。函数可以用来执行一些计算，像颜色的处理、尺寸的计算等。而混合器则可以把一些常用的样式组合起来，方便复用。
方便团队协作开发
使用 Less 和 Sass 能让团队成员编写的代码风格更统一。大家可以遵循相同的变量命名规则

怎么理解回流跟重绘？什么场景下会触发？

在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘：

回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制

具体的浏览器解析渲染机制如下所示：

解析HTML，生成DOM树，解析CSS，生成CSSOM树
将DOM树和CSSOM树结合，生成渲染树(Render Tree)
Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
Display:将像素发送给GPU，展示在页面上

在页面初始渲染阶段，回流不可避免的触发，当我们对 DOM 的修改引发了 DOM几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来

当我们对 DOM的修改导致了样式的变化（color或background-color），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了重绘

回流触发时机

回流这一阶段主要是计算节点的位置和几何信息：

添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
页面一开始渲染的时候（这避免不了）
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

还有一些容易被忽略的操作：获取一些特定属性的值

offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight

这些属性有一个共性，就是需要通过即时计算得到。因此浏览器为了获取这些值，也会进行回流

除此还包括getComputedStyle方法，原理是一样的

重绘触发时机

触发回流一定会触发重绘除此之外还有一些其他引起重绘行为：

颜色的修改
文本方向的修改
阴影的修改

浏览器优化机制

由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。当你获取布局信息的操作的时候，会强制队列刷新，包括前面讲到的offsetTop等方法都会返回最新的数据因此浏览器不得不清空队列，触发回流重绘来返回正确的值。

如何减少

在使用 JavaScript 动态插入多个节点时, 可以使DocumentFragment. 创建后一次插入. 就能避免多次的渲染性能

CSS提高性能

优化关键 CSS

将首屏渲染所需的 CSS 代码提取出来，内联到 HTML 文件中，这样可以减少浏览器的渲染阻塞时间。

资源压缩

利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间

合理使用选择器

css匹配的规则是从右往左开始匹配。所以我们在编写选择器的时候，可以遵循以下规则：

不要嵌套使用过多复杂选择器，最好不要三层以上
使用id选择器就没必要再进行嵌套
通配符和属性选择器效率最低，避免使用

不要使用@import

css样式文件有两种引入方式，一种是link元素，另一种是@import

@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时。

而且多个@import可能会导致下载顺序紊乱 比如一个css文件index.css包含了以下内容：@import url("reset.css")那么浏览器就必须先把index.css下载、解析和执行后，才下载、解析和执行第二个文件reset.css

cssSprite，合成所有icon图片，用宽高加上backgroud-position的背景图方式显现出我们要的icon图，减少了http请求
把小的icon图片转成base64编码
CSS3动画或者过渡尽量使用transform和opacity来实现动画，不要使用left和top属性

单行文本溢出省略

text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本
overflow设为hidden，普通情况用在块级元素的外层隐藏内部溢出元素

参考：面试官：说说对Css预编语言的理解？有哪些区别? | web前端面试 - 面试官系列 (vue3js.cn) 深入理解BFC【渡一教育】_哔哩哔哩_bilibili

HTML+CSS知识点