面试中CSS的常考考点(笔记)

午后书香
343 阅读6分钟

1. 说说你对 css 盒子模型的理解

浏览器渲染一个容器时，会把容器渲染成 4 个区域，分别是 content、padding、border、margin。由这4 个区域组成了一个盒子模型。

  • 标准盒模型：width/height = content，不含 padding 和 border。
  • IE盒模型：width/height = content + padding + border。
  • 切换：box-sizing: content-box（标准） / border-box（IE模型）。

2. 说说你对 css 选择器的理解

优先级从高到低：

  1. !important
  2. 内联样式（style=""） 1000
  3. ID选择器（#id） 0100
  4. 类/伪类/属性选择器（.class, :hover, [type="text"]） 0010
  5. 标签/伪元素选择器（div, ::before） 0001
  6. 通配符（*）0000
    示例：#nav .item:hover 的优先级是 ID + 类 + 伪类。

3. 哪些属性可以继承？

  • 可继承：font-size, color, line-height, text-align, visibility 等。
  • 不可继承：width, height, margin, padding, border 等。

4. 说说 em/rem/vh/vw 的区别

  • em: 相对于声明了font-size的父元素的字体大小
  • rem: 相对于根元素的字体大小
  • vh: 相对于视窗高度的百分比
  • vw: 相对于视窗宽度的百分比
  1. 移动端适配方案：rem || 媒体查询
  2. pc 端适配方案： % + 媒体查询 || rem

5. css中有哪些方式可以隐藏元素？区别？

  1. display: none; 不占据文档流，不触发事件

  2. opacity: 0; 占据文档流，触发事件

  3. visibility: hidden; 占据文档流，不触发事件

  4. clip-path: polygon(0 0,0 0,0 0,0 0); 占据文档流，不触发事件

  5. position: absolute;

  6. width: 0;height: 0;overflow: hidden;

  7. transform: scale(0); 占据文档流，不触发事件

6. 说说你对 BFC 的理解

  • 是什么

浏览器渲染的一个特殊区域，有自己独特的渲染规则，BFC 容器是一个独立的容器，容器里面的子元素不会影响到外面的元素，反之亦然。

  • 有什么特点
  1. bfc容器在计算高度时，会把浮动元素也考虑进去
  2. 子元素的盒模型不会影响到 bfc 外部的元素
  3. 其他特性和普通容器一样
  • 怎么实现
  1. overflow: hidden || auto || scroll;
  2. float: left || right;
  3. position: absolute || fixed;
  4. display: inline-xxx || table-xxxx || flex || grid || tabel;
  • 应用场景
  1. 清除浮动
  2. 防止 margin 重叠
  3. 自适应两栏布局

7. 元素水平垂直居中的方法有哪些？

  1. flex

display: flex;

justify-content: center;

align-items: center;

  1. 定位 + transform

父容器：

position: relative;

子容器：

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

  1. 定位 + margin:auto; (需要子容器有宽高，否则子容器会被撑大)

父容器：

position: relative;

子容器：

width: 100px;

height: 100px;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

  1. grid

display: grid;

justify-content: center;

align-items: center;

  1. table

display: table-cell;

vertical-align: middle;

text-align: center; (子元素需要为非块级元素)

8. 说说你对 css 动画的了解

  • 有什么

    1. 渐变动画
    2. 转变动画
    3. 自定义动画

  • 实现方式

    1. transition
    2. transform
    3. animation + keyframes
<style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            /* transition: all 2s; */
        }

        .box:hover {
            /* transform: rotate(45deg); */
            /* animation: ratate 0.1s cubic-bezier(0.34, 0, 0.84, 1) infinite; */

        }

        @media screen and (min-width:400px) {
            .box {
                width: 200px;
                height: 200px;
            }
        }

        @keyframes ratate {
            0% {
                transform: rotate(666turn);
            }

            100% {
                transform: rotateZ(666turn);
            }
        }
    </style>

9. 响应式布局的实现方式有哪些？

  • 根据视窗宽度来自动调节页面模块的大小和位置

  • 媒体查询

  • %

  • rem

  • vw，vh

10. css 性能优化

  1. 首页使用内联样式
  2. 异步加载css
  3. 压缩
  4. 合理使用选择器

11. 文本单行溢出省略号

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

12. css画三角形

clip-path

或者

    <style>
        .box {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-top-color: red;
        }
    </style>

13. 聊聊 css 的预处理器

CSS预处理器是一种通过扩展CSS语法并提供高级功能来增强CSS开发效率的工具。它们通过引入编程概念（如变量、嵌套、函数等）生成标准CSS代码，最终在浏览器中运行。

  1. 核心功能：

    • 变量：存储可复用的值（如颜色、字体），实现全局修改。
    • 嵌套：以层级结构组织代码，减少重复选择器。
    • 混合（Mixins） ：定义可复用的代码块，支持参数传递。
    • 继承（Extend） ：通过占位符复用样式，减少代码冗余。
    • 函数与运算：处理颜色、尺寸计算等逻辑。
    • 条件与循环：编写动态样式（如主题切换、响应式适配）。

  2. 主要作用：

    • 提升开发效率：通过模块化减少重复代码。
    • 增强可维护性：集中管理变量和逻辑，便于后期修改。
    • 兼容性处理：自动添加浏览器前缀（如通过 Autoprefixer）。

变量定义：

// Sass
$primary-color: #333;
body { color: $primary-color; }

// Less
@primary-color: #333;
body { color: @primary-color; }

// Stylus
primary-color = #333
body
  color: primary-color

嵌套与父级引用：

// Sass
.container {
  &:hover { background: #eee; }
  .child { font-size: 14px; }
}

// Less（语法与Sass相同）

混合（Mixin） ：

// Sass
@mixin center-block {
  margin-left: auto;
  margin-right: auto;
}
.box { @include center-block; }

// Less
.center-block() {
  margin-left: auto;
  margin-right: auto;
}
.box { .center-block; }

13. flex 布局

Flex 容器属性

1. display

定义容器为 Flex 布局：

.container {
  display: flex; /* 块级 Flex 容器 */
  display: inline-flex; /* 行内 Flex 容器 */
}
2. flex-direction

定义主轴方向：

.container {
  flex-direction: row; /* 默认值，水平排列（左到右） */
  flex-direction: row-reverse; /* 水平反向 */
  flex-direction: column; /* 垂直排列（上到下） */
  flex-direction: column-reverse; /* 垂直反向 */
}
3. flex-wrap

控制项目是否换行：

.container {
  flex-wrap: nowrap; /* 默认不换行（可能压缩项目） */
  flex-wrap: wrap; /* 换行（从上到下） */
  flex-wrap: wrap-reverse; /* 换行反向（从下到上） */
}
4. flex-flow

flex-direction 和 flex-wrap 的简写：

.container {
  flex-flow: row wrap; /* 主轴为行方向，允许换行 */
}
5. justify-content

控制项目在 主轴 上的对齐方式：

.container {
  justify-content: flex-start; /* 默认，左对齐 */
  justify-content: flex-end; /* 右对齐 */
  justify-content: center; /* 居中对齐 */
  justify-content: space-between; /* 两端对齐，项目间距相等 */
  justify-content: space-around; /* 项目两侧间距相等 */
  justify-content: space-evenly; /* 所有间距完全相等 */
}
6. align-items

控制项目在 交叉轴 上的对齐方式：

.container {
  align-items: stretch; /* 默认，拉伸填满容器高度 */
  align-items: flex-start; /* 顶部对齐 */
  align-items: flex-end; /* 底部对齐 */
  align-items: center; /* 垂直居中 */
  align-items: baseline; /* 基线对齐 */
}
7. align-content

控制 多行 项目在交叉轴上的对齐（需启用 flex-wrap: wrap）：

.container {
  align-content: stretch; /* 默认，拉伸填满空间 */
  align-content: flex-start; /* 多行顶部对齐 */
  align-content: center; /* 多行垂直居中 */
  align-content: space-between; /* 多行两端对齐 */
}

Flex 项目属性

1. order

定义项目的排列顺序（数值越小越靠前）：

.item {
  order: 2; /* 默认值为 0 */
}
2. flex-grow

定义项目的放大比例（剩余空间分配）：

.item {
  flex-grow: 1; /* 默认 0（不放大） */
}
3. flex-shrink

定义项目的缩小比例（空间不足时压缩）：

.item {
  flex-shrink: 1; /* 默认 1（允许缩小） */
}
4. flex-basis

定义项目在分配多余空间前的初始大小：

.item {
  flex-basis: 200px; /* 默认 auto（项目原本大小） */
}
5. flex

flex-grow, flex-shrink, flex-basis 的简写：

.item {
  flex: 1 0 auto; /* 语法：flex: grow shrink basis */
}
6. align-self

覆盖容器的 align-items，单独设置项目的交叉轴对齐：

.item {
  align-self: flex-end; /* 覆盖默认对齐方式 */
}
avatar
文章
阅读
粉丝