CSS高频面试考点

最新推荐文章于 2025-07-11 17:30:38 发布

原创最新推荐文章于 2025-07-11 17:30:38 发布 · 959 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #面试 #sass

1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

盒模型都是由四个部分组成的，分别是margin、border、padding和content。

标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同。标准盒模型的width和height属性的范围只包含了content，而IE盒模型的width和height属性的范围包含了border、padding和content。

一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。

box-sizeing:content-box //标准盒模型
box-sizeing:border-box //IE盒模型

2.display 有哪些值？说明他们的作用。

block   块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none   元素不显示，并从文档流中移除。
inline   行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
list-item   像块类型元素一样显示，并添加样式列表标记。
table   此元素会作为块级表格来显示。
inherit   规定应该从父元素继承display属性的值。

3.一个满屏“品”布局如何设计

<div class="top">顶部区域</div>
<div class="bottom">
  <div class="left">左下区域</div>
  <div class="right">右下区域</div>
</div>

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.top {
  width: 100%;
  height: 50%;
  background: #f9c74f;
  float: left;
}

.bottom {
  width: 100%;
  height: 50%;
  float: left;
}

.left, .right {
  width: 50%;
  height: 100%;
  float: left;
}

.left {
  background: #90be6d;
}

.right {
  background: #43aa8b;
}

简单的方式：
   上面的div宽100%，
   下面的两个div分别宽50%，
   然后用float或者inline使其不换行即可

4.对BFC的理解

BFC是块级格式化上下文，一个元素形成BFC之后，那么它内部元素产生的布局不会影响到外部元素，外部元素的布局也不会影响到BFC内部元素。一格BFC就像是一个隔离区域，和其他区域互不影响。

一般来说根元素是一个BFC区域，浮动和绝对定位的元素也会形成BFC，display属性的值为inline-block、flex这些属性也会创建BFC。还有就是元素的overflow的值不为visible时都会创建BFC。

BFC作用：

①解决margin重叠问题：由于BFC是一个独立的区域，内部元素和外部元素互不影响，将两个元素变为BFC，就解决了margin重叠问题
②创建自适应两栏布局：可以用来创建自适应两栏布局，左边宽高固定，右边宽度自适应。
③解决高度塌陷问题：在子元素设置浮动后，父元素会发生高度的塌陷，也就是父元素的高度为0解决这个问题，只需要将父元素变成一个BFC。

5.margin 重叠问题的理解

margin重叠指的是在垂直方向上，两个相邻元素的margin发生重叠的情况。

一般来说可以分为四种情形：

第一种是相邻兄弟元素的marin-bottom和margin-top的值发生重叠。这种情况下我们可以通过设置其中一个元素为BFC来解决。

第二种是父元素的margin-top和子元素的margin-top发生重叠。它们发生重叠是因为它们是相邻的，所以我们可以通过这一点来解决这个问题。我们可以为父元素设置border-top、padding-top值来分隔它们，当然我们也可以将父元素设置为BFC来解决。

第三种是高度为auto的父元素的margin-bottom和子元素的margin-bottom发生重叠。它们发生重叠一个是因为它们相邻，一个是因为父元素的高度不固定。因此我们可以为父元素设置border-bottom、padding-bottom来分隔它们，也可以为父元素设置一个高度，max-height和min-height也能解决这个问题。当然将父元素设置为BFC是最简单的方法。

第四种情况，是没有内容的元素，自身的margin-top和margin-bottom发生的重叠。我们可以通过为其设置border、padding或者高度来解决这个问题。

Margin 重叠的计算规则
1. 都为正数，取最大值原则：重叠后的 margin 取两个 margin 中的较大值
例如：margin: 20px 和 margin: 30px 重叠 → 30px
2. 一正一负：相加 (20px + (-15px) = 5px)
3. 同为负值：取绝对值较大的 (-20px 和 -30px → -30px)
4. 完全重叠：当两个 margin 完全重合时（如空元素），上下 margin 会完全合并

6.使用CSS预处理器吗？喜欢哪个？

SASS/LESS（根据实际，SASS我有一篇文章有介绍，Sass：让CSS更强大的秘密武器！-CSDN博客）

Sass/SCSS（最流行，功能最全面）
Less（语法简单，学习曲线低）

7.SASS和LESS有什么区别？

他们都是 css 预处理器，是CSS 上的一种抽象层。他们是一种特殊的语法／语言编译成 css 。增加了css 代码的复用性，层级， mixin , 变量，循环，函数等对编写以及开发UI组件都极为方便。区别：
1）编译环境不一样
Sass 是在服务端处理的，以前是 Ruby，现在是 Dart-Sass 或 Node-Sass
Less 是需要引入 less.js 来处理Less代码输出CSS到浏览器，也可以在开发服务器将Less语法编译成css文件，输出CSS文件到生产包目录
2）变量符不一样，Less是＠，而Scss是＄
3） Sass支持条件语句，可以使用if{}else{},for{｝循环等等，而Less 不支持

8.几种常见的CSS布局

详细的资料可以参考：《几种常见的 CSS 布局》

9.如何画一条0.5px的线

使用 transform: scale(）的方式，该方法用来定义元素的2D 缩放转换：
1 transform: scale(0.5,0.5);
采用 meta viewport 的方式，这样就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。
viewport只针对于移动端，只在移动端上才能看到效果。

详细资料可以参考：《怎么画一条 0.5px 的边（更新）》

10.常见的元素隐藏方式？

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

2）使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间，但是不会响应绑定的监听事件。

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

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

5）通过 z-index 负值，来使其他元素遮盖住该元素，以此来实现隐藏。

6）通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

7）通过 transform:scale(0,0)来将元素缩放为 0，以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

11.css 两栏布局的实现？

两栏布局一般指的是页面中一共两栏，左边固定，右边自适应的布局，一共有四种实现的方式。

以左边宽度固定为200px为例

（1）利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。

.outer {
  height: 100px;
}

.left {
  float: left;
  height: 100px;
  width: 200px;
  background: tomato;
}

.right {
  margin-left: 200px;
  width: auto;
  height: 100px;
  background: gold;
}

（2）第二种是利用flex布局，将左边元素的放大和缩小比例设置为0，基础大小设置为200px。将右边的元素的放大比例设置为1，缩小比例设置为1，基础大小设置为auto。

.outer {
  display: flex;
  height: 100px;
}

.left {
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 200px;
  background: tomato;
}

.right {
  flex: auto;
  background: gold;
}

（3）第三种是利用绝对定位布局的方式，将父级元素设置相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。

.outer {
  position: relative;
  height: 100px;
}

.left {
  position: absolute;
  width: 200px;
  height: 100px;
  background: tomato;
}

.right {
  margin-left: 200px;
  height: 100px;
  background: gold;
}

（4）第四种还是利用绝对定位的方式，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。

.outer {
  position: relative;
  height: 100px;
}

.left {
  width: 200px;
  height: 100px;
  background: tomato;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 200px;
  background: gold;
}

12.css三栏布局的实现

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有五种实现方式。

这里以左边宽度固定为100px，右边宽度固定为200px为例。

1）利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。

2）利用flex布局的方式，左右两栏的放大和缩小比例都设置为0，基础大小设置为固定的大小，中间一栏设置为auto。

3）利用浮动的方式，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后。

4）圣杯布局，利用浮动和负边距来实现。父级元素设置左右的padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。圣杯布局中间列的宽度不能小于两边任意列的宽度，而双飞翼布局则不存在这个问题。

5）双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的padding来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

13.实现一个三角形

通过设置不同方向边框来实现

给出上下左右的三角形：

.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid blue;
}

.triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 100px solid green;
}

.triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 100px solid orange;
}

<div class="triangle-up"></div>
<div class="triangle-left"></div>
<div class="triangle-down"></div>
<div class="triangle-right"></div>

14.如何实现单行/多行文本溢出的省略？

单行
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
whtie-space: nowrap; //规定段落中的文本不进行换行

多行
overflow:hidden
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数

15.style 标签写在 body 后与 body 前有什么区别？

页面加载自上而下当然是先加载样式，写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）。

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

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

17.margin 和 padding 分别适合什么场景使用？

margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。
margin用于布局分开元素使元素与元素互不相干。
padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段距离。

何时应当使用margin：
•需要在border外侧添加空白时。
•空白处不需要背景（色）时。
•上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。

何时应当时用padding：
•需要在border内测添加空白时。
•空白处需要背景（色）时。
•上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。

18.常见的CSS单位
1）px像素：①CSS像素 ②物理像素
2）百分比%：作用于父元素，当浏览器的宽度或者高度发生变化时，当前元素依据比例发生变化。
3）em和rem：相对长度单位，它们之间的区别：em相对于父元素，rem相对于根元素。
4）vw/vh是与视图窗口有关的单位，代表视图窗口的宽高。

19.px、em、rem的区别
px 固定像素单位，不能随其它元素的变化而变化
em是相对于父元素的单位，会随着父元素变化而变化
rem是相对于根元素html，它会随着html元素变化而变化

本部分主要是在复习 CSS 相关知识和搜集到的一些相关面试题时所做的笔记，如果出现错误，希望大家指出！