前端面试题之css

shuzhen779779

于 2021-06-02 15:21:10 发布

阅读量288

点赞数

分类专栏：面试题 css 前端

本文链接：https://blog.csdn.net/Susan_Q/article/details/115095581

版权

面试题同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

本文探讨了四种实现两栏布局的方法，包括双float、margin-left、绝对定位和flex布局，分析了各自的优缺点。此外，展示了如何按优先级顺序加载垂直结构中的div并保持高度适应。最后，详细解释了如何创建一个高度始终为自身宽度一半的div，利用CSS的padding-bottom实现响应式设计。这些技术对于优化网页布局和提升用户体验至关重要。

摘要由CSDN通过智能技术生成

文章目录

高频

高频

1、实现一个两栏布局，左边固定宽度，右边自适应。分析优缺点。

<style>
        html,
        body,
        main {
            height: 100%;
            background-color: #f3f3f3;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .item {
            height: 400px;
        }

        .left {
            background-color: rosybrown
        }

        .right {
            background-color: sandybrown;
        }

        .content {
            background-color: #fff;
        }
   </style>
<body>
        <div class="content">
            <div class="item left"></div>
            <div class="item right"></div>
        </div>
</body>

1、双 float + calc 函数

     <style>
        .content {
            overflow: hidden
        }

        .left {
            float: left;
            width: 200px;
        }

        .right {
            float: left;
            width: calc(100% - 200px);
        }
    </style>

2、float + margin-left
优点：
缺点：交换节点的顺序，不能实现优先加载自适应的内容

 <style>
        .left {
            float: left;
            width: 200px;
        }

        .right {
            margin-left: 200px;
            }
 </style>

3、父元素设置为绝对定位 + 左侧为相对定位 + 左侧margin-left
优点：交换 < div class=“item right”>< /div> < div class=“item left”>< /div>的顺序，可以优先加载加载自适应宽度的div的内容。
缺点：设置左侧为相对定位，脱离文档流，高度超过父元素的高度会遮盖下面的元素，需要设置父元素的overflow属性

<style>
    .content {
            position: relative;
        }

        .left {
            width: 200px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .right {
            margin-left: 200px;
        }
        
    /*调换位置*/
    .left{
         right:0
        }
        
    .right {
         margin-right: 200px;
        }
</style>

4、flex布局
优点：调换位置，只需要父节点设置 flex-direction: row-reverse;
缺点：有兼容性问题，不能兼容ie678等低版本的浏览器

<style>
 .content {
            display: flex;
            /*flex-direction: row-reverse;*/ /*调换位置*/
        }

        .left {
            width: 200px;
        }

        .right {
            flex: 1;
        }
        
    /*调换位置*/
     .content {
            flex-direction: row-reverse;
        }
 </style>

2、实现一个垂直结构，按优先级顺序加载div，并实现对应高度。


优先级2，高度 100px
优先级3，高度自适应
优先级1 ，高度200px

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layout</title>
    <style>
        html,
        body {
            height: 100%;
            background-color: #f3f3f3;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .sec {
            background-color: rosybrown
        }

        .first {
            background-color: sandybrown;
        }

        .final {
            background-color: skyblue;
        }

        .content {
            background-color: #fff;
        }

        .content {
            display: flex;
            flex-direction: column-reverse;
        }

        .sec {
            height: 100px;
        }

        .first {
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="first">
            1
        </div>
        <div>
            <div class="sec">
                2
            </div>
            <div class="final">
                3
            </div>
        </div>
    </div>
</body>

</html>

3、实现一个高度始终是自身宽度的一半的div

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layout</title>
    <style>
        html,
        body {
            height: 100%;
            background-color: #f3f3f3;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .parent {
            width: 100px;
        }

        .content {
            width: 100%;
            padding-bottom: 50%; /* 100%:正方形 */
        }

        .box {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="content">
            <div class="box"></div>
        </div>
    </div>
</body>

</html>