常见面试题之CSS

发布时间：2024年01月14日

CSS3的新特性

新增选择器：:nth-child()、:first-of-type、:last-of-type等
弹性盒子：display: flex
媒体查询：@media根据设备的特性和屏幕大小应用不同的样式规则
多列布局：column-count和column-with等属性可以实现将内容分为多列显示
文本：自定义字体@font-face；阴影text-shadow；文字装饰text-stoke-color；文字溢出text-overflow
圆角：border-radius
边框效果：border-image
阴影：box-shadow
倒影：box-reflect
渐变：linear-gradient
动画：@keyframes和animation
背景效果：background-size 控制背景图的大小
转换和平滑过渡：transform和transition
引入了很多新的伪类
- :empty：选择没有任何子元素或者文本内容的元素。
- :target：选择当前活动的目标元素。
- :enabled：选择可用的表单元素。
- :disabled：选择禁用的表单元素。
- :checked：选择被选中的单选框或复选框。
- :focus：选择当前获取焦点的元素。
- :hover：选择鼠标悬停在上方的元素。
- :visited：选择已访问过的链接。
- :not(selector)：选择不符合给定选择器的元素。
- :nth-child(n)：选择父元素下的第n个子元素。
- :first-child：选择父元素下的第一个子元素。
- :last-child：选择父元素下的最后一个子元素。
- :nth-of-type(n)：选择父元素下特定类型的第n个子元素。
- :first-of-type：选择父元素下特定类型的第一个子元素。
- :last-of-type：选择父元素下特定类型的最后一个子元素。
- :only-child：选择父元素下仅有的一个子元素。
- :only-of-type：选择父元素下特定类型的唯一一个子元素。

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

transition 实现渐变动画
- transition的属性如下：
  - transition-property:填写需要变化的css属性
  - transition-duration:完成过渡效果需要的时间单位(s或者ms)默认是 0
  - transition-timing-function:完成效果的速度曲线
  - transition-delay: （规定过渡效果何时开始。默认是0）
  一般情况下，我们都是写一起的，比如：transition： width 2s ease 1s
transform 转变动画
- 包含四个常用的功能：
  - translate(x,y)：位移
  - scale：缩放
  - rotate：旋转
  - skew：倾斜
  一般配合transition过度使用
  
  注意的是，transform不支持inline元素，使用前把它变成block
animation 实现自定义动画

CSS三大特性

层叠性、继承性、优先级
继承性：可以继承的是font-family、font-size、font-style、color、text-decoration、display、position等

CSS选择器的优先级

CSS的特性：继承性、层叠性、优先级
优先级：写CSS样式的时候，会给同一个元素添加多个样式，此时谁的权重高就显示谁的样式
!important > 行内样式 > ID选择器 > 类/伪类/属性 > 标签选择器 > 通配符 > 浏览器默认样式

项目中为什么要初始化CSS样式

不同的浏览器都有自己的默认样式，如果不初始化可能会导致页面在每个浏览器中显示的不一致。所以初始化CSS样式是为了确保在不同的浏览器中显示的页面尽可能的一致。

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

都能实现透明的效果
opacity继承父元素的opacity属性，作用于元素以及元素内的所有内容的透明度，会影响子盒子
- 取值0~1，0代表完全透明，1代表不透明
rgba(红，绿，蓝，透明度) 只作用于元素的颜色或背景色，并且子元素不会继承透明效果
- a透明度取值0~1

隐藏元素的方法有哪些?

display:none;
- 元素在页面上消失，不占据空间
opacity:0;
- 设置了元素的透明度为0，元素不可见，占据空间位置
visibility:hidden;
- 元素的可见性设置为隐藏，占据空间位置，是一种不可见的状态
position:absolute;相对父元素定位。relative是相对自身的。
- 元素会脱离正常的文档流，并相对于其最近的非 static 定位的祖先元素进行定位
clip-path;
- 创建一个剪切路径来定义元素可见的部分

组件的三大特性：props、自定义事件、插槽

写一个弹框的组件的思路

通过props传入了标题、颜色、圆角等一些初始的样式和内容。
在自定义事件，比如关闭按钮或确定按钮，在父组件中点击按钮，会触发在子组件中自定义事件
插槽可以插入一些自定义的内容，可以灵活的定制

1px / 1em / 1rem / 1vh / 1vw

px：绝对单位，固定的像素大小；
em：相对单位，相对于父元素的字体大小确定的自身的大小。如果不设置字体大小的话，浏览器默认字体大小通常是16px，那么1em=16px；
rem：相对于htmI根节点的font-size的值，比如给html节点的 font-size:62.5%；1rem = 10px; (16px*62.5%=10px)
vh：窗口的高度，屏幕高的1%
vw：窗口的宽度，屏幕宽的1%

物理像素、设备像素

物理像素：在屏幕上的物理成像点

设备独立像素：跟像素没有关系，在高清屏上也可以拥有正常的尺寸。

0.5px的线

使用伪元素和缩放 transform: scale() 的方式
border属性，直接0.5px
采用 meta viewport 的方式 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
采用 border-image 的方式

画一个三角形

使用border可以画一个三角形，使用border属性的transparent值隐藏其他的部分

<span style="background-color:#f8f8f8"><span style="color:#555555"><!DOCTYPE html></span>
<span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"zh-CN"</span><span style="color:#117700">></span>
?
<span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
 ?<span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span>
 ?<span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"viewport"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span><span style="color:#117700">></span>
 ?<span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>Document<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
 ?<span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>
 ? ?<span style="color:#555555">.triangle</span>::<span style="color:#008855">before</span> {
 ? ? ?<span style="color:#000000">content</span>: <span style="color:#aa1111">""</span>;
 ? ? ?<span style="color:#000000">position</span>: <span style="color:#221199">absolute</span>;
 ? ? ?<span style="color:#000000">border-left</span>: <span style="color:#116644">5px</span> <span style="color:#221199">solid</span> <span style="color:#221199">transparent</span>;
 ? ? ?<span style="color:#000000">border-right</span>: <span style="color:#116644">5px</span> <span style="color:#221199">solid</span> <span style="color:#221199">transparent</span>;
 ? ? ?<span style="color:#000000">border-bottom</span>: <span style="color:#116644">10px</span> <span style="color:#221199">solid</span> <span style="color:#770088">black</span>;
 ?  }
 ?<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
?
<span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
 ?<span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"triangle"</span><span style="color:#117700">></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
?
<span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span>

伪元素

<span style="background-color:#f8f8f8"><span style="color:#555555"><!DOCTYPE html></span>
<span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"zh-CN"</span><span style="color:#117700">></span>
?
<span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
 ?<span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span>
 ?<span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"viewport"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span><span style="color:#117700">></span>
 ?<span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>Document<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
 ?<span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>
 ? ?<span style="color:#555555">.triangle2</span> {
 ? ? ?<span style="color:#000000">width</span>: <span style="color:#116644">0</span>;
 ? ? ?<span style="color:#000000">height</span>: <span style="color:#116644">0</span>;
 ? ? ?<span style="color:#000000">border-top</span>: <span style="color:#116644">20px</span> <span style="color:#221199">solid</span> ?<span style="color:#221199">transparent</span>;
 ? ? ?<span style="color:#000000">border-left</span>: <span style="color:#116644">20px</span> <span style="color:#221199">solid</span> ?<span style="color:#221199">transparent</span>;
 ? ? ?<span style="color:#000000">border-bottom</span>: <span style="color:#116644">20px</span> <span style="color:#221199">solid</span> <span style="color:#221199">#19c994</span>;
 ? ? ?<span style="color:#000000">border-right</span>: <span style="color:#116644">20px</span> <span style="color:#221199">solid</span> <span style="color:#221199">#c61a92</span>;
 ?  }
 ?<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
?
<span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
 ?<span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"triangle2"</span><span style="color:#117700">></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
?
<span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span>

图片懒加载怎么实现的

是一种优化网页性能的技术，可以延迟加载页面上的图片，只有当图片即将进入视口时才加载，可以减少页面初始加载时间，节省带宽和资源。

将需要懒加载的图片的src替换为一个占位符
给每个需要懒加载的图片添加自定义属性，将原始图片的url作为属性值
使用JS监听浏览器的滚动事件或其他触发条件，当图片进入视口时，将占位符换成真实的url

图片预加载

是一种优化网页性能的技术，可以在页面加载完成之前提前加载图片资源，确保在需要显示图片时能立刻显示出来，提高用户体验。

把需要预加载的图片url放到数组中
创建一个新对象，然后将预加载图片的url赋值给这个对象的src属性
然后在对象的load事件中，可以执行一些操作

无缝滚动怎么实现

将滚动内容包裹在一个容器中，并设置容器的宽度为滚动项的总宽度。
使用JavaScript或CSS动画实现滚动效果。可以通过修改容器的transform属性或scrollLeft属性来控制滚动。
在滚动到最后一个项时，将第一个项移动到末尾，以实现无缝循环滚动的效果。

link和@import

link和@import都是用于引入CSS的方式
link是XHTML的标签，没有兼容性问题，除了加载CSS，还可以定义RSS等，还支持使用JS控制DOM修改样式；@import低版本浏览器是不支持的，也不支持修改样式，而且只能加载CSS，
link引入CSS时，在页面载入的同时加载CSS；@import需要在页面全部加载完才能加载CSS

浏览器兼容性问题（比如样式、js的）

使用浏览器的前缀 webkit
使用CSS前缀：自动添加前缀的工具，Autoprefixer
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

兼容性问题怎么解决？

标准化HTML、CSS和js的语法和用法，严格按照W3C的规范编写代码，减少浏览器解析和渲染的差异，提高网页兼容性；
第二个是使用浏览器兼容性检测工具，比如CanIUse，可以检测代码在不同浏览器上的兼容性，帮助开发者快速发现和解决问题；
第三个可以采用js或框架，比如jQuery/react和vue等，都有考虑浏览器的兼容性，并提供了一些跨浏览器的解决方案；
第四个针对具体的浏览器兼容性问题，可以使用一些针对性的解决方案，比如IE不支持CSS时可以使用IE hack等方式解决，使用cssreset等CSS库对不同浏览器默认样式进行重置或标准化，减少浏览器的差异带来的影响。
最后还要在多个不同版本的浏览器和不同的设备进行测试，保证网页都可以正常运

跨页页面的数据传递

借助本地缓存，但是对于一些私密的信息不太安全

还可以使用服务器端存储、使用加密算法进行加密

样式改不动怎么办

使用!important提高优先级
在vue3项目中遇到时，使用的 /deep/ （::v-deep废弃了）只有在使用了 CSS 预处理器 (如 Sass、Less 等) 并开启了 PostCSS 插件才能正常工作
缓存问题，浏览器有缓存可以尝试一下清除缓存

样式穿透

可以使用 ::v-deep 或 /deep/ 选择器来实现样式穿透

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

大部分默认频率是60Hz，1秒刷新60次
如果手动编写动画，建议最小时间间隔是16.7ms，这样可以确保每帧动画都能够在显示器刷新前完成
如果小于16.7ms，会导致某些帧在显示器刷新之后才呈现，出现跳帧现象。
当然在我们实际手写的时候还是要根据实际测试进行调整的

精灵图有了解吗？优缺点？

精灵图是一种将多个小图标或图片合并到单个图像文件中的技术。将多个图像合并成一个文件。
优点：
- 可以减少页面加载的http请求数量
- 提高性能和加载速度
- 简化布局
缺点：
- 因为是合并到一个文件的，所以维护性比较低

常见的图片格式

gif：支持动画和透明背景的图片，是有损压缩的，减小文件的大小可以暴露图像的质量，不适用于保存大型或复杂的图像

png：无损压缩的图像格式，适合保存复杂的图像和需要高质量细节的情况，文件较大

jpeg：有损压缩的图像模式，适合保存照片和复杂图像，通过调整压缩质量来平衡文件大小和质量

svg：矢量图，支持无限放大，不会失真，不会出现像素点

说一下CSS的盒模型 / 简述box-sizing的有效值以及所对应的盒模型规则

在HTML页面中的所有元素都可以看成是一个盒子
盒子的组成：内容content、内边距padding、边框border、外边距margin
盒模型的类型:
- content-box 标准盒模型 margin + border + padding + content
- border-box IE盒模型 margin + content(border + padding)
- inherit
  
  规定应从父元素继承box-sizing属性的值
控制盒模型的模式：
- box-sizing:content-box(默认值，标准盒模型)
  
  border-box (IE盒模型);

重绘、重排(回流)有什么区别?

重绘：当节点需要更改外观而不会影响布局就叫重绘，比如改变color
回流：布局或几何属性需要改变叫回流，需要计算它们在设备视口内的确切位置和大小

回流必定会发生重绘，重绘不一定引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流。
以下几个动作引发回流，可能会导致性能问题：
- 添加或删除可见的DOM元素
- 元素的位置发生变化
- 元素的尺寸发生变化，如外边距、内边框、边框大小、高度和宽度
- 内容发生变化，如文本或图片被另一个不同尺寸的图片替代
- 定位或浮动
- 浏览器的窗口尺寸变化 (因为回流是根据视口的大小来计算元素的位置和大小的)
减少重绘和回流
- 批量修改DOM
- 对于复杂动画效果，使用绝对定位让其脱离文档流
- CSS3硬件加速 (GPU加速)、transform、opacity、filters这些动画不会引起回流重绘

让一个元素水平垂直居中的方式有哪些?

使用 Flex 布局

使用 Flex 布局是一种简单而有效的方式。设置父元素 display: flex;，然后使用 justify-content: center; align-items: center; 分别对齐子元素。

<span style="background-color:#f8f8f8"><span style="color:#555555">.parent</span> {
 ?<span style="color:#000000">display</span>: <span style="color:#221199">flex</span>;
 ?<span style="color:#000000">justify-content</span>: <span style="color:#221199">center</span>;
 ?<span style="color:#000000">align-items</span>: <span style="color:#221199">center</span>;
 ?<span style="color:#000000">width</span>:<span style="color:#116644">400px</span>;
 ?<span style="color:#000000">height</span>:<span style="color:#116644">400px</span>;
 ?<span style="color:#000000">border</span>:<span style="color:#116644">1px</span> <span style="color:#221199">solid</span>;
}</span>

使用 CSS Grid 布局

使用 CSS Grid 布局也可以实现元素的水平垂直居中。将要居中的元素放置在一个网格容器中，使用 place-items: center; 属性将其居中。

<span style="background-color:#f8f8f8"><span style="color:#555555">.parent</span> {
 ?<span style="color:#000000">display</span>: <span style="color:#221199">grid</span>;
 ?<span style="color:#000000">place-items</span>: <span style="color:#221199">center</span>;
}</span>

使用 table 元素

使用 table 元素的 display 属性，将表格的单元格设置为垂直居中和水平居中，然后将子元素放置在表格单元格中。

<span style="background-color:#f8f8f8"><span style="color:#555555">.parent</span> {
 ?<span style="color:#000000">display</span>: <span style="color:#221199">table</span>;
}
?
<span style="color:#555555">.child</span> {
 ?<span style="color:#000000">display</span>: <span style="color:#221199">table-cell</span>;
 ?<span style="color:#000000">vertical-align</span>: <span style="color:#221199">middle</span>;
 ?<span style="color:#000000">text-align</span>: <span style="color:#221199">center</span>;
}</span>

使用绝对定位+transform

使用绝对定位也可以实现元素的水平垂直居中。通过设置父元素为相对定位，子元素为绝对定位，并将 top 和 left 属性都设置为 50%，然后使用 transform: translate(-50%, -50%); 将子元素向左上方移动自身宽高的一半。

<span style="background-color:#f8f8f8"><span style="color:#555555">.parent</span> {
 ?<span style="color:#000000">position</span>: <span style="color:#221199">relative</span>;
 ?<span style="color:#000000">width</span>:<span style="color:#116644">400px</span>;
 ?<span style="color:#000000">height</span>:<span style="color:#116644">400px</span>;
 ?<span style="color:#000000">border</span>:<span style="color:#116644">1px</span> <span style="color:#221199">solid</span>;
}
?
<span style="color:#555555">.child</span> {
 ?<span style="color:#000000">position</span>: <span style="color:#221199">absolute</span>;
 ?<span style="color:#000000">width</span>:<span style="color:#116644">200px</span>;
 ?<span style="color:#000000">height</span>:<span style="color:#116644">200px</span>;
 ?<span style="color:#000000">background-color</span>:<span style="color:#770088">red</span>;
 ?<span style="color:#000000">top</span>: <span style="color:#116644">50%</span>;
 ?<span style="color:#000000">left</span>: <span style="color:#116644">50%</span>;
 ?<span style="color:#000000">transform</span>: <span style="color:#221199">translate</span>(<span style="color:#116644">-50%</span>, <span style="color:#116644">-50%</span>);
}</span>

定位+margin：兼容性最好！

使用绝对定位实现元素的水平垂直居中。通过设置父元素为相对定位，子元素为绝对定位，并将 top 、right、bottom、 left 属性都设置为 0，然后使用 margin:auto;

<span style="background-color:#f8f8f8"><span style="color:#555555">.parent</span> {
 ?<span style="color:#000000">position</span>: <span style="color:#221199">relative</span>;
 ?<span style="color:#000000">width</span>:<span style="color:#116644">400px</span>;
 ?<span style="color:#000000">height</span>:<span style="color:#116644">400px</span>;
 ?<span style="color:#000000">border</span>:<span style="color:#116644">1px</span> <span style="color:#221199">solid</span>;
}
?
<span style="color:#555555">.child</span> {
 ?<span style="color:#000000">position</span>: <span style="color:#221199">absolute</span>;
 ?<span style="color:#000000">margin</span>:<span style="color:#221199">auto</span>;
 ?<span style="color:#000000">width</span>:<span style="color:#116644">200px</span>;
 ?<span style="color:#000000">height</span>:<span style="color:#116644">200px</span>;
 ?<span style="color:#000000">background-color</span>:<span style="color:#770088">red</span>;
 ?<span style="color:#000000">top</span>: <span style="color:#116644">0</span>;
 ?<span style="color:#000000">right</span>:<span style="color:#116644">0</span>;
 ?<span style="color:#000000">bottom</span>:<span style="color:#116644">0</span>;
 ?<span style="color:#000000">left</span>: <span style="color:#116644">0</span>;
}</span>

伪类和伪元素

伪类 (:) 把特定的效果加到特定的选择器上，在已有的元素上添加类别，不会产生新的元素，如 :hover

伪元素 (::) ：是CSS3新增的特性，在内容元素的前后插入额外的元素或样式，但这些元素在文档中并不会真实存在

但为了兼容旧版本的浏览器，伪元素仍然可以使用单冒号

如何获取空元素

:empty伪类选择所有没有任何内容的元素
:blank伪类选择所有没有子元素且没有任何内容的元素
也可以使用js

CSS的哪些属性哪些可以继承? 哪些不可以继承?

CSS的特性：继承性、层叠性、优先级
子元素可以继承父类元素的样式，常用的有以下：
1. 字体的一些属性: font、font-size.....
2. 文本的一些属性: line-height、color、text-align
3. 元素的可见性: visibility:hidden
4. 表格布局的属性: border-spacing、border-collapse
5. 列表的属性: list-style
6. 页面样式属性: page
7. 声音的样式属性

有没有用过预处理器?

预处理器是一种用于增强标准CSS的工具，增加了变量、函数、混入等强大的功能
常用的有sass、less预处理器，sass使用类似于CSS的语法，文件扩展名上使用.scss；less择优自己独特的语法，文件扩展名是.less
- 预处理器允许定义变量，便于管理颜色、尺寸等属性；还支持进行数学计算
- 可以使用嵌套规则，使样式表结构更加清晰
- 混合是允许定义一组样式规则，在其他地方进行引入，提高代码复用性
- 预处理器支持函数和逻辑控制，可以编写更加复杂的样式逻辑
- 支持样式表的模块化管理，多个样式表，可以通过导入的方式组合在一起
预处理器提高样式表的可维护性、可读性和重用性。合理的使用预处理器可以有效的减少样式表的编写工作量，并提高代码的质量和效率。

display:none;与visibility:hidden;的区别

相同：都能让元素不可见
区别：
- display:none会让元素完全从渲染树中消失，渲染的时候不占据任何空间
  
  visibility:hidden不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见
- 当修改元素的时候，display会进行重排，visibility只会进行重绘

什么是脱离文档流

"脱离文档"是指一个元素从文档流中脱离，不再占据文档中的空间，元素在页面布局和交互中具有一定的灵活性，并可以通过合适的定位、浮动或隐藏方式达到特定的效果。但需要注意，脱离文档的元素可能会对整体布局产生影响，因此在使用时需要谨慎考虑其对其他元素的影响

使用 CSS position 属性：
- position: absolute;：使用绝对定位，使元素脱离文档流，并相对于最近的已定位祖先元素进行定位。
- position: fixed;：使用固定定位，使元素脱离文档流，并相对于浏览器窗口进行定位。
使用 CSS float 属性：
- float: left; 或 float: right;：使元素浮动到左侧或右侧，允许其他内容环绕其周围。
使用 CSS display 属性：
- display: none;：隐藏元素，使其不再显示并脱离文档流。

移动端适配怎么做

（1）meta viewport（视口）

为了解决页面缩放的体验问题，在网页代码的头部，加入一行viewport元标签
这里的device-width告诉浏览器，将视口的宽度设置为设备宽度(这个宽度是人为预设的，不设的话就是980px)。

（2）图片适配

img{max-width:100%;}此时图片会自动缩放，同时图片最大显示为其自身的100% (即最大只可以显示为自身那么大)
为什么不用 img{width: 100%;}?

当容器大于图片宽度时，图片会无形的拉伸变形

（3）媒体查询

针对不用的设备提前为网页设定各种 CSS 样式CS3中的Media Query模块，自动检测屏幕宽度，然后加载相应的CSS文件

语法举例

<span style="background-color:#f8f8f8"><span style="color:#0000ff">@media</span> <span style="color:#0000cc">screen</span> <span style="color:#770088">and</span> (<span style="color:#000000">min-width</span>:<span style="color:#116644">1200px</span>){
 ? ?<span style="color:#117700">body</span>{
 ? ? ? ?<span style="color:#000000">background-color</span>: <span style="color:#770088">red</span>;
 ?  }
}</span>

当屏幕宽度大于1200px时，背景色变为红色

（4）动态rem方案

和媒体查询配合，实现响应式布局
px、em、rem 有什么不同?
- px是pixel(像素)，是屏幕上显示数据的最基本的点，在HTML中，默认的单位就是px；
- em 是一个相对大小，相对于父元素font-size的百分比大小；
- rem 是相对于根元素的font-size。

transform、transition和animation的区别

transition：过渡，实现两个状态间的变化过程 。他的实现需要触发一个时间才执行动画。

animation：动画，实现多个状态间的变化过程，动画过程可控 (重复播放、最终画面、是否暂停等)。 他的实现不需要触发事件，设置好时间之后可以自己执行，还可以循环一个动画。

区别:
- (1)transform仅描述元素的静态样式，常常配合transition和animation使用
- (2) transition通常和hover等事件配合使用，animation是自发的，立即播放
- (3) animation可设置循环次数
- (4)animation可设置每一帧的样式和时间，transition只能设置头尾
- (5)transition可与js配合使用，js设定要变化的样式，transition负责动画效果，如:
  - animation属性类似于transition，他们都是随着时间改变元素的属性值，其主要区别在于: transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果
    - 1) 动画不需要事件触发，过渡需要。
    - 2)过渡只有一组(两个:开始-结束) 关键，动画可以设置多个。

CSS布局

三栏布局-流体布局

div的结构是左右中的顺序，左右使用float浮动，然后给固定的宽高，中间部分就是流动的内容，要给左右的margin留出空白，与左右元素不重叠。

三栏布局-圣杯布局

div结构是中左右的顺序，三部分都float:left，左和右给固定的宽度，使用相对定位和负边距布局，中间的宽度是100%

三栏布局-双飞翼布局

中间元素设置左右边距，预留两侧的位置，左右两栏固定宽度，使用浮动和负边距归位，消除相对定位

弹性盒子 flex布局

是CSS3新增的一种布局方式，通过display:flex开启
这个容器有主轴和与主轴垂直的交叉轴。可以使用flex-direction来指定主轴的方向
使用justify-content来指定元素在主轴上的排列方式
align-items指定交叉轴上的排列方式
还能使用flex-wrap来规定换行方式

flex:1表示什么

flex有三个参数：默认是0，放大比例；默认1，缩小比例；默认auto，项目本身的大小
一般使用flex:1，将元素平均分
还有一个flex:auto，这个是能根据元素大小自动调节的

移动端和PC端常用的布局方式，分别说一下？

移动端
1. 流式布局（Flow Layout）：流式布局是最常见的布局方式。页面元素根据其在 HTML 中出现的顺序，依次从上到下、从左到右进行排列。这种布局方式在 PC 端和移动端都可以使用。
2. 弹性布局（Flexbox Layout）：弹性布局是 CSS3 新增的布局方式，它通过 flex 容器和 flex 项目来实现灵活的布局。在 PC 端和移动端都可以使用。
3. 栅格布局（Grid Layout）：栅格布局是 CSS3 新增的布局方式，通过将元素分成行和列来实现布局。在 PC 端和移动端都可以使用。
4. 响应式布局（Responsive Layout）：响应式布局是指根据屏幕大小和设备类型调整页面布局。这种布局方式在移动端中更为常见，通过媒体查询等技术实现。
5. 自适应布局（Adaptive Layout）：自适应布局是指针对不同的屏幕尺寸和设备类型设计不同的页面布局，通过服务器端检测并返回不同的页面模板来实现。这种布局方式在移动端中比较常见。
PC端
1. 固定布局（Fixed Layout）：固定布局是指页面元素的大小和位置都是固定的，不随屏幕大小和设备类型变化。这种布局方式在 PC 端中比较常见。
2. 浮动布局（Float Layout）：浮动布局通过使用 CSS 的 float 属性来实现页面元素的排列。这种布局方式在 PC 端中比较常见。

上下margin重合的问题

上下 margin 重叠是指两个相邻的元素的上下 margin 值发生重叠
解决：
1. 使用 padding 替代 margin
2. 使用边框、内边距或空元素
3. 使用 CSS 清除浮动
4. 使用 overflow: auto 或 overflow: hidden 开启BFC

清除浮动

浮动会导致其父元素的高度塌陷，可以使用清除浮动来解决

可以使用 clear:both
overflow:hidden / auto 触发BFC
使用伪类方法clearfix::after:{content:''; display:table; clear:both}

定位、display和float的优先级？

都可以影响元素的位置和大小
定位 > float > display
如果同时设置了定位和浮动，定位会覆盖浮动；同理，同时设置了display和float，display会覆盖float。

BFC的理解

BFC是块级格式化上下文的缩写，是CSS中用于控制块级元素布局和渲染的一种机制
BFC的特性：
- 独立的容器：BFC内部元素和外部元素相互隔离，互不影响
- 浮动：
  - BFC区域不会与浮动元素重叠
  - BFC页面布局时会考虑浮动元素
  - 清除浮动：BFC包含浮动元素，并自动计算高度来适应内部浮动元素的位置，避免高度塌陷的问题
- 垂直排列：BFC内的块级元素会在垂直方向上一个接一个的排列
- 边距折叠：相邻的两个块级元素垂直边距可能会发生折叠，但不同的BFC元素之间的边距不会折叠，即BFC便捷会阻止边距折叠
BFC创建方式 (触发条件)：
- 根元素 HTML
- float不为none
- overflow不为visible
- position为absolute和fixed时
- display属性为：flex、inline-flex、inline-block、table-cell、table-caption

像素为什么使用偶数不是奇数？

偶数更容易与网页设计的其他部分形成比例关系，整个页面看起来更加协调
偶数字号可以让文本段落对齐更方便，奇数可能会对不准
偶数的兼容性也更好，可以减少浏览器和操作系统不一致的可能

字体最小是12px，怎么实现11px呢？

通过transform:scale()进行缩小

less和sass的区别

css的预处理器，都可以嵌套，可以在sass和less文件中使用@import导入其他的css文件
less类似于css，使用{}和；来定义规则和属性；sass使用缩进和冒号的方式来表示规则和属性
less使用@声明变量，sass使用$声明变量

使用这两种预处理器，可以更灵活高效的编写代码，而且提高代码的可维护性

块级行内的空元素

块级元素是在HTML中以块的形式显示的元素，它们通常会独占一行，并且可以设置宽度、高度和内外边距等样式。与之相对的是行内元素，它们在同一行上显示，并且不会独占一行。

空元素是指没有内容的HTML元素，它们不需要闭合标签。

以下是一些常见的块级行内的空元素：

<img>：用于插入图像，它是一个行内元素，但也可以通过CSS设置为块级元素。
<input>：用于创建用户输入字段，例如文本框、单选按钮或复选框等。它是一个行内元素。
<br>：用于插入换行符。它是一个行内元素。
<hr>：用于创建水平分隔线。它是一个块级元素。

首屏优化怎么实现

延迟加载非关键资源
使用CDN将静态资源分发到全球各地的服务器上
简化HTML结构和CSS选择器
压缩和合并CSS和JS文件
图片的懒加载、预加载
使用缓存

get和post请求

get：请求参数放到URL中，明文形式传输，不安全；

请求参数长度一般不超过2048个字符；

产生缓存
post：请求参数放在请求体中，相对安全，不容易被拦截；

请求没有长度限制；

不会产生缓存

要让页面失去色彩，类似于灰色调的效果

可以使用CSS的filter属性来实现

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700">body</span> {
 ?<span style="color:#000000">filter</span>: <span style="color:#000000">grayscale</span>(<span style="color:#116644">100%</span>);
}</span></span>

单行或多行文字超出部分显示...怎么实现？

单行

<span style="background-color:#f8f8f8"><span style="color:#555555">.single-line</span> {
 ?<span style="color:#000000">white-space</span>: <span style="color:#221199">nowrap</span>; <span style="color:#aa5500">/* 不换行 */</span>
 ?<span style="color:#000000">overflow</span>: <span style="color:#221199">hidden</span>; <span style="color:#aa5500">/* 超出部分隐藏 */</span>
 ?<span style="color:#000000">text-overflow</span>: <span style="color:#221199">ellipsis</span>; <span style="color:#aa5500">/* 文字超出部分显示省略号 */</span>
}</span>

多行

<span style="background-color:#f8f8f8"><span style="color:#555555">.multi-line</span> {
 ?<span style="color:#000000">display</span>: <span style="color:#555555">-webkit-</span><span style="color:#000000">box</span>;
 ?<span style="color:#555555">-webkit-</span><span style="color:#000000">line-clamp</span>: <span style="color:#116644">3</span>; <span style="color:#aa5500">/* 显示的行数 */</span>
 ?<span style="color:#555555">-webkit-</span><span style="color:#000000">box-orient</span>: <span style="color:#221199">vertical</span>;
 ?<span style="color:#000000">overflow</span>: <span style="color:#221199">hidden</span>; <span style="color:#aa5500">/* 超出部分隐藏 */</span>
 ?<span style="color:#000000">text-overflow</span>: <span style="color:#221199">ellipsis</span>; <span style="color:#aa5500">/* 文字超出部分显示省略号 */</span>
}</span>

文章段落，每段第一个字字号大一些？

使用CSS的::first-letter伪元素来选择第一个字，并设置其字号

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700">p</span>::<span style="color:#008855">first-letter</span> {
 ?<span style="color:#000000">font-size</span>: <span style="color:#116644">1.2em</span>; <span style="color:#aa5500">/* 设置第一个字的字号 */</span>
}</span></span>

li和li之间的空白怎么解决？

间隙是空格、换行等产生的
解决方案：
- 将所有的li写在一行
- 可以是使用float
- 消除ul的字符间隔letter-spacing:-8px，但是这个要给li的字符间隔恢复到默认letter-spacing:normal

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

一段文本中最后一行在被强制换行之前的对齐规则

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">//scss</span>
<span style="color:#555555">.item</span> {
 ? ?<span style="color:#000000">margin-bottom</span>: <span style="color:#116644">8px</span>;
 ? ?<span style="color:#555555">.label</span> {
 ? ? ? ?<span style="color:#000000">display</span>: <span style="color:#221199">inline-block</span>;
 ? ? ? ?<span style="color:#000000">height</span>: <span style="color:#116644">100%</span>;
 ? ? ? ?<span style="color:#000000">min-width</span>: <span style="color:#116644">100px</span>;
 ? ? ? ?<span style="color:#000000">text-align</span>: <span style="color:#221199">justify</span>;
 ? ? ? ?<span style="color:#000000">text-align-last</span>: <span style="color:#221199">justify</span>;
 ?  }
 ? ?<span style="color:#555555">.value</span> {
 ? ? ? ?<span style="color:#000000">padding-right</span>: <span style="color:#116644">10px</span>;
 ?  }
}</span></span>

说说你对 CSS 模块化的理解

CSS模块化是一种将CSS代码分解为多个小模块，以便更好地组织、重用和维护CSS样式的方法。它可以帮助我们避免CSS样式出现命名冲突、文件过大等问题，提高开发效率和代码质量。
常用的有：
- 预处理器Sass/Less
- 后处理器PostCSS
- CSS Modules，像我们import js一样去引入css代码，代码中的每一个类名都是引入对象的一个属性。可以杜绝css类名冲突的问题
- CSS In JS，用js语言写css，不需要单独的css文件，所有的css代码全部放在组件内部，来实现css的模块化

z-index是什么? 在position的值什么时候可以触发?

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，当脱离文档流内容较多，并且相互重叠的时候，就有可能发生本想完全显示的内容被其他内容遮挡的结果，这时我们就需要人为指定哪个层在上面，哪个在下面，z-index属性就是干这个用的。
注意: z-index仅能在定位元素上奏效
在position的值是relative、 absolute、 fixed、sticky时候可以触发

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

通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。

z-index属性在下列情况下会失效：

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

补充：

在手机端 iOS 13 系统中，-webkit-overflow-scrolling:touch 也会使 z-index 失效，将 touch 换成 unset

文章来源:https://blog.csdn.net/xxq_0217/article/details/135575580
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！