前端面试题——CSS 面试题

code_YuJun
79 阅读4分钟

盒模型宽度计算

<style type="text/css">
    #div1 {
        width: 100px;
        padding: 10px;
        border: 1px solid #ccc;
        margin: 10px;
    }
</style>
<body>
    <div id="div1">
        this is div1
    </div>
</body>
  • offsetWidth = (内容宽度 + 内边距 + 边框)，无外边距 122px
  • 如果box-sizing: border-box;，offsetWidth = width = 100px

margin纵向重叠

    <style type="text/css">
        p {
            font-size: 16px;
            line-height: 1;
            margin-top: 10px;
            margin-bottom: 15px;
        }
    </style>
    <p>AAA</p>
    <p></p>
    <p></p>
    <p></p>
    <p>BBB</p>

infoflow 2025-12-07 14-01-48.png

margin 负值

  • margin-top、margin-left 负值：元素向上、向左移动。
  • margin-right 负值，右侧元素左移，自身不受影响。
  • margin-bottom 负值，下边元素上移，自身不受影响。

BFC理解与应用

概念：块级格式化上下文，是一个独立的渲染区域，内部元素的渲染不会影响边界以外的元素。

形成条件

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

常见应用：

  • 清除浮动
    <style type="text/css">
        .container {
            background-color: #f1f1f1;
        }
        .left {
            float: left;
        }
        .bfc {
            overflow: hidden; /* 触发元素 BFC */
        }
    </style>
    <div class="container bfc">
        <!-- 如果外部容器没有 bfc，下面这个图片会浮动起来，给容器设置 bfc 之后，不会脱离容器 -->
        <img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/>
        <p class="bfc">某一段文字……</p>
    </div>

infoflow 2025-12-07 14-21-11.png

float 布局(TODO)

圣杯布局、双飞翼布局 目的：

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

圣杯布局、双飞翼布局技术总结：

  1. 使用 float 布局
  2. 两侧使用 margin 负值，以便和中间内容横向重叠
  3. 防止中间内容被两侧覆盖，一个用 padding 一个用 margin
  • 圣杯布局
    <style type="text/css">
        body {
            min-width: 550px;
        }
        #header {
            text-align: center;
            background-color: #f1f1f1;
        }

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

        #center {
            background-color: #ccc;
            width: 100%;
        }
        #left {
            position: relative;
            background-color: yellow;
            width: 200px;
            margin-left: -100%;
            right: 200px;
        }
        #right {
            background-color: red;
            width: 150px;
            margin-right: -150px;
        }

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

        /* 手写 clearfix */
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }
    </style>
    <div id="header">this is header</div>
    <div id="container" class="clearfix">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
    </div>
    <div id="footer">this is footer</div>
  • 双飞翼布局
    <style type="text/css">
        body {
            min-width: 550px;
        }
        .col {
            float: left;
        }

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

        #left {
            width: 190px;
            height: 200px;
            background-color: #0000FF;
            margin-left: -100%;
        }
        #right {
            width: 190px;
            height: 200px;
            background-color: #FF0000;
            margin-left: -190px;
        }
    </style>
    <div id="main" class="col">
        <div id="main-wrap">
            this is main
        </div>
    </div>
    <div id="left" class="col">
        this is left
    </div>
    <div id="right" class="col">
        this is right
    </div>

色子

    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            border: 2px solid #ccc;
            border-radius: 10px;
            padding: 20px;

            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>
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>

定位

  • absolute 依据最近一层的定位元素定位(fixed、absolute、relative)，如果没有找到，就相对 body 定位。
  • relative 依据自身定位，对外界元素没有影响。

水平居中

  1. inline 元素：text-align: center
  2. block 元素margin: auto
  3. absolute left: 50% + margin-left 负值
    <style type="text/css">
        .container {
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
        }
        .item {
            background-color: #ccc;
        }
        .container-1 {
            text-align: center;
        }
        .container-2 .item {
            width: 500px;
            margin: auto;
        }
        .container-3 {
            position: relative;
            height: 100px;
        }
        .container-3 .item {
            width: 300px;
            height: 100px;
            position: absolute;
            left: 50%;
            margin-left: -150px;
        }
    </style>
    <div class="container container-1">
        <span>一段文字</span>
    </div>
    <div class="container container-2">
        <div class="item">
            this is block item
        </div>
    </div>
    <div class="container container-3">
        <div class="item">
            this is absolute item
        </div>
    </div>

垂直居中

  1. inline 元素：line-height 值等于 height值
  2. absolute 元素：top:50% + margin-top 负值
  3. absolute 元素：transform(-50%,-50%)
  4. absolute 元素：top,left,bottom,right=0 + margin:auto
    <style type="text/css">
        .container {
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
            height: 200px;
        }
        .item {
            background-color: #ccc;
        }

        .container-1{
            text-align: center;
            line-height: 200px;
            height: 200px;
        }

        .container-2 {
            position: relative;
        }
        .container-2 .item {
            width: 300px;
            height: 100px;
            position: absolute;
            left: 50%;
            margin-left: -150px;
            top: 50%;
            margin-top: -50px;
        }

        .container-3 {
            position: relative;
        }
        .container-3 .item {
            width: 200px;
            height: 80px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%)
        }

        .container-4 {
            position: relative;
        }
        .container-4 .item {
            width: 100px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>
    <div class="container container-1">
        <span>一段文字</span>
    </div>
    <div class="container container-2">
        <div class="item">
            this is item
        </div>
    </div>
    <div class="container container-3">
        <div class="item">
            this is item
        </div>
    </div>
    <div class="container container-4">
        <div class="item">
            this is item
        </div>
    </div>

line-height 继承问题

  • 具体数值：则继承该值
  • 比例：继承该比例
  • 百分比：继承计算出来的值（考点）
    <style type="text/css">
        body {
            font-size: 20px;
            line-height: 200%;
        }
        p {
            /* 这里继承的 line-height 是 40px */
            background-color: #ccc;
            font-size: 16px;
        }
    </style>
    <p>这是一行文字</p>

rem

    <style type="text/css">
        html {
            font-size: 100px;
        }
        div {
            background-color: #ccc;
            margin-top: 10px;
            font-size: 0.16rem;
        }
    </style>
    <p style="font-size: 0.1rem">rem 1</p>
    <p style="font-size: 0.2rem">rem 1</p>
    <p style="font-size: 0.3rem">rem 1</p>

    <div style="width: 1rem;">
        this is div1
    </div>
    <div style="width: 2rem;">
        this is div2
    </div>
    <div style="width: 3rem;">
        this is div3
    </div>

响应式布局

    <style type="text/css">
        @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;
            background-color: #ccc;
        }
    </style>
    <div id="div1">
        this is div
    </div>

vw vh

  • 屏幕高度：window.screen.height
  • 网页视口高度：window.innerHeight
  • body高度document.body.clientHeight
  • window.innerHeight === 100vh
  • window.innerWidth === 100vw
  • vh = window.innerHeight * 1/100
  • vw = window.innerWidth * 1/100
  • vmax = max(vh,vw)
  • vmin = min(vh,vw) infoflow 2025-12-07 18-25-00.png
avatar
文章
阅读
粉丝