页面布局

注意方案多样性、各自原理、各自优缺点、如果不定高呢、兼容性如何

三栏自适应布局,左右两侧300px,中间宽度自适应

(1) 给出5种方案

• 方案一: float (左右浮动,中间不用给宽,设置margin左右留出位置)

html部分,center放到后面

        <section class="wrapper">

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

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

            <div class="content">content</div>

        </section>

css部分

        .wrapper {

            height: 100px;

        }

        .left {

            float: left;

            width: 300px;

            height: 100%;

            background: red;

        }

        .right {

            float: right;

            width: 300px;

            height: 100%;

            background: yellow;

        }

        .content {

            background: skyblue;

            height: 100%;

            margin: 0 300px;

        }

• 方案二: position定位 (中间设置left 300 right 300 ,宽度就自适应了)

html不变

        <section class="wrapper">

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

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

            <div class="content">content</div>

        </section>

css部分

        .wrapper {

            position: relative;

            height: 100px;

        }

        .left {

            position: absolute;

            left: 0;

            width: 300px;

            height: 100%;

            background: red;

        }

        .right {

            position: absolute;

            right: 0;

            width: 300px;

            height: 100%;

            background: yellow;

        }

        .content {

            position: absolute;

            left: 300px;

            right: 300px;

            background: skyblue;

            height: 100%;

        }

• 方案三: flex伸缩布局

html不变

        <section class="wrapper">

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

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

            <div class="content">content</div>

        </section>

css部分

        .wrapper {

            display: flex;

            height: 100px;

        }

        .left {

            width: 300px;

            height: 100%;

            background: red;

        }

        .right {

            width: 300px;

            height: 100%;

            background: yellow;

        }

        .content {

            flex: 1;

            background: skyblue;

            height: 100%;

        }

• 方案四: 表格布局 (设置父元素为display:table,子元素都是display:table-cell;然后给两边设置width,中间不设置就自动了,记得父元素给width:100%)

html部分,将center改到中间位置

        <section class="wrapper">

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

            <div class="content">content</div>

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

        </section>

css部分

       .wrapper {

            display: table;

            width: 100%;

            height: 100px;

        }

        .left {

            display: table-cell;

            width: 300px;

            height: 100%;

            background: red;

        }

        .right {

            display: table-cell;

            width: 300px;

            height: 100%;

            background: yellow;

        }

        .content {

            display: table-cell;

            background: skyblue;

            height: 100%;

        }

• 方案五: 网格布局 Grid第一个专门为解决布局问题而创建的CSS模块 (设置容器类型,然后设置列宽和行高)

html部分不变,center居中

        <section class="wrapper">

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

            <div class="content">content</div>

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

        </section>

css部分十分简洁

        .wrapper {

            display: grid;

            width: 100%;

            grid-template-rows: 200px 100px 10px;

            grid-template-columns: 300px auto 300px;

        }

        .left {

            background: red;

        }

        .right {

            background: yellow;

        }

        .content {

            background: skyblue;

        }

(2) 各自的优缺点。

方案一、方案二:

float和position方案的有点是兼容性好,因为都是比较老的解决方案了,
缺点是float之后需要清除浮动造成的影响,
定位的话就是绝对定位之后脱离文档流了,你要注意用position:relative包裹一下

方案三:

flex是目前移动端主流的方案,css的语法,缺点就是IE8以下不支持。

方案四:

语义化不太好,

方案五:

有严重的兼容性问题

(3) 如果不定高,哪些方案会有问题

如果不定高float / 定位的方案会有问题

三栏自适应布局,上下固定,中间高度自适应 (自适应的地方设置top300 bottom300,高度就自适应了)

方案一: 定位

html

    <section class="wrapper">

        <div class="top">top</div>

        <div class="content">content</div>

        <div class="bottom">bottom</div>

    </section>

css

        .wrapper {

            height: 800px;

            position: relative;

        }

        .top {

            position: absolute;

            top: 0;

            height: 100px;

            width: 100%;

            background: red;

        }

        .bottom {

            position: absolute;

            bottom: 0 ;

            height: 100px;

            width: 100%;

            background: blue;

        }

        .content {

            position: absolute;

            top: 100px;

            bottom: 100px;

            width: 100%;

            background: skyblue;

        }

方案二: flex布局

html

    <section class="wrapper">

        <div class="top">top</div>

        <div class="content">content</div>

        <div class="bottom">bottom</div>

    </section>

css

        .wrapper {

            display: flex;

            height: 700px;

            flex-direction: column;

        }

        .top {

            height: 100px;

            background: red;

        }

        .bottom {

            height: 100px;

            background: blue;

        }

        .content {

            flex: 1;

            background: skyblue;

        }

方案三: 网格布局grid (设置grid-template-rows: 300px auto 300px)

html不变

    <section class="wrapper">

        <div class="top">top</div>

        <div class="content">content</div>

        <div class="bottom">bottom</div>

    </section>

css

      .wrapper {

            display: grid;

            height: 700px;

            grid-template-rows: 100px auto 100px;

        }

        .top {

            background: red;

        }

        .bottom {

            background: blue;

        }

        .content {

            background: skyblue;

        }

两栏自适应,右侧固定,左侧自适应

方案一: 利用BFC的渲染规则,BFC不会和浮动的元素互相重叠
html

    <section class="wrapper">

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

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

    </section>

css 避免左侧侵入到右侧,给左侧div创建一个BFC,因为BFC的渲染机制就是独立的容器,不会和浮动的元素重叠

        .left {

            height: 200px;

            background: red;

            overflow: hidden;

        }

        .right {

            float: right;

            width: 300px;

            background: blue;

        }

方案二: 定位

html

    <section class="wrapper">

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

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

    </section>

css

        .wrapper {

            position: relative;

        }

        .left {

            position: absolute;

            left: 0;

            right: 300px;

            background: red;

        }

        .right {

            position: absolute;

            width: 300px;

            right: 0;

            background: blue;

        }

方案三: flex

html

    <section class="wrapper">

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

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

    </section>

css

      .wrapper {

            display: flex;

        }

        .left {

            flex: 1;

            background: red;

        }

        .right {

            width: 300px;

            background: blue;

        }

方案四: 表格布局,注意给父元素表格要设置width:100%

html

    <section class="wrapper">

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

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

    </section>

css

        .wrapper {

            display: table;

            width: 100%;

        }

        .left {

            display: table-cell;

            background: red;

        }

        .right {

            display: table-cell;

            width: 300px;

            background: blue;

        }

方案五: grid网格布局

css

        .wrapper {

            display: grid;

            grid-template-columns: auto 300px;

        }

        .left {

            background: red;

        }

        .right {

            background: blue;

        }

html

<section class="wrapper">

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

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

    </section>

两栏自适应,上侧固定,下侧自适应

方案一: 定位

设置content部分的top: 100px botton: 0

html

        <section class="wrapper">

            <div class="top">top</div>

            <div class="content">content</div>

        </section>

css

        .wrapper {

            position: relative;

            height: 100%;

            width: 100%;

        }

        .top {

            position: absolute;

            top: 0;

            height: 100px;

            background: red;

            width: 100%;

        }

        .content {

            position: absolute;

            width: 100%;

            top: 100px;

            bottom: 0;

            background: skyblue;

        }

方案二: flex

top高度100px,然后content设置flex: 1

html

        <section class="wrapper">

            <div class="top">top</div>

            <div class="content">content</div>

        </section>

css

               display: flex;

               height: 800px;

           }

           .top {

               height: 100px;

               background: red;

           }

           .content {

               flex: 1;

               background: skyblue;

           }

方案三: grid网格布局

思路,就是设置display:grid后 设置列宽或者行高,有多少列就设置多少个参数,多少行就设多少参数。

html

     <section class="wrapper">

            <div class="top">top</div>

            <div class="content">content</div>

        </section>

css

     .wrapper {

            display: grid;

            height: 800px;

            grid-template-rows: 100px auto;

        }

        .top {

            background: red;

        }

        .content {

            background: skyblue;

        }