首頁手記 Web自適應布局那些事兒

Web自適應布局那些事兒

標簽：

Html/CSS

前言

最近做了一个项目需要自适应布局，对于萌新的我，就百度，视频，书等学习下，归纳了实现自适应布局各种方式，有什么不足，希望多提意见

自适应布局

浮动布局
定位布局
flex布局
table-cell布局
grid布局

题目：假设高度已知，请写出二栏布局，其中左栏、宽度为160px，中间自适应

image.png

flex布局

html结构，大盒子设置flex，里面设置左右两个小盒子

<body>
    <section class="box">
        <article class="box-left">
        </article>
        <article class="box-right">
            <h1>hello</h1> 
        </article>
    </section></body>

CSS部分

        html * {        //去除浏览器默认边距            margin: 0;            padding: 0;
        }

        .box {            display: flex;            width: 100%;            // height:100vh;    //高度无法自适应，遇到内容过多，会溢出盒子，用下面方法替代
            min-height: 100vh;
            
        }

        .box-left {            width: 160px;
            min-height: 100vh;            
            background: greenyellow;
        }

        .box-right {            // 方法一：            flex: 1;            // 方法二：            width: calc(100% -160px);   // 剩余宽度等于总宽度减去左盒子宽度
            min-height: 100vh;            background: darkcyan;
        }

float 布局，基本就css有些地方改动而已

CSS

.box {
            width: 100%;
            min-height: 100vh;
            max-height: 100%;
        }

        .box-left {            float: left;            //修改地方 
            width: 160px;
            min-height: 100vh;
            max-height: 100%;
            background: greenyellow;
        }

        .box-right {
            min-height: 100vh;
            max-height: 100%;
            background: darkcyan;
        }

定位布局

CSS

        .box {
            width: 100%;
            min-height: 100vh;
            max-height: 100%;
            position: relative;  //修改地方
        }

        .box-left {
            position: absolute;  //修改地方
            left: 0;   //修改地方
            width: 160px;
            min-height: 100vh;
            max-height: 100%;
            background: greenyellow;
        }

        .box-right {
            position: absolute;    //修改地方
            left: 160px;  //修改地方
            right: 0;   //修改地方
            min-height: 100vh;
            max-height: 100%;
            background: darkcyan;
        }

table-cell 布局

CSS

.box {
            width: 100%;
            min-height: 100vh;
            display: table;  //修改地方
        }

        .box>article {
            display: table-cell;  //修改地方
        }

        .box-left {
            width: 160px;
            min-height: 100vh;
            background: greenyellow;
        }

        .box-right {
            min-height: 100vh;
            background: darkcyan;
        }

grid 布局

CSS

.box {
            width: 100%;
            min-height: 100vh;
            display: grid;  //修改地方
            grid-template-columns: 160px auto;   //修改地方
        }
        .box-left {
            background: greenyellow;
        }

        .box-right {
            background: darkcyan;
        }