2024 跳槽涨薪必不可少面试通关宝典 —— css 篇，值得一读

使用 box-sizing 属性可以任意转换盒子模型。具体的属性值有：

1、content-box ：定义盒子为标准盒子模型，也是默认值。

2、border-box ：定义盒子为 IE 盒子模型。

3、inherit ：规定从父元素继承 box-sizing 属性的值。

通过 box-sizing 属性，可以将标准盒子模型和 IE 盒子模型之间进行任意转换。

七、一个盒子不给宽高，水平垂直居中方式有几种？

---

共有 6 种方式，分别为：

1. flex 布局。有两种实现方式。其中一种实现方式为 display:flex 、align-item:center 和 justify-content:center 。另一种实现方式是 display:flex 和 margin:auto。

2. grid 布局。有两种实现方式。其中一种实现方式为 display:grid 、align-item:center 和 justify-content:center 。另一种实现方式是 display:grid 和 margin:auto。

3. table-cell。实现方式为 display:table-cell 、vertical-align:middle 和 text-align:center 。

4. translate + 绝对定位 。实现方式为相对和绝对定位相结合，绝对定位的元素添加 left:50%、 top:50% 和 transform:translate(-50% , -50%)。

八、css 中的单位有哪些？以及它们之间的区别。

---

css 中的单位有：

px、rpx、em、rem、vw、vh、vmin、vmax、% 。

它们之间的介绍以及区别：

1、px：像素，是网页内常用的单位，也是基本单位。常听到的电脑像素是 1024*768 ，表示的就是水平方向 1024 个像素点，垂直方向 768 个像素点。

2、rpx：是微信小程序解决自适应屏幕尺寸的尺寸单位，微信小程序规定的屏幕宽度为 750rpx 。rpx 单位可以根据屏幕进行自动适应。

3、em：默认字体大小的倍数。1em 的值并不是固定的，需要根据父级元素字体大小确定。

场景1：字体设置 font-size:2em ，字体大小继承父级元素的字体大小（默认大小是16px）的2倍。

场景2：元素的 width:2em ，这里默认的字体大小是自身元素的字体大小，所以宽度是自身元素字体大小的 2 倍。

4、rem：是相对于根元素 html 。这就意味着，我们只需要设置根元素字体大小，就可以把整个页面进行按比例调整。移动端适配这种方法挺常见的。

5、% ：百分比一般来说都是相对于父级元素的。

css 的新单位：

6、vw：view width 的简写。 1vw 代表浏览器视口宽度的 1% 。如：浏览器的宽度为 1200px ，则 1vw = 12px。

7、vh：view height 的简写。1vh 代表浏览器视口高度的 1% 。如浏览器高度 900px ，则 1vh = 9px。

8、vmin：相对单位，当前 vw 和 vh 中较小的一个值 ，其中较小的被分为 100 份 。

9、vmax：当前 vw 和 vh 中较大的一个值 。其中较大的值被分为 100 份。

如浏览器视口大小为：1200*900px ，则 1vmax = 900/100 = 1px。兼容性差，所以用的比较少。vmin 同理。

九、如何实现 0.5px 边框？

---

实现方法有 4 种，分别为：

**9.1、**利用缩小视觉上是 0.5px 。

实现：给容器设置伪元素，设置绝对定位，宽高是 200% ，边框为 1px ，然后缩小元素为50%，视觉上实现 0.5px 。

特点：兼容性较好，能够使用圆角，推荐使用。

**9.2、**利用线性渐变实现。

实现：给容器设置伪元素，设置绝对定位，高度为 1px ，添加背景为线性渐变，一半有颜色，一半没有颜色，视觉上只有 0.5px 。

特点：适合设置一条边框，无法展示圆角。

**9.3、**用阴影实现。

实现：用阴影代替边框，设置阴影为：box-shadow: 0 0 0 0.5px #000 。

特点：使用方便，也能够正常展示圆角，但是兼容性一般。

**9.4、**直接设置 box-width:0.5px 。

特点：使用方便，但是兼容性差。

十、什么是响应式图像？

---

在响应式的流行下，很多 web 应用兼容手机平板电脑，其中最头疼的就是图片了，不同平台使用一张高清图，不但浪费流量，还影响加载速度，所以就有了响应式图像，根据分辨率、设备像素比、屏幕方向等来加载合适的图片，在保证图片清晰的情况下，让图片尽可能小。

解决方案：

• 媒体查询：该方案只适用于根据大小设置不同的背景图片，对于动态图片，如 banner 和 产品图等，处理起来显的无能为力。

• srcset：可以设置通过不同的 DPR 或者不同的 屏幕分辨率，选择对应的或者大小最接近的图片。

• sizes：告诉浏览器图片的实际显示尺寸， html 解析时浏览器能够自动算出需要请求的对应图片

十一、height 与 line-height 的区别

---

接下来我们就细细分析下它们之间的区别有哪些？

• 定义不同：line-height 设置每行文字所占的高度，height 元素自身的高度。就是你理解的行高和高度。

• 同为高度时，表示的意义不同。对于块级元素，设置 line-height 时，高度会被内容自动撑开，此时 高度 就是行高和几行内容共同决定的，即：height = line-height * 行数，而 height 设置的是一个固定值，与内容无关。

• 使用对象不同：line-height 一般是针对字体来设置，height 与 line-height 相同时，文字会垂直居中，height 是设置元素高度的。

• 使用范围不同：line-height 针对有文字的任意元素，height 针对块级元素，行级元素会失效。

• 数值大小关系：line-height 与 height 同时设置时，它们之间的大小关系，对布局的影响：line-height = height 时，单行文字居中，多行文本会超出元素范围。或 line-height > height 时，文本会溢出元素范围。

十二、css 绘制三角形

---

绘制三角形在项目中非常常见，总是记不住绘制的时候到底哪个是有颜色的，其他的透明，今天给大家总结一个规律。

下图是一个大小为0，设置了四个不同颜色的边框的正方形：

可以归纳出：

方向朝下的三角形，上边框有颜色，其他三个边框为透明色。

方向朝上的三角形，下边框有颜色，其他三个边框为透明色。

方向朝左的三角形，右边框有颜色，其他三个边框为透明色。

方向朝右的三角形，左边框有颜色，其他三个边框为透明色。

简单点就是：朝下上有，朝上下有，朝右左有，朝左右有。

十三、移动端如何适配？

---

关于移动端适配的常见方案：

• 媒体查询的方式，即 css3 的 media 。

• flex 或 grid 的弹性布局。

• viewport 缩放

• 动态 rem 方式

• vw 适配方案

适配方案对比：

1、媒体查询

该方式比较老，要写很多的样式，写起来麻烦还不好用，基本没人用了。

2、flex 或 grid 布局

• 该方案基本不需要适配。

• 常见布局就是水平排列和两栏布局

• 不需要使用 JS

3、viewport缩放方案

• • 适配原理简单

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

cZzZe5SJ-1710866374703)]
[外链图片转存中…(img-XBQkz9we-1710866374703)]
[外链图片转存中…(img-fpmeluEW-1710866374704)]
[外链图片转存中…(img-fw9c2E9Y-1710866374704)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-XtpyMY1u-1710866374705)]