--- theme: smartblue --- ## 1.什么是HTML语义化简单来说：**就是用正确的标签做正确的事。比如：** - **头部：header** - **导航：nav** - **主体内容：main** - **标题：h1 ~ h6** - **段落：p** - **侧边栏：aside** - **页脚：footer** 这样，整篇HTML结构非常清晰好看。 #### HTML语义化有什么好处？ - 使代码更具有可读性，便于团队开发和维护。 - 让搜索引擎更容易读懂，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重（SEO）。 - 网页加载慢导致CSS文件还未加载时（没有CSS），页面仍然清晰、可读、好看。 - 提升用户体验，例如title、alt可用于解释名词或解释图片信息。 ## 2.script标签中的defer和async的区别？ - `script` ：会阻碍html解析，只有下载好并且执行完脚本才会继续解析html。 - `asunc script` ：解析html过程进行脚本的异步下载，下载完成立马执行，有可能会阻断html解析也可能不会。 - `defer script` ：解析html过程进行脚本的异步下载，解析完成之后再按照顺序执行脚本。不会阻塞浏览器解析html。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/08efae9e4d9b4c2b9f193c9d0819ffc6~tplv-k3u1fbpfcp-zoom-1.image) > 推荐文章： > > - [图解 script 标签中的 async 和 defer 属性](https://juejin.cn/post/6894629999215640583 "https://juejin.cn/post/6894629999215640583") ## 3.说说css盒模型 - IE盒模型：宽高属性计算包括content+padding+border - W3C标准盒模型：宽高属性计算只包括content ## 4.说说margin负值 - `margin-top`:元素自身会向上移动，同时会影响下方的元素向上移动； - `margin-bottom`:元素自身不会移动，但是会减少自身供css读取的高度，从而影响下方的元素向上移动； - `margin-left`:元素自身向左移动，同时会影响其他元素； - `margin-right`:元素自身不会移动，但是会减少自身供css读取的宽度，从而影响右侧的元素向左移动； **总的来说**，通过负边距进行偏移的元素，它会放弃它偏移前所占据的空间，这样它后面的文档流中的其他元素就会“流”过来填充这部分空间。文档流只能是后面的流向前面的，即文档流只能是向左或向上流动，不能是向下或向右流动。 ## 5.说说css多种三列自适应布局的实现 - 基于float设置左右浮动，中间自适应； - 基于position:absolute实现，左右中元素均设置absolute，左右元素分别赋予left，right为0，中间元素left，right分别等于左右元素宽度即可； - 基于display:flex实现，赋予左右中父级元素display:flex，左右元素宽度自定义，中间元素设置flex：1即可； - 基于diplay:table实现，赋予左右中父级元素display:table,width:100%,分别赋予左右中dispaly:table-cell,其中，左右元素分别设置宽度即可； - 基于display:grid实现，赋予左右中父级元素display:grid，并且使用grid-template-columns:300px auto 300px,将其分为宽为300px，auto，300px三列布局即可； ## 6.display都有哪些属性值 | 描述 | | ---------------- | -------------------------- | | **none** | 此元素不会被显示。 | | **block** | 此元素将显示为块级元素，此元素前后会带有换行符。 | | **inline** | 默认。此元素会被显示为内联元素，元素前后没有换行符。 | | **inline-block** | 行内块元素。 | | **table** | 此元素会作为块级表格来显示，表格前后带有换行符。 | | **inherit** | 规定应该从父元素继承 display 属性的值。 | | **flex** | 弹性盒模型。 | | **grid** | 网格布局。 | ## 7.块元素和行内元素、行内块元素的区别 **一.块级元素** **（1）常见的块元素有哪些？** 常见的块元素有`

~

、
、
、
、
、
`等，其中 `
` 标签是最典型的块元素。（2）块级元素有什么特点？ - 自己独占一行 - 高度，宽度、外边距以及内边距都可以控制。 - 宽度默认是容器（父级宽度）的 `100%` - 是一个容器及盒子，里面可以放行内或者块级元素（3）注意问题：只有文字才能组成段落，因此 `p` 标签里面不能放块级元素，特别是 `p` 标签不能放 `div`。同理还有这些标签`h1,h2,h3,h4,h5,h6,dt` ，他们都是文字类块级标签，里面不能放其他块级元素。二.行内元素（1）常见行内元素有哪些？常见的行内元素有 `、、、、、、、、、` 等，其中 `` 标签最典型的行内元素，也称内联元素。（2）行内元素有哪些特点？ - 相邻行内元素在一行上，一行可以显示多个 - 高、宽直接设置是无效的 - 只可以设置水平方向的外边距 - 默认宽度就是它本身内容的宽度 - 行内元素只能容纳文本或则其他行内元素（3）注意问题：链接里面不能再放链接。特殊情况 `a` 里面可以放块级元素，但是给 `a` 转换一下块级模式最安全。三.行内块元素（1）常见行内块儿元素有哪些？在行内元素中有几个特殊的标签 `、、`，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。（2）行内块元素有什么特点？ - 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙，一行可以显示多个。 - 默认宽度就是它本身内容的宽度。 - 高度，行高、外边距以及内边距都可以控制。四. 块级元素、行内元素和行内块元素的区别 | 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 | | -------- | ----------- | ----------- | -------- | ------------ | | 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 | | 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 | | 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 | | 五. 块级元素、行内元素和行内块元素互转 - 块转行内：`display:inline`; - 行内转块：`display:block`; - 块、行内元素转换为行内块：`display: inline-block`; ## 8.css 选择器和优先级首先我们要知道有哪些选择器：[选择器参考表](https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FLearn%2FCSS%2FBuilding_blocks%2FSelectors%23%25E9%2580%2589%25E6%258B%25A9%25E5%2599%25A8%25E5%258F%2582%25E8%2580%2583%25E8%25A1%25A8 "https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors#%E9%80%89%E6%8B%A9%E5%99%A8%E5%8F%82%E8%80%83%E8%A1%A8")。常规来说，大家都知道样式的优先级一般为 `!important > style > id > class` ，但是涉及多类选择器作用于同一个元素时候怎么判断优先级呢？相信我，你在改一些第三方库（比如 antd 😂）样式时，理解这个会帮助很大！这篇文章写的非常清晰易懂，强烈推荐，看完之后就没啥问题了：[深入理解 CSS 选择器优先级](https://juejin.cn/post/6844903709772611592 "https://juejin.cn/post/6844903709772611592")。 > 上述文章中核心内容：优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下： > > - 如果存在内联样式，那么 `A = 1`，否则 `A = 0` ； > - B 的值等于 `ID选择器（#id）` 出现的次数； > - C 的值等于 `类选择器（.class）` 和 `属性选择器（a[href="https://example.org"]）` 和 `伪类（:first-child）` 出现的总次数； > - D 的值等于 `标签选择器（h1,a,div）` 和 `伪元素（::before,::after）` 出现的总次数。 > 从左至右比较，如果是样式优先级相等，取后面出现的样式。 ## 9.重排（reflow）和重绘（repaint）的理解简单地总结下两者的概念： - 重排：无论通过什么方式影响了元素的几何信息(元素在视口内的位置和尺寸大小)，浏览器需要重新计算元素在视口内的几何属性，这个过程叫做重排。 - 重绘：通过构造渲染树和重排（回流）阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(元素在视口内的位置和尺寸大小)，接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘。如何减少重排和重绘？ - 最小化重绘和重排，比如样式集中改变，使用添加新样式类名 `.class` 或 `cssText` 。 - 批量操作 DOM，比如读取某元素 `offsetWidth` 属性存到一个临时变量，再去使用，而不是频繁使用这个计算属性；又比如利用 `document.createDocumentFragment()` 来添加要被添加的节点，处理完之后再插入到实际 DOM 中。 - 使用 `absolute` 或 `fixed` 使元素脱离文档流，这在制作复杂的动画时对性能的影响比较明显。 - 开启 GPU 加速，利用 css 属性 `transform` 、`will-change` 等，比如改变元素位置，我们使用 `translate` 会比使用绝对定位改变其 `left` 、`top` 等来的高效，因为它不会触发重排或重绘，`transform` 使浏览器为元素创建⼀个 GPU 图层，这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。这里推荐腾讯 IVWEB 团队的这篇文章：[你真的了解回流和重绘吗](https://juejin.cn/post/6844903779700047885 "https://juejin.cn/post/6844903779700047885")，好好认真看完，面试应该没问题的。