前端面试题之CSS布局问题

这与右边固定左边自适应，上固定下自适应是一个道理。

HTML部分

        <div class="father">

            <div class="left"></div>

            <div class="right"></div>

        </div>

1.float布局

            .left {

                width: 200px;

                height: 200px;

                float: left;

                background-color: blue;

            }

            .right {

                margin-left: 200px;

                height: 200px;

                background-color: red;

            }

2.绝对定位

            .father {

                position: relative;

                height: 200px;

            }

            

            .left {

                position:absolute;

                width: 200px;

                height: 100%;

                float: left;

                background-color: blue;

            }



            .right {

                position:absolute;

                height: 100%;

                left:200px;

                right: 0;

                background-color: red;

            }

3.flex布局

            .father {

                height: 300px;

                width: 100%;

                display: flex;

            }



            .left {

                width: 300px;

                height: 100%;

                background-color: blue;

            }



            .right {

                flex: 1;

                height: 100%;

                background-color: red;

            }

三栏布局左右固定中自适应

---

这与左中固定右边自适应，中右固定左边自适应，以及上下固定中间自适应是一个道理

HTML部分

        <div class="father">

            <div class="left"></div>

            <div class="right"></div>

            <div class="main"> </div>

        </div>

1.float布局

        .father{

            height: 50px;

             div{

                height: 100%;

            }

        }



        .left {

            width: 200px;

            float: left;

            background-color: red

        }



        .main {

            margin-left: 200px;

            margin-right: 200px;

            background-color: blue

        }



        .right {

            float: right;

            width: 200px;

            background-color: yellow

        }

2.绝对定位

        .father{

            position: relative;

            height: 50px;

              div{

                position: absolute;

                height: 100%;

            }

        }



        .left {

            left: 0;

            width: 200px;

            background-color: red

        }



        .main {

            left: 200px;

            right: 200px;

            background-color: blue

        }



        .right {

            right: 0;

            width: 200px;

            background-color: yellow

        }

3.flex布局

HTML部分

        <div class="father">

            <div class="left"></div>

            <div class="main"> </div>

            <div class="right"></div>

        </div>

CSS部分

        .father {

            display: flex;

            height: 50px;

             div{

                height: 100%;

            }

        }



        .left {

            width: 200px;

            background-color: red
### 总结

**前端资料汇总**

![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)

*   框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

*   算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯



*   在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

*   要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
    喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！