2023高薪前端面试题（一、前端基础——css）

• 说一下 css 盒模型

盒模型分为IE盒模型和W3C标准盒模型。盒子的宽度和高度的计算方式由box-sizing属性控制.

box-sizing属性值
content-box：默认值，content内容的宽高就是盒子width和height。
border-box：为元素设定的width和height属性决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去 边框 和 内边距 才能得到内容的宽度和高度。
inherit：规定应从父元素继承box-sizing属性的值

1. W3C 标准盒模型：

属性width,height只包含内容content，不包含border和padding。

width = 内容的宽度

height = 内容的高度

2. IE 盒模型：

属性width,height包含border和padding，指的是content+padding+border。

width = border + padding + 内容的宽度

height = border + padding + 内容的高度

---

• 画一条 0.5px 的线

方法一、border-width: 0.5px

直接通过样式来设置0.5px的边框。当然这个方案是非常理想的方案，但是事实总是残酷的，它只在 iOS 8+ 上支持，对于 Android 无法支持。

.border {
    border: 1px #000 solid;
    }
    @media(min-device-pixel-ratio: 2) {
      border-width: 0.5px;
}

当然对于这种兼容性问题我们可以通过 JavaScript 来做降级处理，我们将默认边框设置为1px，分辨出来是 iOS 并且版本为 8 以上，就可以将边框设置为0.5px；

方法二、移动端，采用meta viewport的方式

<meta name="viewport" 
      content="width=device-width, 
      initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

这样子就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。

方法三、采用 transform: scale()的方式

transform: scale(0.5,0.5);

方法四、使用boxshadow

<style>
.boxshadow {
    height: 1px;
    background: none;
    box-shadow: 0 0.5px 0 #000;
}
</style>
<p>box-shadow: 0 0.5px 0 #000</p>


<div class="boxshadow"></div>

设置box-shadow的第二个参数为0.5px，表示阴影垂直方向的偏移为0.5px。

方法五、使用background-image结合SVG的方式

使用svg的line元素画线，stroke表示描边颜色，默认描边宽度stroke-width=“1”，由于svg的描边等属性的1px是物理像素的1px，相当于高清屏的0.5px，

这样在Chrome能很好的显示，但在firefox挂了，究其原因是因为firefox的background-image如果是svg的话只支持命名的颜色，如"black"、"red"等，如果把上面代码的svg里面的#000改成black的话就可以显示出来，但是这样就很不灵活了。因此，只能把svg转成base64的形式，

最终如下：

.hr.svg {
    background: url("data:image/svg+xml;utf-8,
                    <svg xmlns='http://www.w3.org/2000/svg' 
                    width='100%' height='1px'>
                      <line x1='0' y1='0' x2='100%' y2='0' stroke='#000'>
                      </line>
                    </svg>");


    //使用base64来使得支持firefox
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg==");
}

画一条0.5px 线的方法 - 腾讯云开发者社区-腾讯云

---

• link 标签和 @import 标签的区别

	link(链接式)	@import（导入式）
从属关系	是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等	CSS 提供的语法规则，只有导入样式表的作用
加载顺序	和页面同时加载	页面加载完毕后加载
兼容性	无兼容问题	IE5+
DOM可控性	可以通过 JS 操作 DOM ，插入link标签来改变样式	由于 DOM 方法是基于文档的，无法使用@import的方式插入样式
权重	大	小

link 属于 html 标签，而@import 是 css 提供的
页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面加载结束后加
载。
link 是 html 标签，因此没有兼容性，而@import 只有 IE5 以上才能识别。
link 方式样式的权重高于@import 的。

https://www.cnblogs.com/my--sunshine/p/6872224.html

---

• transition 和 animation 的区别

一、transition（过渡、转变的意思）

transition 属性是一个简写属性，用于设置四个过渡属性：

1. transition-property：设置过渡效果的属性名称（默认值是all）；

2. transition-duration：设置过渡完成所需要的时间（默认值是0）；

3. transition-timing-function：设置过渡速度效果曲线（默认值是ease）；

4. transition-delay：设置过渡的开始时间（默认值是0）；

语法：transition: property duration timing-function delay;

注意：这里transition-duration是必须要填的，不填默认为是0，没有过渡效果。

二、animation（动画、活力的意思）

animation 属性也是一个简写属性，用于设置六个动画属性：

1. animation-name：设置绑定到选择器的@keyframem名称（默认值是none）；

2. animation-duration：设置完成动画所花费的时间（默认值是0）；

3. animation-timing-function：设置动画的速度曲线（默认值是ease）；

4. animation-delay：设置动画延迟几秒开始（默认值是0）；

5. animation-iteration-count：设置动画播放的次数（默认值是1）；

6. animation-direction：设置时候轮流反向播放动画（默认值是normal）；

语法：animation: name duration timing-function delay iteration-count direction;

注意：这里animation-duration是必须要填的，不填默认是0，就不会播放动画了。

三、相同点

Animation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值。

四、区别

1. transition是一个过渡的效果，没有中间状态，需要设置触发事件（如hover等）才能执行；transition 为 2 帧，从 from .... to

2. animation是一个动画的效果，有多个中间帧，可以在任意一个中间帧设置状态，不需要设置触发事件就能执行。animation 可以一帧一帧的。

---

• Flex 布局

什么是Flex布局

Flex是Flexible Box的缩写 flex布局表示弹性布局，可以为盒状模型提供最大的灵活性。

适用范围

任何一种元素都可以指定为flex布局

.wrap{
    display:flex;
}

行内元素也可以使用Flex布局。

.box{
  display: inline-flex;
}

Webkit内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

flex布局中的一些基本概念

容器和项目

什么叫容器
采用flex布局的元素被称作容器。

什么叫项目
在flex布局中的子元素被称作项目。

即父级元素采用flex布局，则父级元素为容器，全部子元素自动成为项目。

容器的一些属性

有六个常用属性设置在容器上，分别为：

• flex-direction （水平方向）
• flex-wrap （是否换行）
• flew-flow （flex-deriction和flex-wrap属性的简写）
• justify-content （对齐方式）
• align-items （垂直方向）
• align-content （多根轴线的对齐方式）

flex-direction

设置容器主轴的方向，横的还是竖的

.wrap{
    flex-direction:row | row-reverse | column | column=reverse;
}

包含四个属性值：

row: 默认值，表示沿水平方向，由左到右

row-reverse ：表示沿水平方向，由右到左

column：表示垂直方向，由上到下

column-reverse:表示垂直方向，由下到上

flex-wrap

设置是否换行

.wrap{
    flex-wrap:nowrap | wrap | wrap-reverse;
}

包含三个属性值：

nowrap：表示不换行，说明：设置的项目的宽度就失效了，强行在一行显示

wrap：正常换行，第一个位于第一行的第一个

wrap-reverse：向上换行，第一行位于下方

flex-flow

flex-flow属性是flex-deriction和flex-wrap属性的简写，默认值为[row nowrap]

.box {
    flex-flow: row-reverse wrap;
}

第一个属性值为flex-direction的属性值

第二个属性值为flex-wrap的属性值

justify-content

设置项目在容器中的左右对齐方式

.wrap{
    justify-content: flex-start | flex-end | center |space-between | space-around
}

该属性主要要五个属性值：

flex-start：默认值，左对齐

flex-end：右对齐

center：居中对齐

space-between：两端对齐

space-around：每个项目两侧的间距相等

align-items 

项目在交叉轴上是如何对齐显示的

该属性主要有五个属性值：（以交叉轴从上向下为例）

flex-start:交叉轴的起点对齐

flex-end 交叉轴的终点对齐

center 交叉轴居中对齐

baseline 项目的第一行文字的基线对齐
stretch：默认值：如果项目未设置高度或者高度为auto，将占满整个容器的高度

align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该属性可能取6个值。

flex-start：与交