CSS面试题

发布于：2025-02-24 ⋅ 阅读:(147) ⋅ 点赞:(0)

活动发起人@小虚竹 想对你说：

这是一个以写作博客为目的的创作活动，旨在鼓励大学生博主们挖掘自己的创作潜能，展现自己的写作才华。如果你是一位热爱写作的、想要展现自己创作才华的小伙伴，那么，快来参加吧！我们一起发掘写作的魅力，书写出属于我们的故事。我们诚挚邀请你参加为期14天的创作挑战赛！

提醒：在发布作品前，请将不需要的内容删除。

1.盒子模型

CSS 中的 盒子模型（Box Model） 是用来描述 HTML 元素在页面中占据空间的方式。每个元素都被视为一个矩形的盒子，这个盒子由以下四个部分组成：内容区、内边距、边框宽和外边距。

如下示意：

+------------------------------+
|              Margin             |
|  +-------------------------+  |
|  |            Border          |  |
|  |  +---------------------+  |  |
|  |  |        Padding      |  |  |
|  |  |  +----------------+  |  |  |
|  |  |  |     Content    |  |  |  |
|  |  |  +----------------+  |  |  |
|  |  +---------------------+  |  |
|  +--------------------------+  |
+-------------------------------+

盒子模型的计算方式

  1. 标准盒子模型（默认） ：

    • 盒子的总宽度 = width + padding-left + padding-right + border-left + border-right。
    • 盒子的总高度 = height + padding-top + padding-bottom + border-top + border-bottom。

  2. 替代盒子模型（box-sizing: border-box） ：

    • 盒子的总宽度和高度由 width 和 height 直接决定，内边距和边框会挤占内容区的空间。
    • 盒子的总宽度 = width。
    • 盒子的总高度 = height。

 2.对BFC的理解

BFC（Block Formatting Context，块级格式化上下文） 是 CSS 中的一种布局机制，它决定了元素如何布局以及如何与其他元素交互。BFC 是一个独立的渲染区域，内部的元素不会影响到外部的元素。

BFC 的特性
  1. 内部元素垂直排列：
    • BFC 内部的块级元素会按照垂直方向一个接一个地排列。
  2. 外边距重叠：
    • BFC 内部元素的外边距不会与外部元素的外边距重叠。
  3. 包含浮动元素：
    • BFC 会包含其内部的所有浮动元素，避免父元素高度塌陷。
  4. 阻止元素被浮动元素覆盖：
    • BFC 区域不会与浮动元素重叠。
如何创建 BFC

以下 CSS 属性可以触发 BFC：

  1. 根元素（<html>） ：
    • 根元素本身就是一个 BFC。
  2. 浮动元素（float 不为 none） ：
    • 例如 float: left 或 float: right。
  3. 绝对定位元素（position 为 absolute 或 fixed） 。
  4. display 为 inline-block、table-cell、table-caption、flex、grid 等。
  5. overflow 不为 visible ：
    • 例如 overflow: hidden、overflow: auto、overflow: scroll。
BFC 的应用场景

  1. 解决外边距重叠（Margin Collapse）

  2. 清除浮动（Clear Float）

  3. 阻止元素被浮动元素覆盖

  4. 实现自适应两栏布局

3.如何实现两栏布局 且右侧自适应（三栏 中间自适应）

方法 1: 浮动 + BFC（三栏适用）

通过浮动左栏，并为右栏创建 BFC，使其自适应宽度。

<style>
    .box{
        height: 200px;
    }
    .left {
        float: left;
        width: 100px;
        height: 100px;
        background-color: #db9f9f;
    }
    .right {
        overflow: hidden;
        height: 100px;
        background-color: #a9dc1a;
    }
 </style>
 <body>
 <div class="box">
    <div class="left"> </div>
    <div class="right"> </div>
 </div>
 </body>

特点

  • 兼容性好，支持 IE6+。
  • 右侧栏会自动填充剩余空间。
方法 2: Flexbox 布局（三栏适用）

使用 Flexbox 布局，让右侧栏自动占据剩余空间。

<style>
    .box{
        display: flex;
        height: 200px;
    }
    .left {
        width: 100px;
        background-color: #db9f9f;
    }
    .right {
        flex: 1; 
        background-color: #a9dc1a;
    }
 </style>
 <body>
 <div class="box">
    <div class="left"> </div>
    <div class="right"> </div>
 </div>
 </body>

特点

  • 代码简洁，易于理解。
  • 需要现代浏览器支持（IE10+）。
方法 3: Grid 布局

使用 CSS Grid 布局，定义列宽并让右侧栏自动填充。

.container {
    display: grid; /* 启用 Grid 布局 */
    grid-template-columns: 200px 1fr; /* 左栏固定宽度，右栏自适应 */
}

.left {
    background: #f0f0f0;
}

.right {
    background: #e0e0e0;
}

特点

  • 功能强大，适合复杂布局。
  • 需要现代浏览器支持（IE11+）。

三栏最外层CSS需设置：

grid-template-columns: 200px 1fr 200px; /* 左右栏固定宽度，中间栏自适应 */

4.CSS画三角形

 在 CSS 中，可以通过 边框（border） 的技巧来绘制三角形。这种方法利用了边框的特性：当元素的宽度和高度为 0 时，边框会以对角线的方式相交，从而形成三角形。

实现原理
  • 将元素的宽度和高度设置为 0。
  • 通过设置不同方向的边框宽度和颜色，形成三角形。
.triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    /* 向上三角形-bottom */
    /* 向下三角形-top    */
    border-bottom: 100px solid red;
}

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布