CSS面试题

最新推荐文章于 2025-08-18 20:44:42 发布
原创 最新推荐文章于 2025-08-18 20:44:42 发布 · 219 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #面试 #html

一、布局

1. 盒子模型的宽度如何计算？

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型</title>
    <style>
        #box1 {
            width: 100px;
            padding: 10px;
            border: 1px solid #000;
            margin: 10px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div id="box1">box1</div>
</body>

</html>

  • offsetWidth = ( 内容宽度 + 内边距 + 边框 )，无外边距。
  • 这里的offsetWidth是 122px。

  • 补充：如果让 offsetWidth 等于 100px ，该如何做？
  • 添加： box-sizing: border-box;

2. margin 纵向重叠的问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>margin 纵向重叠</title>
        <!-- 小米和苹果之间的距离是多少？ -->
        <style>
            p {
                background-color: green;
                margin-top: 10px;
                margin-bottom: 20px;
            }
        </style>
    </head>
    <body>
        <p>小米</p>
        <p></p>
        <p></p>
        <p></p>
        <p>苹果</p>
    </body>
</html>

总结：

  • 相邻元素的 margin-top 和 margin-bottom 会发生重叠，取两者的最大值作为它们之间的距离，故这里小米与苹果的距离为 20 px。
  • 空白内容的 <p></p> 也会重叠。

3. margin 负值的问题

3.1 测试 margin top bottom 的负数情况

  • 没有添加margin时：

  • 若给 item 1 添加 margin-top: -10px;

  • 若给 item 1 添加 margin-bottom: -10px;

3.2 测试 margin left right 的负数情况

  • 没有添加margin时：

  • 若给 item 1 添加 margin-left: -10px;

  • 若给 item 1 添加 margin-right: -10px;

总结：

  • margin-top 和 margin-left 负值，元素向上、向左移动。
  • margin-right 设置负值不会产生位移，只会减小元素供CSS读取的宽度。
  • margin-bottom 设置负值不会产生位移，只会减小元素供CSS读取的高度。

4. BFC 理解和应用

4.1 什么是 BFC？如何应用？

  • Block format context ，块级格式化上下文。
  • 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。

4.2 形成 BFC 的常见条件

  • float 不是 none。
  • position 是 absolute 或 fixed。
  • overflow 不是 visible。
  • display 是 flex inline-block 等。

4.3 BFC 的常见应用

  • 清除浮动

详细解释：BFC的形成条件和特性分析 - 简书，BFC 形成条件 - 孟繁贵 - 博客园 

5. float 布局的问题，以及 clearfix

5.1 圣杯布局和双飞翼布局的目的：

  1. 三栏布局，中间一栏最先加载和渲染（内容最重要）
  2. 两侧内容固定，中间内容随着宽度自适应
  3. 一般用于 PC 网页

5.2 如何实现圣杯布局和双飞翼布局

        圣杯布局：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-sacle=1.0">
    <title>圣杯布局</title>
    <style>
        body {
            min-width: 550px;
        }

        #header {
            text-align: center;
            background-color: #f1f1f1;
        }

        #container {
            padding-left: 200px;
            padding-right: 150px;
        }

        #container .column {
            float: left;
        }

        #center {
            width: 100%;
            background-color: #ccc;
        }

        #left {
            position: relative;
            width: 200px;
            background-color: aqua;
            /* 相对父容器宽度的 100% */
            margin-left: -100%;
            right: 200px;
        }

        #right {
            width: 150px;
            background-color: blueviolet;
            margin-right: -150px;
        }

        #footer {
            text-align: center;
            background-color: #f1f1f1;
        }

        /* 清除浮动 */
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }
    </style>
</head>

<body>
    <div id="header">header</div>
    <div id="container" class="clearfix">
        <div id="center" class="column">center</div>
        <div id="left" class="column">left</div>
        <div id="right" class="column">right</div>
    </div>
    <div id="footer">footer</div>
</body>

</html>

        双飞翼布局：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼布局</title>
    <style>
        body {
            min-width: 550px;
        }

        .col {
            float: left;
        }

        #main {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
        #main-wrap {
            margin: 0 190px;
        }

        #left {
            width: 190px;
            height: 200px;
            background-color: rgb(0, 255, 64);
            margin-left: -100%;
        }

        #right {
            width: 190px;
            height: 200px;
            background-color: #f00;
            margin-left: -190px;
        }
    </style>
</head>

<body>
    <div id="main" class="col">
        <div id="main-wrap">
            main
        </div>
    </div>
    <div id="left" class="col">left</div>
    <div id="right" class="col">right</div>
</body>

</html>

5.3 圣杯布局和双飞翼布局的技术总结

  1. 使用 float 布局。
  2. 两侧使用 margin 负值，以便和中间内容横向重叠。
  3. 防止中间内容被两侧覆盖，一个用 padding 一个用 margin。

5.4 手写 clearfix

/* 手写 clearfix */
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
.clearfix {
    /* 兼容 IE 低版本 */
    *zoom: 1; 
}
  • :after/::after的异同：

        :after/::after和:before/::before的异同-优快云博客

  • 关于使用 display:block与display:table 的区别：

        CSS中display:block与display:table在参与处理BFC时的区别优快云博客

6. flex 布局的问题

6.1 常用语法回顾

  • 容器属性：flex-direction（决定主轴的方向）、justify-content（主轴上的对齐）、flex-wrap（是否换行）、align-items（交叉轴上如何对齐）。
  • 项目属性：align-self（该项目在交叉轴的对齐方式）。
  • 详细介绍地址：flex布局--入门_小豪boy的博客-优快云博客

6.2 flex 实现一个三点的色子

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex 画骰子</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 2px solid #ccc;
            border-radius: 10px;
            padding: 20px;
            /* flex 布局 */
            display: flex;
            /* 两端对齐 */
            justify-content: space-between;
        }
        .item {
            /* 点的样式 */
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #666;
        }
        .item:nth-child(2) {
            /* 第二项居中对齐 */
            align-self: center;
        }
        .item:nth-child(3) {
            /* 第三项尾对齐 */
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
</body>

</html>

二、定位

1. absolute 和 relative 分别依据什么定位？

  • relative 依据自身定位。
  • absolute 依据最近一层的定位元素定位。
  • 定位元素：
    • absolute relative fixed
    • body

2. 居中对齐有哪些实现方式？

2.1 水平居中

文本水平居中：

  • 文本内容居中：text-align: center；

div水平居中：

  • 有固定宽度：margin: 0 auto；
  • absolute 定位，知道元素宽度：left: 50% ；margin-left：负宽度的一半；
  • absolute 定位，元素宽度未知：left: 50%；transform：translateX(-50%);
  • absolute 定位：left: 0; right: 0; margin: 0 auto;
  • flex布局：justify-content: center;

2.2 垂直居中

文本垂直居中：

  • 设置行高等于所在区域的高度：height: 200px; line-height: 200px;
  • vertical-align实现文本的垂直居中：display:table-cell; vertical-align:middle;

div垂直居中：

  • absolute 定位，知道元素高度：top: 50%；margin-top：负高度的一半；
  • absolute 定位，元素高度未知：top: 50%；transform: translateY(-50%)；
  • absolute 定位：top: 0; bottom: 0; margin: auto 0;
  • flex布局：align-items:center;

2.3 水平垂直居中

文本水平垂直居中：

  • text-align: center；height: 200px; line-height: 200px;
  • text-align: center；display:table-cell; vertical-align:middle;

div水平垂直居中：

  • absolute 定位，知道元素宽高：left: 50% ；margin-left：负宽度的一半；top: 50%；margin-top：负高度的一半；
  • absolute 定位，元素宽高未知：left: 50%； top: 50%；transform: translate(-50%，-50%)；
  • absolute 定位：left: 0; right: 0; top: 0; bottom: 0; margin: auto;
  • flex布局：justify-content: center; align-items:center;

三、图文样式

1. line-height 如何继承？

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>line-height 如何继承</title>
    <!-- 如下代码，p 标签的行高将会是多少？ -->
    <style>
        body {
            font-size: 20px;
            line-height: 200%;
        }

        p {
            font-size: 16px;
        }
    </style>
</head>

<body>
    <p>666</p>
</body>

</html>
  • 写具体数值，如 30px ，则继承该值（比较好理解）。
  • 写比例，如 2 ，则继承该比例（如这里p标签的font-size:16px，所以line-height为16*2=32px）
  • 写百分比，如 200% ，则继承计算出来的值，即 20*200%=40px（考点）

四、响应式

1. rem 是什么？

  • rem 是一个长度单位。
  • em ，相对长度单位，相对于父元素，不常用。
  • px ，绝对长度单位，最常用。
  • rem ，相对长度单位，相对于根元素，常用于响应式布局。

2. 响应式布局的常见方案？

  1. media-query，根据不同的屏幕宽度设置根元素 font-size。
  2. rem，基于根元素的相对单位。
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局</title>
    <style>
        @media only screen and (max-width: 374px) {

            /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
            html {
                font-size: 86px;
            }
        }

        @media only screen and (min-width: 375px) and (max-width: 413px) {

            /* iphone6/7/8 和 iphone x */
            html {
                font-size: 100px;
            }
        }

        @media only screen and (min-width: 414px) {

            /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
            html {
                font-size: 110px;
            }
        }

        body {
            font-size: 0.16rem;
        }

        #div1 {
            width: 1rem;
            height: 1rem;
            background-color: gold;
        }
    </style>
</head>

<body>
    <div id="div1"></div>
</body>

</html>

  • rem的弊端： “阶梯” 性。

网页视口尺寸：

  • window.screen.height  // 屏幕高度
  • window.innerHeight     // 网页视口高度
  • document.body.clientHeight   // body 高度

  • vw 网页视口宽度的1/100。
  • vh 网页视口高度的1/100。
  • vmax 取两者（vw/vh）最大值；vmin 取两者最小值。
css面试题
github_36510643的博客
02-10 874
【代码】css面试题。
【CSS面试题】BFC
weixin_63681863的博客
03-02 761
BFC全称是Block Formatting Context，意思就是块级格式化上下文。你可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。
CSS面试题汇总
前端小巷子的博客
05-16 1006
在前端面试中，CSS 相关的知识点往往是面试官重点考察的内容。为了帮助大家更好地准备面试，本文汇总了一些常见的 CSS 面试题，并提供了详细的解答和分析。
html和css面试题
weixin_59152833的博客
10-29 1422
外边距重叠（ margin-collapse），在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。解决外边距重叠的问题：1、开启元素的BFC属性，2、在元素的前面加一个空的table3、增加透明的边框。
2024 css 面试题带答案，万字总结
simahe的专栏
11-12 2822
2024 css 面试题带答案，万字总结。
CSS面试题整理汇总
山雀的博客
03-13 7730
CSS面试题汇总
10个前端最新热点面试中常见的CSS面试题及其答案与解析
man2017的博客
04-23 1623
综上所述，CSS Grid布局是一种强大且灵活的布局工具，它革新了网页设计的方式，使开发者能够更高效、直观地创建复杂、响应式的网页布局，提升了代码的可维护性和性能。它提供了对网页元素在水平和垂直方向上的精细控制，彻底改变了我们对网页布局的传统认知，使开发者能够轻松构建复杂的栅格结构、自适应布局以及非线性设计。属性是CSS的一个新特性，用于指定一个元素的宽高比，确保元素在任何情况下都能保持预设的比例，无需依赖额外的HTML元素或JavaScript。属性用于定义一个剪切路径，允许对元素进行非矩形的形状裁剪。
CSS面试题之BFC
weixin_64534765的博客
05-19 2006
概念：块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。我们先回顾一下之前常规块元素的问题垂直方向上相邻的元素，margin会合并父子关系的情况下，会产生margin塌陷父子关系的情况下，父元素无视浮动元素会产生高度塌陷兄弟关系的情况下，正常元素可能会被浮动元素覆盖（正常元素在浮动元素之后）开启BFC的区域，是一块独立的渲染区域，互不干扰。
2023年CSS面试题集合
LQlove1的博客
03-05 5698
一、H5的新特性有哪些? 二、CSS3的新特性有哪些? 三、如何实现一个盒子水平垂直居中? 方法一：利用定位（常用方法,推荐） 方法二：利用 margin:auto; 方法三：利用 display:table-cell 方法四：利用 display：flex;设置垂直水平都居中 方法五：计算父盒子与子盒子的空间距离(这跟方法一是一个道理) 方法六：利用 transform 四、CSS的盒模型 五、CSS选择器的优先级及CSS权重如何计算? 六、列举 5 个以上的 H5input 元素 type 属性值？
经典的CSS面试题（含答案）
11-04
以下是一些经典的CSS面试题及其详细解答： 1. **什么是CSS？** CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括SVG、MathML等）文档呈现的样式语言。它定义了元素的布局、颜色、字体和其他视觉属性。...
前端面试题库，包含不限于Vue面试题，React面试题，JS面试题，HTTP面试题，工程化面试题，CSS面试题
10-14
6. **CSS面试题**：CSS用于布局和美化网页，面试可能会问到盒模型，布局模式（如Flexbox和Grid），CSS预处理器（如Sass, Less），CSS模块化（如CSS Modules, CSS-in-JS），以及浏览器兼容性问题。 7. **算法面试题*...
html+css面试题
02-10
HTML和CSS是前端开发的基础技术，对于求职者来说，掌握这两项技术是应聘前端职位的前提。以下是从上述提供的文件内容中总结出的知识点： ...掌握这些知识，对于通过HTML和CSS相关的面试题是很有帮助的。
Go语言实战案例:静态资源服务（CSS、JS、图片）
tenkofx的博客
08-15 667
• Gin 提供Static()方法一行就能完成静态文件托管。• 静态文件路径映射和 URL 前缀可以灵活配置。• 结合 HTML 模板，可以很方便地构建完整的前端页面服务。
HTML/CSS 实战知识点总结：从基础到常用效果全解析
最新发布
2401_83662389的博客
08-18 479
本文通过实战案例，系统梳理了 HTML/CSS 的核心知识点，包括标签重置、布局技巧、背景边框应用、交互效果等。这些知识点是前端开发的基础，掌握后可实现常见页面效果（如导航栏、商品卡片、表单等）。实际开发中，需灵活组合这些技巧，结合浏览器兼容性考虑，打造高效、美观的页面。
CSS Houdini 与 React 19 调度器：打造极致流畅的网页体验
chaosweet的博客
08-15 944
Hi，我是前端人类学！今天聊聊真东西：「用 CSS Houdini 和 React 19 新调度器提升网页性能」——这不是标题党，而是前沿技术。接下来 3 分钟，带你了解如何结合使用这两项技术，让你的网页如游戏般丝滑。
HTML第三次作业
2301_81538927的博客
08-13 1213
【代码】html第三次作业。
网格布局 CSS Grid
韩旭不会敲代码吧的博客
08-17 341
网格布局 CSS Grid
【web站点安全开发】任务4：JavaScript与HTML/CSS的完美协作指南
不羁的博客
08-14 971
本文介绍了JavaScript在前端开发中的核心作用及其与HTML、CSS的协作方式。主要内容包括：1. JavaScript语言特性，通过对比表格展示其与Java在类型系统、面向对象、执行方式等方面的本质区别；2. JavaScript在HTML中的使用方法，包括<script>标签的三种放置位置（head/body/外部文件）；3. 四种常用输出方式（alert/write/innerHTML/console.log）；4. 语法特性比较（变量声明、数据类型、函数定义等）等
精选前端CSS面试题解析集锦
资源摘要信息: "前端面试题之Css相关题集.zip" 标题: "前端面试题之Css相关题集.zip" 描述: "前端面试题之Css相关题集" 标签: "前端 css 前端面试题" 文件名称列表: "前端面试题之Css相关题集" 知识点详细说明: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值