企业官网建设流程全解析

1、animation、transition、transform 的区别

在css中，都是用来创建动画效果的关键属性
animation属性可以创建一个在指定时间内播放动画效果，可以包括多个关键帧。包含动画名称、持续时间、动画方式、延迟时间、播放次数等来控制动画的效果。可以实现复杂的动画效果，例如循环动画、无限次播放等

/* ① 定义动画(关键帧)*/ @keyframes 动画名称{0%{/* 起始样式 */}50%{/* 中间样式 */}100%{/* 结束样式 */}}/* ② 调用动画(简写属性)*/ .元素{animation: 动画名称 持续时间 速度曲线 延迟 循环次数 方向 填充模式 播放状态;}子属性 说明`animation-name`绑定的 @keyframes 名称`animation-duration`动画时长`animation-timing-function`缓动函数，同 transition`animation-delay`延迟时间`animation-iteration-count`播放次数，`infinite`无限循环`animation-direction``normal`/`reverse`/`alternate`（往返）/`alternate-reverse``animation-fill-mode`动画结束后状态：`none`/`forwards`（保持最后一帧）/`backwards`/`both``animation-play-state``running`/`paused`，JS 控制播放/暂停 值 动画前（delay期间） 动画后（结束后）`none`（默认） 保持元素原有样式 回到原有样式`forwards`保持元素原有样式 保持最后一帧样式`backwards`应用第一帧样式 回到原有样式`both`应用第一帧样式 保持最后一帧样式 核心口诀（看单词后缀） forwards（向前）=惦记“后面”（动画结束后，保持最后状态）。 backwards（向后）=惦记“前面”（动画开始前，提前展示第一帧）。 both=前后都惦记（既提前展示，又保持最后）。 none=啥都不惦记（该咋样咋样）。

transition是元素从一种状态平滑的过渡到另一种状态，例如颜色、大小、位置等属性。通过指定过度的属性、持续的时间、动画方式、延迟时间等来控制动画的效果。

transition 无法凭空产生动画。必须有一个属性值从 A 变成 B（比如 opacity:0→ opacity:1）。 .元素{transition: 属性名称 持续时间 速度曲线 延迟时间;}/* 或者分开写 */ .元素{transition-property: width;/* 监听哪个属性变化 */ transition-duration:0.3s;/* 动画持续多久 */ transition-timing-function: ease;/* 速度曲线 */ transition-delay: 0s;/* 延迟多久开始 */}

transform是用于对元素的变形，例如平移、旋转、缩放、倾斜等。通过改变元素的变形属性来创建动画效果

.元素{/* 多个函数用空格隔开，按从右到左的顺序执行 */ transform: 函数1()函数2()函数3();}translate(X, Y)位移（移动位置） scale(X, Y)缩放（放大/缩小） rotate(角度)旋转（围绕中心转） skew(X, Y)倾斜（扭曲变形）

动画优化：
浏览器渲染动画时，只有 transform（位移/缩放/旋转）和 opacity（透明度） 不会触发页面重排（Reflow），能交给 GPU 加速，非常流畅。

✅ 推荐：transform: translateX(100px)、scale(1.5)、rotate(360deg)、opacity: 0
❌ 避免：left、top、width、height、margin（这些会卡顿）

2、怎么做移动端的样式适配？

响应式设计：css媒体查询@media、通过百分比、vw/vh最大宽度或者相对单位例如rem来确保元素相对容器大小自适应
弹性布局：

display:flex display:flex-inline 改变主轴方向 flex-direction:row;//x是主轴，从左到右排列 flex-direction:row-reverse;//x是主轴，从右到左排列 flex-direction:column;//y轴是主轴，从上到下开始排列 flex-direction:column-reverse;//y轴是主轴，从下到上开始排列 改变主轴元素对齐方式 justify-content：flex-start justify-content：flex-end justify-content：center justify-content：space-between justify-content：space-around 改变交叉轴对齐方式 align-items:flex-start align-items:flex-end align-items:center align-items:baseline align-items:stretch 多行在容器里对齐方式 align-content:flex-start align-content:flex-end align-content:center align-content:space-between align-content:space-around 子项交叉轴的对齐方式 align-self:flex-start align-self:flex-end align-self:center align-self:baseline align-self:stretch 换行显示 flex-wrap：nowrap flex-wrap：wrap flex-wrap：wrap-reverse flex flex-grow 默认是0，默认是盒子本身的大小，不放大。如果两个盒子，一个设成1，一个设成2，那么根据比例去分配剩余空间，1/3，2/3(有剩余空间，按比例增加)flex-shrink 默认是1，当父元素宽度不够时，默认是压缩子盒子的宽度。如果设置为0，那么不压缩，可能会出现父元素宽度不够时，子元素溢出。(溢出空间，按比例减少)flex-basis 利用flex:1结合 flex-basis分析如下 flex:1拆分展示：flex-grow:1;flex-shrink:1;flex-basis:0% 解释：基础为0，所有项目从同一起跑线（0）出发，按 grow 比例瓜分全部空间，所以严格等比。 flex: auto 拆分展示：flex-grow:1;flex-shrink:1;flex-basis: auto 解释：基础由内容/width 决定，先保留“自留地”，再按 grow 比例瓜分多余的空间。所以内容长的初始宽，内容短的初始窄。 flex:1 之所以能严格等分，核心在于 flex-basis:0%，它把所有项目的基础清零，让 flex-grow 分配的是整个容器空间，而不是剩余空间。

移动端优先Mobile-first
首先定义移动端的样式，然后使用媒体查询逐渐添加更大屏幕上的样式，以确保基本功能在小屏幕上也能正常工作

图片和多媒体适配使用max-width：100%确保图片和多媒体在小屏幕上不会溢出其容器

3、相邻的两个inline-block节点为什么会出现间隔，该如何解决？

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来html代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间有出现了空隙。这些元素之间的间距随着字体大小的变化。
方法之移除空格

<divclassName='space'><ahref='##'>a</a><ahref='##'>b</a><ahref='##'>c</a></div>或<divclassName='space'><ahref='##'>a</a><ahref='##'>b</a><ahref='##'>c</a></div>或<divclassName='space'><ahref='##'>a</a><!-- --><ahref='##'>b</a><!-- --><ahref='##'>c</a></div>

使用margin负值

.space a{display:inline-block;margin-right:-3px}

使用font-size：0
使用letter-spacing字符间距

.space{letter-sapcing:-3px}.space a{letter-spacing:0}

使用word-spacing，单词间距

<style>div{word-spacing:-6px;}a{word-spacing:0;display: inline-block;font-size: 16px;background: red;}</style><body><div><ahref="#">链接1</a><ahref="#">链接2</a><ahref="#">链接3</a><ahref="#">链接4</a></div>

css3新增了哪些特性？

选择器
属性选择器、结构伪类选择器、状态伪类选择器、否定伪类选择器、空元素
样式
圆角：border-radius
阴影：box-shadow
渐变：linear-gradient、radial-gradient
背景增强：background-size、
文字：
word-wrap：normal（默认换行）｜break-word（允许在单词内换行）
text-overflow：clip（修剪文本）｜ellipsis(显示省符号来代表被修剪的文本)
text-shadow 文本阴影
rgba 分为两部分。rgb是颜色 a时透明度
hala分为四部分 。色相 饱和度 亮度 透明度
transition过渡
css属性 持续时间 动画方式 延迟时间
transform转换
animation动画
布局
flex弹性布局、媒体查询等等

回流和重绘

回流：根据各种样式计算每个盒子在页面上的大小与位置
重绘：当计算好盒模型的位置、大小以及其他属性后，浏览器根据每个盒子的特性进行绘制。
浏览器渲染机制如下：

• 解析html，生成DOM树，解析css，生成CSSOM树
• 将DOM树和CSSOM树结合，生成渲染树
• 回流：根据生成的渲染树进行回流，得到节点的几何信息（位置、大小）
• 重绘：根据渲染树以及回流得到的几何信息，得到节点的绝对像素
• 将像素发送给GPU，展示到页面上
  回流触发机制
• 添加或者删除可见的DOM元素
• 元素的位置发生变化
• 元素的尺寸发生变化（包括外边距、内边框、边框大小 、高度、宽度等）
• 内容发生变化，比如文本变化或者图片被另一个尺寸不同的图片所代替
• 页面一开始渲染的时候
• 浏览器窗口尺寸变化
• 获取一些特定属性的值，例如offsetTop、offsetLeft、offsetWidth、offsetHeight、clientTop、clientLeft、clientWidth、clientHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight
  为什么这些特定属性会发生回流？
  浏览器有惰性的优化策略，浏览器不会在每次DOM或者样式发生变化之后立刻重新计算布局。它会将一系列变动放入一个队列中缓存起来。然后等待合适的时机再批量处理。
  读取offsetTop这种属性的时候，需求确保布局是最新的，所以浏览器立刻执行队列中所有待处理的变动，这个过程就叫强制同步布局，也就是强制回流。
  重绘触发机制
  颜色的修改
  文本方向的修改
  阴影的修改
  如何减少回流和重绘
• 如果想设定元素的样式，通过改变元素的class的类名
• 避免设置多项内联样式
• 避免使用table布局
• 对于复杂动画，对其设置position:fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响
• css中的transform、opacity这些动画不会引起回流重绘

如何使用css提高页面性能？

内联首屏关键css
浏览器加载html的时候，如果遇到外部的css，会暂停渲染，直到该文件下载并解析完成，这就是渲染阻塞。这就导致了服务端渲染已经返回了完整的HTML结构，用户仍需要等待css文件加载完毕才能看到内容，出现白屏。
内联策略将关键样式直接放到HTML中，绕过了网络请求环节，浏览器无需等待外部资源，可以立即应用样式并开始渲染，从而显著缩短首屏加载时间。
异步加载CSS
前面加载内联样式代码之后，后面的外部引用CSS则没必要阻塞浏览器渲染，采用异步加载的方案

critters-webpack-plugin 这个插件不依赖无头浏览器，而是通过分析 HTML 和 CSS 文件来工作，因此非常快速和轻量。它的设计非常适合预渲染或 SSR 的单页应用。 安装npmi-Dcritters-webpack-plugin 配置 const Critters=require('critters-webpack-plugin');module.exports={//... 其他配置 plugins:[new Critters({// 可选配置 preload:'swap', // 控制资源预加载 // 更多选项参考官方文档})]};

资源压缩
利用webpack模块化工具，将css代码进行压缩，使文件变小

安装依赖npminstallcss-minimizer-webpack-plugin mini-css-extract-plugin --save-dev css-minimizer-webpack-plugin: 负责压缩 CSS 代码 mini-css-extract-plugin: 负责将 CSS 从 JavaScript 包中提取为独立的 .css 文件。这是压缩的前提，因为压缩插件处理的是独立的 CSS 文件

合理使用选择器
css匹配的规则是从右往左开始匹配，例如#markdown .content h3匹配规则如下：
先找到h3标签元素
然后去除祖先不是.content的元素
最后去除祖先不是#markdown的元素
如果嵌套的层级更多，页面中的元素更多，那么匹配所要花费的时间代价更高
所以我们在编写选择器的时候，可以遵循以下规则：

• 不要嵌套使用过多的复杂选择器，最多不要三层以上
• 使用id选择器就没必要再进行嵌套
• 通配符和属性选择器效率最低，避免使用
  避免触发重绘
  减少box-shadow/border-radius/:nth
  -child等的使用
  总结：css实现性能的方式可以从浏览器嵌套、属性特性、减少http这三面考虑，同时还要注意css代码的加载顺序。

如何实现单行/多行文本溢出的省略样式

单行文本溢出省略
文本在一行内显示，超出部分以省略号的形式展现
overflow：hidden；// 文字长度超出限制宽度，则隐藏超出的内容
text-overflow：ellipsis；// 文本溢出时显示省略标记
white-space：nowrap；// 设置文本不换行
多行文本溢出省略

• 基于高度截断
  实现原理很好理解，通过伪元素绝对定位到行尾并遮住文字，再通过overflow: hidden 隐藏多余文字。

伪元素+定位 position：relative；// 伪元素绝对定位 overflow：hidden； // 宽度隐藏内容 position： absolute；// 给省略号绝对定位 line-height： 20px； // 结合元素高度，高度固定的情况下，设定行高，控制显示行数 height： 40px； // 设定当前元素高度 ::after{}// 设置省略号样式 .demo{position: relative;line-height: 20px;height: 40px;overflow: hidden;}.demo:: after{content:"..."position: absolute;bottom:0;right:0;padding:020px020px}

• 基于行数截断

记忆小妙招：垂直的盒子，显示几行，溢出隐藏，显示省略号，如果文本时一段很长的英文或者数字，则需要添加word-wrap：break-word -webkit-line-clamp:2;// 用来限制在一个块元素显示的文本的行数 display： -webkit-box ；// 和1结合使用，将对象作为弹性伸缩盒子模型展示 -webkit-box-orient：vertical； // 设置伸缩盒对象的子元素的排列方式 overflow： hidden；// 溢出宽度的文本隐藏 text-overflow：ellipsis； // 多行文本的情况下，用省略号...隐藏溢出范围的文本

说说对CSS工程化的理解

• 预处理器，预处理器支持我们写一种类似css但不是css的语言，然后把它编译成css代码。为什么不写css反而写“类css”，因为随着前端业务复杂度的提高，css需要能复用、一目了然的嵌套层级关机、可维护的优质的代码结构。
• PostCss（有点类似于babel的作用，将高版本的JS代码转换为低版本的代码）PostCss可以编译尚未被浏览器广泛支持的先进的css语法，还可以自动为一些需要额外兼容的语法增加前缀。更强的是PostCss有着强大的插件机制，支持各种各样的扩展，极大地强化了CSS的能力。
• Webpack
  Webpack在裸奔的状态下，是不能处理CSS的，Webpack本身是一个面向JavaScript且只能处理JavaScript代码的模块化工具。在loader的辅助下能处理css
  Webpack中操作css需要使用的两个关键的loader：css-loader和style-loader
  css-loader：导入css模块，对css代码进行编译处理
  style-loader：创建style标签，把css内容写入标签

BFC

具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素
触发条件
根元素
浮动元素
position： absolute、fixed
overflow：auto、scroll、hidden
display值为inline-block、flex
BFC的特性

• 内部与外部相互隔离，独立容器
• 同一个 BFC 中的相邻块级盒子，其上下外边距（margin）会发生重叠（取较大值），而不是相加。若想避免外边距折叠，只需将其中一个元素包裹在新的 BFC 中（如设置 overflow: hidden）。
• 清除浮动，高度不塌陷
• 不与浮动元素重叠（自适应两栏布局）
  普通块级盒子会无视浮动元素，占据其下方空间；但 BFC 不会重叠在浮动元素之上，它会自动收缩宽度或换行以避开浮动元素。这是实现左侧固定宽度（浮动）、右侧自适应宽度（触发 BFC）布局的核心原理。
  bfc应用
• 自适应两列布局（浮动盒子区域不会和bfc重叠）
  将左列设为左浮动，将自身高度塌陷，使得其他块集元素可以和它占据同一行位置
  右列div块级元素，利用自身特性占满整行，右列设置overflow：hidden，触发bfc特性，使自身与左列的浮动元素隔离开，不占满整行
• 防止外边距重叠，兄弟元素之间外边距重叠
• 父子元素的外边距重叠
  如果在父元素与其第一个/最后一个子元素之间不存在边框、捏边距、行内内容，也没有创建块格式化上下文，或者清除浮动将两者外边距分开，此时子元素的外边距会溢出到父元素的外面，例如父元素margin-top:20px;子元素margin-top:30px;结果却是子元素的顶部和父元素的顶部重合，父元素被子元素溢出影响，外边距重叠，取较大的值，则距离顶部30px
  解决办法：给父元素触发BFC；给父元素添加border；给父元素添加padding
• 清除浮动解决父元素高度塌陷问题

单行文本怎么实现两端对齐

text-align：justify
这个会导致最后一行也是两端对齐不好看，可以在文本最后多加一行
text-align-last作用于块级元素最后一行

CSS模块化的实现方式

css module 和原生css写法一样只是在使用的时候，变成了模块化引入
css in js 全部变成内联样式，完全在js中书写css

让Chrome支持小于12px的文字

transfrom：scale（0.8）
zoom：0.8这会缩小文本元素及其容器，使得文本看起来更小。请注意，zoom是非标准的CSS属性，不一定在所有浏览器中都有效
-webkit-text-size-adjust
设置为none，可以禁用Chrome浏览器的最小字体大小限制，只针对Webkit内核的私有属性
使用图片代替

两栏布局

第一种： 父元素设置bfc，例如overflow：hidden 左侧设置浮动，宽度，高度 右侧设置高度，margin-left：左侧的宽度 第二种： 父元素 左侧设置浮动，宽度，高度 右侧设置bfc，overflow：hidden 第三种： flex 父元素 display： flex 左侧 width宽度 右侧：flex：1

三栏布局

第一种： 左右left，中间margin（中间的内容放到html结构最后，否则右侧会尘在中间内容的下方） 第二种 两边absolute，中间使用margin 第三种 flex

说说对盒子模型的理解

一个盒子由四个部分组成：
content、padding、border、margin
标准盒模型：box-sizing：content-box
width = content + padding + margin + border
怪异盒模型：width = width（包含了padding+border） + margin

怎么实现样式隔离？

第一种：命名约束，人为的
第二种： vue scoped
第三种：CSS Modules 利用Webpack构建时解决，import导入样式对象，然后html中class写成{styles.className},这样webpack打包时就会生成hash独一无二的
第三种：CSS in JS 直接在组件代码中编写样式

flex布局下，怎么改变元素的顺序？

子元素order，值越小的元素会在前面，值相等的元素按照文档流原始顺序排列

行内元素和块级元素区别？

行内元素不是独占一行，不可设置宽高，内容撑开，内外边距可以设置，但是只有左右生效
块级元素独占一行，默认宽度100%，可以设置宽度高度，可以设置内外边距

em/px/rem/vh/vw

em 相对父元素
px像素
rem相对于根元素font-size的值
vw相对于窗口的宽度
vh相对于窗口的高度

css实现隐藏元素的方法

display：none
元素不可见，不占据空间，会导致浏览器的重排和重绘
visibility：none
元素不可见，占据页面空间（仅仅是隐藏该元素，DOM会存在），不会触发重排，但是会触发重绘
opacity：0
改变元素透明度，元素不可见，占据页面空间，可以响应点击事件
设置height、width属性为0
将元素的margin、border、padding、height、width等影响元素盒模型的属性设置为0，如果元素内有子元素或内容，还应该设置overflow：hidden来隐藏
元素不可见，不占据页面空间，无法响应点击事件
position：absolute
position：absolute
top： -9999px
left：-9999px
元素不可见，不影响页面布局

::before和::after中双冒号和单冒号有什么区别、作用？

在css中伪类一直用：表示，如:hover、:active等
伪元素在css1中语法用：表示，如：before，：after
后来在css3中修订，伪元素用::表示，如::before和::after,以此区分伪元素和伪类（低版本IE对双冒号不兼容，开发者为了兼容各浏览器，可以继续使用：after这种老语法来表示伪元素）
伪类和伪元素的区别、

• 伪类和伪元素都是用于向选择器加特殊效果
• 伪元素抽象创造了新元素，伪类则没有
• 伪类只要不是互斥都可以叠加使用。伪元素在一个选择器中只能出现一次，并且只能出现在末尾
• 伪类和伪元素优先级分别与类、标签优先级相同

z-index属性在什么情况下会失效？

• 父元素position为relative时，子元素z-index会失效。解决办法是父元素position改为absolute或static
• 元素没有设置position属性为非static属性。解决办法是设置该元素的position属性为relative，absolute或是fixed中的一种
• 元素在设置z-index的同时还设置了float浮动。解决办法：float去除，改为display：inline-block

position：fixed一定是相对于浏览器窗口进行定位吗？

当元素祖先的transform，perspective或filter属性非none时，相对于该祖先

css选择器有哪些？优先级是什么？

id选择器（#box）
类选择器(.box）
标签选择器（div）
后代选择器（#box div）
子选择器（.one>one_1）
群组选择器（div，p，h1）
伪类选择器
伪元素选择器
属性选择器
优先级
!important > 内联 > ID选择器 > 类选择器 > 标签选择器

下面这段代码中，class为content的元素，实际高度是100px吗？

.parent{display: flex;flex-direction:column;height: 600px;width: 300px;background: yellow;}div{width:100%;}.header{height: 200px;background: red;}.content{height:100%;background:blue;}.footer{height: 200px;background: black;}<divclass="parent"><divclass="header"></div><divclass="content"></div><divclass="footer"></div></div>首先，content元素的height设置为“100%”，在父级的高度为固定值时，直接继承该高度，也就是600px。但是父级设置了display：flex，在高度固定的前提下，子元素的高度会按比例进行缩放，所以content元素最后的高度应该是600*（600/（200+600+200））=360px

如何从html继承box-sizing？

如果不希望每次都重新写一遍，而是希望他是继承而来的，那么我们可以使用如下代码：

html{box-sizing: border-box}*,*::before, *::after{box-sizing: inherit}html 定基调，通配符设继承，第三方留后路，内部可重置

js和css是如何影响DOM树构建的？

CSS 只挡渲染不挡解析，JS 挡解析也挡渲染；但 JS 前面有 CSS，JS 就得等 CSS，导致间接影响渲染树的生成

CSSOM和DOM树是同时解析的吗？

DOM 和 CSSOM 是并发解析的（互不干涉）
必须等 CSSOM 和 DOM 都齐了才渲染。
但是如果遇到了JS脚本，此时如果CSSOM还没有构建完，需要等待CSSOM构建完，再去执行JS脚本，然后再执行DOM解析，此时会阻塞。

特殊情况：<scriptsrc="app.js"></script><!-- 没有 async/defer --><linkrel="stylesheet"href="style.css">此时，DOM 的解析会被迫暂停。因为浏览器执行 JS 前，必须确保前面所有 CSS 已加载完成（以防 JS 查询样式）。但这种“暂停”不是因为 CSS 阻塞了解析器，而是因为 JS 阻塞了解析器，而 CSS 又阻塞了 JS。 如果去掉 JS，CSS 在任何位置都不会阻塞 HTML 解析器继续往下走。

CSS垂直居中有哪些实现方式？

• absolute+ margin

第一种是已知宽高的前提下，利用top：50%，left：50%，margin：-50px 0 0 -50px
第二种不知道宽高top：0，left：0，right：0，bottom：0，margin： auto

• absolute + calc

已知宽高前提下，top：calc（50% - 50px），
left：calc（50% - 50px）

• absolute+transform

transform：translate3d(-50%,-50%,0)

• 转行内块元素

.box{
line-height:300px;
height:300px;
text-align:center;
font-size:0px;
}
.small{
display: inline-block;
vertical-align:middle;
}

• List item
  flex

如何使用css来实现禁止移动端页面的左右划动手势？

touch-action
html {
touch-action:none;
touch-action:pan-y;
}
还可以直接指定对应元素的宽度和overflow：
html{
width: 100vw;
overflow-x:hidden;
}