Web自适应布局那些事儿

时间 2019-11-30

标签 web 自适应布局那些事儿栏目 HTML 繁體版

原文原文链接

前言

最近作了一个项目须要自适应布局，对于萌新的我，就百度，视频，书等学习下，概括了实现自适应布局各类方式，有什么不足，但愿多提意见css

自适应布局

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

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

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;
        }
复制代码

Web自适应布局那些事儿

前言

自适应布局

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

flex布局

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

CSS部分

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

CSS

定位布局

CSS

table-cell 布局

CSS

grid 布局

CSS

后续：

最近完成项目

顺便开源下这项目源代码

Web自适应布局那些事儿

前言

自适应布局

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

flex布局

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

CSS部分

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

CSS

定位布局

CSS

table-cell 布局

CSS

grid 布局

CSS

后续：

最近完成 项目

顺便开源下这项目源代码

最近完成项目