2024前端面试真题【CSS篇】

盒子模型

盒子模型：box-sizing，描述了文档中的元素如何生成矩形盒子，并通过这些盒子的布局来组织和设计网页。包含content、padding、margin、border四个部分。

分类

W3C盒子模型（content-box）：标准盒子模型，Width = width
IE盒子模型（border-box）：Width = width + padding + border

BFC

BFC：块级上格式下文，是一块具有自己渲染规则的渲染区域。
渲染规则：

内部盒子垂直向上一个接一个堆叠
同一个BFC的两个相邻盒子的margin会重叠
BFC的区域不会与float元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
每个元素的左外边距与包含块的左边界相接触；
-BFC就是一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

BFC的触发条件

触发BFC的条件包含但不局限于：

根元素
浮动元素：left、right
overflow的值除了visible外
display的值为inline-、flex-等；
position的值为absolute或fixed

BFC应用场景

防止margin塌陷
清除内部浮动
自适应多栏布局

响应式设计

特点

同时适配PC + 平板 + 手机等；
根据视口调整模块大小和位置

实现方式

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。为了处理移动端，页面头部必须有meta声明viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"></meta>

实现方式：

媒体查询：@media screen and (max-width: 1920px) {...}
百分比：height、width属性的百分比依托父元素的宽高，但是其它属性不完全依赖；
vw/vh：相对于视图窗口的宽高；
rem：相对于根元素html的font-size属性，默认情况下浏览器大小为16px，此时，1rem = 16px

元素的水平垂直居中方法

实现方式：

定位 + margin: auto
定位 + margin: 负值
定位 + transform
table布局
flex布局
grid布局：网格布局

多栏布局、剩余宽度自适应

两栏布局

两栏布局一般是一个定宽栏和一个自适应的栏并排展示存在。
实现思路：

float左浮左边栏
右边模块使用margin-left撑出内容块做内容展示
为父级元素添加BFC，防止下方元素飞向上

.box {overflow: hidden;
}
.left {width: 200px;flot: left;height: 100%;
}
.right {margin-left: 200px;height: 100%;
}

三栏布局

实现思路：

两边固定宽度、float，中间使用margin
两边定宽、使用absolute，中间使用margin
两边使用float和负margin
flex实现

弹性布局

flex-direction
flex-wrap
flex-flow: flex-direction flex-wrap;
justify-content
align-items：定义项目在交叉轴上如何对齐
align-content：定义多根轴线的对齐方式。
order：项目的排列顺序，数值越小，排列越靠前，默认为0
flex-grow：定义项目的放大比例，默认为0，即存在剩余空间也不放大；
flex-shrink：定义项目的缩放比例
flex-basis：设置元素在主轴上的初始尺寸，默认为内容决定；
align-self：单个项目的对齐方式

CSS选择器

分类：

id选择器
类选择器
标签选择器
后代选择器（div p）
子选择器（div > p）
相邻同胞选择器（div + p）
群组选择器（div, p）
伪类选择器：（first-child、:nth-child()等）
属性选择器（[attribute~=value]等）
层次选择器（p~ul：选择前面有p元素的每个ul）

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

单行文本溢出省略

<style>
.text-ellipsis {overflow: hidden;line-height: 40px;height: 40px;width: 100%;text-overflow: ellipsis;white-space: nowrap; /*文本不换行*/
}
</style>

多行文本溢出省略

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

<style>
.text-ellipsis1 {position: relative;line-height: 20px;height: 40px;overflow: hidden;word-break: break-all;
}
.text-ellipsis1:after {content: '...';position: absolute;bottom: 0px;right: 0px;padding: 0 20px 0 10px;
}
</style>

基于行数截断（-webkit-box-clamp）：

<style>
.text-ellipsis2 {width:100%;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;
}
</style>

CSS 实现一个三角形

<style>
.border {width: 0;height: 0;border-style: solid;border-width: 0 50px 50px;border-color: transparent transparent #ff0000;
}
</style>

CSS3 动画

transition实现渐变动画：transition: all 2s ease-in 500ms;
transform转变动画：scale、translate、rotate、skew
animation实现自定义动画：通过@keyframes来定义关键帧

<style>
@keyframes rotate {from {transform: rotate(0deg)}to {transform: rotate(180deg)}
}
div {animation: rotate 2s;
}
</style>

CSS的设备像素、css像素、设备独立像素、dpr、ppi

css像素

css像素以px为后缀，是一个长度单位，是一种相对单位，相对的是设备像素。
一般情况，页面缩放比为1,1个css像素 = 1个设备独立像素。
px会受到下面的因素的影响而变化：

每英寸像素（PPI）
设备像素比（DPR）

设备像素

设备像素，又称为物理像素。指设备能控制显示的最小物理单位。固定不变，单位为pt。

设备独立像素

设备独立像素，与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念。
一个设备独立像素里可能包含一个或者多个物理像素点，包含的越多则屏幕看起来越清晰。
至于1个虚拟像素被换算成几个物理像素，这个数值就成为设备像素比（DPR）。

设备像素比（DPR）

DPR = 设备像素 / 设备独立像素，在window中通过window.devicePixelRatio获取。

总结

无缩放情况下，1个css像素 = 1个设备独立像素；
设备像素由屏幕生成之后确定，不变；
PC中，1个设备独立像素 = 1个设备像素（未缩放情况下）；
移动端中，标准屏幕（160ppi）下，1个设备独立像素 = 1个设备像素；
设备像素比（dpr） = 设备像素 / 设备独立像素；
每英寸像素（ppi），值越大越清晰

px、em、rem、vh、vw

px：绝对单位，大小与元素的其它属性无关；
em：相对长度单位，相对于当前对象内文本的字体尺寸，特点
- em的值不固定；
- em会继承父级元素的字体大小；
- em是相对单位，相对于当前对象内文本的字体尺寸；
- 任意浏览器的默认字体高都是16px（1em = 16px）；
- 为了简化font-size的计算，我们只需要配置body的font-size: 62.5%;即可，此时：1em = 10px。
rem：相对单位，相对HTML根元素的font-size的值。