CSS面试题

本文最后更新于 2025年8月4日 晚上

行内元素块级元素

参考：

diaplay 特点 宽度、高度 内边距、外边距
block 块级元素，元素的前和后换行 有效 都有效
inline 行内元素，元素的前和后不换行 无效 水平方向有效，竖直方向无效
inline-block 行内块级元素，元素的前和后不换行 有效 都有效
  • 块级元素的元素之前和之后换行；行内元素和行内块级元素的元素之前和之后不换行。
  • 块级元素和行内块级元素可以包含块级元素、行内元素、行内块级元素；行内元素只能包含行内元素。
  • 块级元素和行内块级元素设置内边距、外边距都有效；行内元素设置内边距、外边距时水平方向有效、竖直方向无效。
  • 块级元素设置宽度、高度有效，但块级元素设置了宽度后仍会独占一行（宽度会变，但仍然会换行）；行内元素设置宽度、高度无效，行内块级元素设置宽度、高度有效。

常见的块级元素：<div> <p> <h1> <h6> <ul> <ol> <li> <form> <header> <canvas> <dd> <dl> <audio> <video> <section> <hr> <br> <address> <article> <aside> <fieldset>

常见的行内元素：<span> <a> <lable> <strong> <b> <small> <abbr> <button> <input> <textarea> <select> <code> <img> <br> <q> <i> <cite> <var> <kbd> <sub> <bdo>

行内块元素间隙

参考：https://juejin.cn/post/6844904056121458695 。

display:inline-block是种布局方法，它相比于与浮动、定位最大的不同就是没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字、图片混排，还可内嵌display:block元素，又可置于display:inline水平的元素中。

在 CSS 布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是对要所有同行显示的元素设置display:inline-block。但会发现这些display:inline-block同行元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”。

产生原因

元素被当成行内块元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space属性来处理：原来 HTML 代码中的回车换行被转成一个空白符，在字体不为 0 情况下，空白符占据一定宽度，所以display:inline-block元素之间就出现了空隙。

这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为 8px。

解决办法

  • 设置父元素font-size:0，设置子元素对应font-size
  • 设置父元素display:table; word-spacing:-1em
  • 设置子元素float:left

文本长度

超出宽度需要打点

  1. 文字超过部分显示为省略号。用到属性：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
  <style>
    .p {
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <p class="p">
    我是一行自动换的文本123我是一行自动换的文本123我是一行自动换的文本123我是一行自动换的文本
  </p>
</body>
  1. 文本超出两行，超出部分省略号显示。用到属性：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<head>
  <style>
    .p {
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis; /* ? */
      word-break: break-all; /* ? */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 这里是超出几行省略 */
    }
  </style>
</head>
<body>
  <p class="p">
    我是两行自动换的文本123我是两行自动换的文本123我是两行自动换的文本123我是两行自动换的文本
  </p>
</body>

用到相关属性： white-space

长度够还打点

可能是因为设置了 max-width

画图形思路

原理是利用元素的长度、宽度、边框、背景颜色及其伪元素来实现。
如画一个对勾：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.checkbox.checked {
  width: 16px;
  height: 16px;
  background-color: #2fd2fe;
  border-radius: 50%;
  position: relative;
}

.checkbox.checked::after {
  content: "";
  display: block;
  width: 6px;
  height: 4px;
  border: 1px solid black;
  border-right: none;
  border-top: none;
  transform: rotate(-60deg) translate(7px, -10px);
  position: absolute;
  top: 16px;
  left: 8.5px;
}

滚动条相关

相关伪元素：

  • div::-webkit-scrollbar 滚动条整体部分
  • div::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条
  • div::-webkit-scrollbar-track 滚动条的轨道（里面装有 Thumb
  • div::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置
  • div::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去
  • div::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
  • div::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件。注意此方案有兼容性问题，一般需要隐藏滚动条时可以用一个色块通过定位盖上去，或者将子级元素调大，父级元素使用 overflow-hidden 截掉滚动条部分。暴力且直接。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@mixin scrollBar {
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;

    &-track {
      border-radius: $Ra-5;
      background-color: transparent;
    }

    &-thumb {
      border: 2px solid transparent;
      border-radius: $Ra-5;
      background-color: rgba($M10, 0.1);
      background-clip: content-box;

      &:hover {
        background-color: rgba($M1, 0.3);
      }
    }
  }
}

隐藏元素

参考：https://juejin.cn/post/6844904200401502215 。

display: none

  • Render Tree：浏览器不会渲染元素，不占据空间
  • 性能：动态改变此属性时会引起回流，性能较差
  • 事件监听：无法进行 DOM 事件监听
  • 继承：不会被子元素继承，子元素也不会被渲染
  • transition：transition 不支持 display

visibility: hidden

  • Render Tree：浏览器会渲染元素，元素被隐藏，会占据空间
  • 性能：动态改变此属性时会引起重绘，性能一般
  • 事件监听：无法进行 DOM 事件监听
  • 继承：会被子元素继承，但可以设置子元素visibility: visible来取消隐藏子元素
  • transition：visibility 会立即显示，延时隐藏

opacity: 0

  • Render Tree：浏览器会渲染元素，元素未被隐藏，全透明，会占据空间
  • 性能：提升为合成层，不会触发重绘，性能较高
  • 事件监听：可以进行 DOM 事件监听
  • 继承：会被子元素继承，且不能设置子元素 opacity: 1 来取消隐藏子元素
  • transition：opacity 延时显示和隐藏

元素同行显示

  • 设置元素为行内元素或行内块元素
  • 设置父元素为 flex 布局或 grid 布局
  • 设置浮动

两栏布局和三栏布局

Demo：

两栏：一栏固定，一栏自适应；三栏：左右固定，中间自适应。方式有：

  • 浮动
  • 定位
  • 表格布局
  • 弹性布局
  • 网格布局

圣杯布局和双飞翼布局

参考：https://juejin.cn/post/6844903565278855181 。
Demo：

异同点

  • 都是对三栏使用浮动，然后对左右两栏使用负外边距
  • 都是把中间栏放在文档流最前面，让中间栏优先加载，并且中间栏占据宽度 100%
  • 都是左右两栏自适应高度固定宽度，中间栏自适应宽度高度，两者的效果基本相同
  • 圣杯布局是利用三栏父元素的左右内边距和左右两栏的相对定位（中间栏为两边腾开位置）
  • 双飞翼布局是给中间栏添加内容层，利用该内容层的左右外边距（中间栏的内容层为两边腾开位置）

圣杯布局缺点

  • 最好给 body 设置最小宽度，否则可能会错乱
  • 任何一栏的高度拉长，其它两栏不会自动填充

双飞翼布局缺点

  • 增加一层节点，增加渲染树生成的计算量
编程语言 > CSS
#CSS #面试题
CSS面试题
https://xuekeven.github.io/2021/08/18/CSS面试题/
作者
Keven
发布于
2021年8月18日
更新于
2025年8月4日
许可协议