2024年最新前端面试题之CSS布局问题_h5 form data，大佬推荐

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

4.grid布局（父元素设置，宽高未知）（兼容性ie 10以上支持）

        .father {
            display: grid;
            align-items: center;
            justify-content: center;
            width: 500px;
            height: 500px;
            background-color: red;
        }

5.flex布局（父元素设置，宽高未知）（兼容性ie 11以上支持）

        .father {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 500px;
            height: 500px;
            background-color: red;
        }

6.表格布局（父元素设置，宽高未知）（兼容性较好）

        .father {
            display:table-cell
            text-align: center;
            vertical-align: middle
            width: 500px;
            height: 500px;
            background-color: red;
        }
        .son {
       		display: inline-block;
        }

两栏布局左边固定右边自适应

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

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部分

总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

这里分享一些前端学习笔记：

• html5 / css3 学习笔记

  

• JavaScript 学习笔记

  

• Vue 学习笔记

  

89db6b059151c753196f8f4e9b5.png)

• JavaScript 学习笔记

  

• Vue 学习笔记