二、CSS 篇

1. 介绍一下 CSS 的盒子模型？

margin(外边距)- 清除边框外的区域，外边距是透明的。

border(边框)- 围绕在内边距和内容外的边框。

padding(内边距)- 清除内容周围的区域，内边距是透明的。

content(内容)- 盒子的内容，显示文本和图像。

W3C的标准盒模型：在标准的盒子模型中，width指content部分的宽度

IE的盒模型：在IE盒子模型中，width表示content+padding+border这三个部分的宽度

• 如何开启不同盒子模型

• box-sizing:content-box; 标准盒子模型
• box-sizing:border-box; IE盒子模型

2.css选择器？

• id选择器（#box），选择id为box的元素
• 类选择器（.one），选择类名为one的所有元素
• 标签选择器（div），选择标签为div的所有元素
• 后代选择器（#box div），选择id为box元素内部所有的div元素
• 子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
• 相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
• 群组选择器（div,p），选择div、p的所有元素
• 伪类选择器
• 属性选择器

3. css 选择器优先级？

!important > 行内样式（比重1000）> ID 选择器（比重100） > 类选择器（比重10） > 标签（比重1） > 通配符 > 继承 > 浏览器默认属性

4.css中可继承属性？

• 字体系列属性

• font-family:字体系列
• font-weight：字体粗细
• font-size：字体大小
• font-style：字体风格

• 文本系列属性

• text-indent：文本缩进
• text-align：文本水平对齐
• line-height：行高
• color：文字颜色

• 元素可见性：visibility
• 列表布局属性：list-style
• 光标属性：cursor

5. 垂直居中几种方式？

• 将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle
• 使用flex布局，设置为align-item：center
• 绝对定位中设置bottom:0,top:0,并设置margin:auto
• 绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值
• 文本垂直居中设置line-height为height值

6. 简明说一下 CSS link 与 @import 的区别和用法？

• link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
• 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
• import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题

7. rgba和opacity的透明效果有什么不同？

Rgba即可以指定元素颜色也可以指定透明度，opacity只能控制元素透明度不能设置颜色

Rgba透明度是基于实际颜色而opacity是针对元素本身透明度设置，在使用rgba是可以实现元素不同部位透明度不同，而opacity使元素透明度一致

支持rgba的浏览器比支持opacity的更普遍但是在低版本的ie中rgba不被支持而支持opacity

8.display的属性值及作用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JAbGv3HB-1686967105037)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\1683804216661.png)]

9.display的block，inline和inline-block区别？

block: 会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性;

inline: 元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin;

inline-block: 将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。

10. display:none和visibility:hidden的区别？

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

11. position的值， relative和absolute分别是相对于谁进行定位的？

relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。

absolute:生成绝对定位，相对于最近一级定位不为static的父元素进行定位。最终找到body

fixed: （老版本IE不支持）生成绝对定位，相对于浏览器窗口或者frame进行定位。

static:默认值，没有定位，元素出现在正常的文档流中。

sticky:生成粘性定位的元素，容器的位置根据正常文档流计算得出。

12.隐藏元素的方法有哪些？

display: none: 渲染树不会包含该染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。

visibility: hidden: 元素在页面中仍占据空间，但是不会响应绑定的监听事件

opacity: 0: 将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件

position: absolute: 通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏

z-index: 负值: 来使其他元素遍盖住该元素，以此来实现隐藏

transform: scale(0,0): 将元索缩放为 0，来实现元素的隐藏。

13.transition和animation区别？

1. 触发方式不同：transition 通过 CSS 属性值的变化来触发动画效果，而 animation 则需要通过设置关键帧（keyframes）来指定动画序列。
2. 控制方式不同：transition 只能控制开始和结束状态之间的过渡动画，而 animation 可以指定多个关键帧，控制元素动画的每一个阶段，包括动画开始、中间和结束的时刻、变换状态以及持续时间等。
3. 耗费资源不同：相对来说，animation 消耗的浏览器资源更多，因为它需要计算多个关键帧之间的动画效果，而 transition 只需在两种状态之间进行简单的计算即可。
4. 兼容性不同：transition 相对来说更加兼容不同的浏览器，而 animation 在某些旧版浏览器上可能无法正常工作。

14.伪元素和伪类区别？

伪元素：是创造文档树之外的对象。例如文档不能提供访问元素内容第一字或者第一行的机制。伪元素还提供一些在源文档中不存在的内容分配样式，例如:before和:after能够访问产生的内容。伪元素的内容实际上和普通DOM元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mND9y0Cq-1686967105038)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\1683805298891.png)]

伪类：是基于元素的特征而不是他们的id、class、属性或者内容。一般来说，元素的特征是不可以从DOM树上推断得到的，而且其是动态的，当用户和DOM进行交互的时候，元素可以获得或者失去一个伪类。（这里有一个例外，就是:first-child和:lang是可以从DOM树中推断出来的。）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0PrLEaC2-1686967105039)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\1683805345353.png)]

两者的异同

相同：

• 伪类和伪元素都不出现在源文件和文档树中。也就是说在html源文件中是看不到伪类和伪元素的。

差异：

• 伪类其实就是基于普通DOM元素而产生的不同状态，他是DOM元素的某一特征。伪元素能够创建在DOM树中不存在的抽象对象，而且这些抽象对象是能够访问到的。

15.对requestAnimationframe的理解

HTML5 提供一个专门用于请求动画的API

语法：

• window.requestAnimationFrame(callback); 其中，callback是下一次重绘之前更新动画顿所调用的函数(即上面所说的回调函数)。该回调函数会被传入DOMHighResTimeStamp参数，它表示requestAnimationFrame()开始去执行回调函数的时刻。该方法属于宏任务，所以会在执行完微任务之后再去执行。

取消动画：

• 使用cancelAnimationFrame()来取消执行动画，该方法接收-个参数–requestAnimationFrame默认返回的id，只需要传入这个id就可以取消动画了。

优势：

• CPU节能
• 函数节流
• 减少DOM操作

16.li 与 li 之间有看不见的空白间隔是什么原因引起的? 如何解决?

浏览器会把inline内联元素间的空白字符(空格、换行、Tab等) 染成一个空格。为了美观，通常是一个

• 放在一行，这导致
• 换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。
• 解决：

• 为
• 设置float:left。不足: 有些容器是不能设置浮动，如左右切换的焦点图等.
• 将所有
• 写在同一行。不足: 代码不美观。
• 将内的字符尺寸直接设为0，即font-size:0。不足:

• 中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。

• 消除

• 的字符间隔letter-spacing:-8px，不足: 这也设置了
• 内的字符间隔，因此需要将
• 内的字符间隔设为默认letter-spacing:normal。

17.CSS3新特性

• 新增各种css选择器(:not(.input):所有class不是’input’的节点)：属性选择器，伪类选择器，伪元素选择器，基本选择器
• 三个边框属性

• border-radius：创建圆角边框
• border-shadow：为元素添加阴影
• border-image：使用图片来绘制边框

• 背景

• background-clip：确定背景画区
• background-origin：设置是从border-box，padding-box，content-box那个盒子的左上角开始对其
• background-size：调整背景图片大小
• background-break：元素可以被分成几个独立的盒子

• 文字

• word-wrap：normal|break-word 使用浏览器默认的换行|允许在单词内换行
• text-overflow：设置或检索当前行超过指定容器的边界如何显示，属性由两个值

• clip：修剪文本
• ellipsis：显示省略符号来代表被修剪的文本

• text-shadow：可向文本应用阴影。能够规定水平阴影，垂直阴影，模糊距离，以及阴影颜色
• text-decoration：CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可以提供

• text-fill-color：设置文字内部填充颜色
• text-stroke-color：设置文字边界填充颜色
• text-stroke-width：设置文字边界宽度

• 颜色（新增颜色表示方式rgba与hsla）

• rgba分为两部分，rgb为颜色值，a为透明度
• hsla分为四部分，h为色相，s为饱和度，l为亮度，a为透明度

• transition过渡，transform转换，animation动画
• flex弹性布局，Grid栅格布局
• 媒体查询

18.创建图片格式(简述)，区别？

• BMP:是无损的、既支持索引色也支持直接色的点阵图
• GIF:是无损的、采用索引色的点阵图。采用LZW压缩算法进行编码
• JPEG:是有损的、采用直接色的点阵图。JPEG的图片的优点是采用了直接色，得益于更丰富的色彩
• PNG-8:是无损的、使用索引色的点阵图。
• PNG-24:是无损的、使用直接色的点阵图。
• SVG:是无损的矢量图。SVG是矢量图意味着SVG图片由直线和曲线以及绘制它们的方法组成
• WebP:是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的点阵图。

19. 画一条0.5px的直线？

考查的是css3的transform

height: 1px;
transform: scale(0.5);

20. calc, support, media各自的含义及用法？

• @support 主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。
• calc() 函数用于动态计算长度值。 calc()函数支持 “+”, “-”, “*”, “/” 运算；
• @media 查询，你可以针对不同的媒体类型定义不同的样式。

21.px和em,rem区别？

px:绝对长度单位，像素px是相对于显示器屏幕分辨率来说的

em:相对长度单位，相对于当前对象内文本的font-size，em的值并不是固定的，em会继承父级元素的font-size（参考物是父元素的font-size）

rem:相对于html根元素的font-size

22. 1rem、1em、1vh、1px，vmin，vmax各自代表的含义？

• rem

rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

• em

子元素字体大小的em是相对于父元素字体大小

元素的width/height/padding/margin用em的话是相对于该元素的font-size

• vw/vh

全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。

• px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

一般电脑的分辨率有{19201024}等不同的分辨率

19201024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

• vmin/vmax: 取视窗高度和宽度的最小值作为基准/取视窗高度和宽度的最大值作为基准。

• 如果窗口高度1080，宽度1920那么。 1vmin=1080px/100=10.8px 1vmax=1920px/100=19.2px。

23. CSS画一个三角形？

这属于简单的css考查，平时在用组件库的同时，也别忘了原生的css

.a {
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent #0099CC transparent transparent;
    transform: rotate(90deg); /*顺时针旋转90°*/
}
<div class="a"></div>

24.元素水平垂直居中

• 利用定位+margin:auto
• 利用定位+margin:负值
• 利用定位+transform
• table布局
• flex布局
• grid布局

25.响应式布局原理

1. 什么是响应式： 一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境（系统平台，屏幕尺寸，屏幕定向等）进行相应的响应和调整
2. 基本原理： 通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport.
3. 实现方式

• 媒体查询
• 百分比布局
• vw/vh
• rem

26.CSS定位方式？

static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

27.css sprite（雪碧图，精灵图）是什么,有什么优缺点？

CSSSprites(精灵图)，将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position属性的组合进行背景定位。

优点：

• 减少HTTP请求，极大提高页面加载速度
• 增加图片信息重复度，提高压缩比，减少图片大小
• 更换风格方便，只需要在一张或几张图片上修改颜色或样式即可

缺点：

• 图片合并麻烦
• 维护麻烦

28.设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？

设备像素：又称为物理像素， 指设备能控制显示的最小物理单位，不一定是一个小正方形区块，也没有标准的宽高，只是用于显示丰富色彩的一个“点”而已

css像素： 适用于web编程，在 CSS 中以 px 为后缀，是一个长度单位 。css中长度分为两类：绝对单位和相对单位，px属于相对单位

设备独立像素： 与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念 。我们常说的分辨率，不严谨来讲是指的设备独立像素。在javascript中我们可以通过 window.screen.width/ window.screen.height 来查看

dpr：设备像素比， 代表设备独立像素到设备像素的转换关系

ppi：像素密度， 表示每英寸所包含的像素点数目

29.margin 和 padding 的使用场景

需要在border外侧添加空白，且空白处不需要背景 (色)时，使用 margin;

需要在border内测添加空白，且空白处需要背景(色) 时，使用 padding。

30.对line-height的理解，赋值方式

概念：

• line-height 属性设置行间的距离（行高），说的直白一点，就是设置两段段文本之间的距离如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了。

原理：

• 我们可以理解为将div分为三份，分别为上边距，内容，下边距。举例：div高度100px，字体为16px，那么上下边距计算为(100px-16px)/2

赋值方式：

• 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
• 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
• 百分比：将计算后的值传递给后代

31.谈谈你对BFC的理解？触发条件？应用场景？

概念： BFC即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则。BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

触发条件：

• 根元素，即HTML元素
• 浮动元素：float值为left、right
• overflow值不为 visible，为 auto、scroll、hidden
• display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
• position的值为absolute或fixed

应用场景：

• 防止margin重叠
• 清楚内部浮动
• 自适应多栏布局

32.如何实现两栏布局，右侧自适应？三栏布局中间自适应？

两栏布局：

• 使用float左浮动左边栏，右边使用margin-left撑出左边栏宽度大小，为父元素添加BFC通过overflow：hidden开启。
• flex布局

三栏布局：

• 下面三个方法原理与两栏布局第一个方法相同

• 两边使用 float，中间使用 margin
• 两边使用 absolute，中间使用 margin
• 两边使用 float 和负 margin

• flex布局
• display: table 实现

• 通过 display: table设置为表格，设置 table-layout: fixed`表示列宽自身宽度决定，而不是自动计算。
• 内层的左中右通过 display: table-cell设置为表格单元。
• 左右设置固定宽度，中间设置 width: 100% 填充剩下的宽度

• grid网格布局

33.说说flexbox（弹性盒布局模型）,以及适用场景？

理解：flex布局意为“弹性布局”，可以 简便、完整、响应式地实现各种页面布局 。 容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向

属性：

• flex-direction 决定主轴的方向
• flex-wrap 决定容器内项目是否可换行

• wrap，换行

• justify-content 项目在主轴上的对齐方式

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center：居中
• space-between：两端对齐，项目之间的间隔都相等
• space-around：两个项目两侧间隔相等

• align-items 项目在交叉轴上如何对齐

• flex-start：交叉轴的起点对齐
• flex-end：交叉轴的终点对齐
• center：交叉轴的中点对齐 垂直居中
• baseline: 项目的第一行文字的基线对齐
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

• align-content

34.介绍一下grid网格布局

理解：Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列

容器属性：

1. display：grid该容器是一个块级元素/inline-grid该容器是一个行内元素
2. grid-template-columns 属性，grid-template-rows 属性：

• 设置列宽，行高几行几列。如果重复宽高可通过repeat(3,200px)表示3行列，200px宽高

• grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性

• 设置行列间距，grid-gap是两者简写

• grid-template-areas 属性：用于定义区域
• grid-auto-flow 属性： 划分网格以后，容器的子元素会按照顺序 ， 顺序就是由grid-auto-flow决定

项目属性：

• grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性： 指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置
• grid-area 属性： 属性指定项目放在哪一个区域 。由grid-template-areas 属性划分区域
• justify-self 属性、align-self 属性以及 place-self 属性

35.CSS3动画有哪些？

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

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

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

触发条件：

• 回流：

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

• 重绘------ 触发回流一定会触发重绘

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

37.如果要做优化，CSS提高性能的方法有哪些？

• 内联首屏关键CSS
• 避免使用css表达式
• 异步加载CSS
• 资源压缩
• 合理使用选择器
• 减少使用昂贵的属性 如 box-shadow/border-radius/filter/透明度/:nth-child 等
• 不要使用@import

38.如何实现单行／多行文本溢出的省略样式？

单行文本溢出

• white-space：设置文字在一行显示，不能换行
• overflow：文字长度超出限定宽度，则隐藏超出的内容
• text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本

• clip：当对象内文本溢出部分裁切掉
• ellipsis：当对象内文本溢出时显示省略标记（…）
• text-overflow只有在设置了overflow:hidden和white-space:nowrap才能够生效的

多行文本溢出省略

• 基于高度截断 – 伪元素 + 定位

• position: relative：为伪元素绝对定位
• overflow: hidden：文本溢出限定的宽度就隐藏内容）
• line-height: 20px：结合元素高度,高度固定的情况下,设定行高, 控制显示行数
• height: 40px：设定当前元素高度
• ::after {} ：设置省略号样式 – 设置伪元素
• position: absolute：给省略号绝对定位
• content：“…”

• 基于行数截断 – 纯css

• -webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）
• display: -webkit-box：和-webkit-line-clamp结合使用，将对象作为弹性伸缩盒子模型显示
• -webkit-box-orient: vertical：和-webkit-line-clamp结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
• overflow: hidden：文本溢出限定的宽度就隐藏内容
• text-overflow: ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本

39.让Chrome支持小于12px 的文字方式有哪些？区别？

Chrome 中文版浏览器会默认设定页面的最小字号是12px，英文版没有限制 。

解决方案：

• zoom ： “变焦”，可以改变页面上元素的尺寸，属于真实尺寸
• -webkit-transform:scale()： 针对chrome浏览器,加webkit前缀，用transform:scale()这个属性进行放缩
• -webkit-text-size-adjust:none： 该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小

区别：

• Zoom 非标属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排
• -webkit-transform:scale() 大部分现代浏览器支持，并且对英文、数字、中文也能够生效，缩放不会改变了元素占据的空间大小，页面布局不会发生变化
• -webkit-text-size-adjust对谷歌浏览器有版本要求，在27之后，就取消了该属性的支持，并且只对英文、数字生效

40.说说对Css预编语言(sass,less)的理解？有哪些区别?

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

有哪些：sass,less,stylus

比较less和sass：

• 相同点：

• 首先sass和less都是css的预编译处理语言，它们引入了mixins，参数，嵌套规则，运算，颜色，名字空间，作用域，JavaScript赋值等加快了css开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用

• 区别：

• less是基于JavaScript的在客户端处理 所以安装的时候用npm
• sass是基于ruby所以在服务器处理

• less优缺点

• 优点： less 简单,易上手;属于css的基础拓展;less更适合静态界面写样式时
• 缺点： JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器

• sass优缺点

• 优点： 功能强大,更加丰富的拓展sass适合游戏或者其他做效果时需要逻辑来更换不同样式
• 缺点： 复杂对于新手比较不友好

41.什么是FOUC？如何避免？

FOUC： 即无样式内容闪烁，也可以称为文档样式短暂失效，主要就是指HTML已加载而样式表并未加载，此后样式表再加载而产生的闪烁现象。

如何避免：

• 样式表前置 ： 根据浏览器渲染的顺序，将CSS在中引入或者嵌入
• 尽量使用link避免使用@import、

42.清除浮动的方式，各自优缺点？

• 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签

• 优点： 通俗易懂，书写方便。（不推荐使用）
• 缺点： 添加许多无意义的标签，结构化比较差。

• 父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。

• 优点： 简单、代码少、浏览器支持好

• 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。
• 使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。

• 优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
• 缺点： 由于IE6-7不支持

43.在网页中的应该使用奇数还是偶数的字体？为什么呢？

• 偶数字号相对更容易和 web 设计的其他部分构成比例关系

44.如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

• 多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms

45.base64的原理及优缺点？

• 优点可以加密，减少了HTTTP请求
• 缺点是需要消耗CPU进行编解码

46.流体布局，圣杯布局，双飞翼布局？

圣杯布局和双飞翼布局的区别：

• 相同点

• 两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，并且中间部分在HTML代码中要写在前边，这样它就会被优先加载渲染。

• 不同点

• 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样。圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼布局则是在中间这个div的外层又套了一个div来放置内容，在给这个中间的div设置margin-left和margin-right 。

47.postcss的作用

PostCSS是一个使用JS插件转换CSS的工具。这些插件可以支持变量和混合、transpile未来CSS语法、内联图像等。

作用：

• 支持未来的css: 使用cssnext书写未来的css(postcss-cssnext plugin)
• 编译速度大大提升。PostCSS 声称比预处理器快 3-30 倍。
• 丰富的插件系统，解放你的双手。
• css模块化，将作用域限制于组件内，避免了全局作用域的问题，再也不用担心样式名重复了

Postcss属于css后处理器，动态编译css，也就是说，在运行的时候进行编译。

48.css有个content属性吗？有什么作用？有什么应用？

css的content属性专门应用在 before/after伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。

49.水平居中方法

• 元素为行内元素，设置父元素text-align:center
• 如果元素宽度固定，可以设置左右margin为auto;
• 绝对定位和移动: absolute + transform
• 使用flex-box布局，指定justify-content属性为center
• display设置为tabel-ceil

50.详细说一说css3的animation，transition

• animation

• css3的animation是css3新增的动画属性，这个css3动画的每一帧是通过@keyframes来声明的，keyframes声明了动画的名称，通过from、to或者是百分比来定义动画过程
• 每一帧动画元素的状态，通过animation-name来引用这个动画，同时css3动画也可以定义动画运行的时长、动画开始时间、动画播放方向、动画循环次数、动画播放的方式，
• 这些相关的动画子属性有：

• animation-name定义动画名
• animation-duration定义动画播放的时长
• animation-delay定义动画延迟播放的时间
• animation-direction定义 动画的播放方向
• animation-iteration-count定义播放次数
• animation-fill-mode定义动画播放之后的状态
• animation-play-state定义播放状态，如暂停运行等
• animation-timing-function定义播放的方式，如恒速播放、减速播放等。

• transition

• transition-property ：规定设置过渡效果的css属性名称
• transition-duration ：规定完成过渡效果需要多少秒或毫秒
• transition-timing-function ：指定过渡函数，规定速度效果的速度曲线
• transition-delay ：指定开始出现的延迟时间

51.什么是css Hack？常见Hack

描述：是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。

常见hack：

• 属性级Hack：比如IE6能识别下划线“”和星号“*”，IE7能识别星号“*”，但不能识别下划线””，而firefox两个都不能认识。
• 选择符级Hack：比如IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
• IE条件注释Hack：IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。

52.浏览器是怎样解析CSS选择器的？

• 浏览器解析 CSS 选择器的方式是从右到左

53.抽离样式模块怎么写，说出思路

• CSS可以拆分成2部分：公共CSS 和 业务CSS：

• 网站的配色，字体，交互提取出为公共CSS。这部分CSS命名不应涉及具体的业务
• 对于业务CSS，需要有统一的命名，使用公用的前缀。可以参考面向对象的CSS

54.元素竖向的百分比设定是相对于容器的高度吗？

不是

无论是竖向还是横向的百分比设定都是相对于容器的宽度。我们可以通过margin和padding来进行验证

55.全屏滚动的原理是什么？ 用到了CSS的那些属性？

• 原理类似图片轮播原理，超出隐藏部分，滚动时显示
• 可能用到的CSS属性：overflow:hidden; transform:translate(100%, 100%); display:none;

56.设置元素浮动后，该元素的 display 值会如何变化

设置元素浮动后，该元素的 display 值自动变成 block

57.display:inline-block 什么时候会显示间隙？

• 相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距
• 非 inline-block 水平元素设置为 inline-block 也会有水平间距
• 可以借助 vertical-align:top; 消除垂直间隙
• 可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙
• 把 li 标签写到同一行可以消除垂直间隙，但代码可读性差

58.pageX，clientX，screenX，offsetX区别？

pageX/Y： 对于整个页面来说，包括了被卷去的body部分的长度

clientX/Y： 点击位置距离当前body可视区域的x，y坐标

screenX/Y： 点击位置距离当前电脑屏幕的x，y坐标

offsetX/Y： 相对于带有定位的父盒子的x，y坐标

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rXHtNM4t-1686967105041)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\1683882788135.png)]

59.如何对不同IE版本浏览器做兼容测试？

使用工具切换IE版本，然后在IE浏览器运行测试

60.border- radius详解

在开发中我们经常通过正方形设置border- radius：50%来实现圆

border-radius参数选择：

• border-radius：10px；将创建四个大小一样的圆角
• border-radius:10px 15px 10px 15px; 四个值分别表示左上角、右上角、右下角、左下角
• border-radius:10px 15px; 第一个值表示左上角、右下角；第二个值表示右上角、左下角
• border-radius:10px 15px 5px; 第一个值表示左上角；第二个值表示右上角、左下角；第三个值表示右下角。

61.让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing: antialiased;

63.CSS3渐变？

CSS3 定义了两种类型的渐变（gradients）：

• 线性渐变 - 向下/向上/向左/向右/对角方向
• 径向渐变 -（Radial Gradients）- 由它们的中心定义

线性渐变：

• 语法：background-image:linear-gradientdirection,color-stop1,color-stop2,……);

• direction：渐变方向/角度，可选（45deg，to bottom，to top,to right,to left,to left top…）
• color-stop：选择颜色rgba可以设置透明度，也可以设置色标点区域 例：rgba(255,255,255,0.3) 20%

径向渐变：

• 语法：background-image: radial-gradient(shape size at position, start-color, …, last-color);

• shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
• size：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthest-corner”
• at position起点：中心点的位置，可以是关键字（水平方向–left,center,right, 垂直方向–top,center,bottom），具体数值或百分比。

64.响应式布局和自适应布局的区别 ?

• 响应式布局是指通过CSS媒体查询，根据不同设备或视口宽度设置不同的样式来适应不同屏幕大小，实现页面的自动调整和优化。响应式布局可以使网站在桌面、平板电脑和手机等多种设备上都能够以最佳的显示效果呈现。
• 自适应布局是指根据屏幕尺寸选择合适的布局方式，使页面在不同设备上看起来更加美观和可读性更好。自适应布局相对来说更加固定一些，它的页面布局通常是由几个固定的布局组成，在不同的屏幕尺寸下选择不同的布局组合来进行展示，而不是像响应式布局那样直接改变样式。

65.z-index失效的几种情况

• position属性未设置或值为static：如果要使用z-index属性，您需要首先将元素的position属性设置为relative、absolute或fixed。否则，即使设置了z-index，也无法使其生效。
• 父元素的z-index值高于子元素：当一个父元素和它的子元素都设置了z-index时，子元素的z-index可能会失效。
• 浮动元素的z-index失效：当使用浮动元素时，z-index属性可能不起作用。这是因为浮动本身就具有一定的层叠性质，并且浮动元素之间的堆叠顺序由它们在文档流中的先后顺序决定。

66.float之后display值改为？

block

67.css中的锚点

<a name="go">来我这里</a>
......
<a href="#go">我来了</a>

可以使用id属性来替代name属性 ， 使用id来定义锚点，可以定位针对任何标签来定位。name属性只能针对a标签来定位。

68.移动端1px问题解决方案

• 利用 css 的 伪元素::after + transfrom 进行缩放

• 优点：全机型兼容，实现了真正的1px，而且可以圆角。适用于老项目。
• 缺点：暂用了after 伪元素，可能影响清除浮动。

• 设置viewport的scale值

• 优点：全机型兼容，直接写1px不能再方便。
• 缺点：适用于新的项目，老项目可能改动大。

• 使用组件库vant/ant-design-mobile

69.阻止移动端H5开发浏览器默认左右滑动行为

html{
    touch-action:none;
}
//此时上下左右都不可滑动
--------改动
html{
touch-action:none;
touch-action:pan-y;
}

70.CSS中 定位position 和 transform 移动元素的比较

• 性能方面：transform性能远高于position
• 通过translate移动，元素依然会占据其原始空间。如果通过position移动则会改变位置触发重绘

71.margin-left：auto，margin-right：auto，margin：auto区别

margin-left:auto 右对齐

margin-right：auto 左对齐

margin：auto 居中

72.css全屏滚动

overflow-y；overflow-x；scroll-snap-type;scroll-snap-align;必要属性

<style>
        html,
        body {
            height: 100%;
            margin: 0;
        }
        ul {
            margin: 0;
            /* scroll-behavior: smooth 让页面在滚动时拥有平滑的过渡效果，而不是瞬间跳转 */
            scroll-behavior: smooth;
            font-size: 40px;
            width: 100%;
            height: 100%;
            /* 
            overflow-y: auto 表示当内容超出元素的高度时，元素会显示垂直方向的滚动条以便用户浏览。如果内容不超出元素的高度，则不会显示滚动条。
            overflow-x: hidden 则表示当内容超出元素的宽度时，元素不会显示水平方向的滚动条，同时超出部分的内容也将被隐藏。
            */
            overflow-y: auto;
            overflow-x: hidden;
            border: 1px solid #000;
            /* 
            scroll-snap-type: y mandatory; 表示在垂直方向上开启滚动对齐功能，并强制要求元素对齐到滚动容器的边缘。这样可以确保每个子元素都在独立的、整数倍的位置停留，从而实现更加规整的页面布局。
            */
            scroll-snap-type: y mandatory;
            /*设置父级*/
            padding: 0;
        }
        li {
            height: 100%;
            width: 100%;
            flex-shrink: 0;
            /* 
            scroll-snap-align: center; 则表示对齐方式为中心对齐，当子元素的中心点（水平轴和垂直轴的中心点）与滚动容器的中心点重合时，就会触发对齐效果。
            */
            scroll-snap-align: center;
            /*子级设置*/
            text-align: center;
        }
        li:nth-child(1) {
            background-color: teal;
        }
        li:nth-child(2) {
            background-color: gold;
        }
        li:nth-child(3) {
            background-color: green;
        }
    </style>

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

73.table布局缺点

• HTML 结构不语义化：使用 table 布局需要使用大量的表格、行和单元格元素，这会导致 HTML 结构不具有语义化。使用 table 布局时，HTML 结构的意义被掩盖，对于阅读和理解 HTML 代码的人来说会带来一定的困难。
• 代码冗余：为了实现复杂的布局效果，往往需要使用大量的 rowspan 和 colspan 属性，这会导致 HTML 代码变得冗长，难以维护。
• 不易适应移动端设备：table 布局的实现方式通常需要指定表格的宽度和高度，因此在移动端设备上表现不佳，会导致页面内容被截断或缩小。
• 渲染性能低下：由于浏览器需要解析大量的表格元素，使用 table 布局会影响页面渲染的性能。
• 不利于 SEO：由于 table 布局不具备语义化，这会导致搜索引擎难以理解页面的结构和内容，降低网站的 SEO（搜索引擎优化）效果。
• 不利于响应式布局：由于 table 布局需要指定表格的宽度和高度，因此难以适应不同尺寸的屏幕。对于实现响应式布局，table 布局效果并不是很理想。