HTML基础知识巩固之页面布局篇

页面布局之三栏布局

题目一.假设高度已知，请写出三栏布局，其中左栏，右栏宽度各位300px，中间自适应，请举出几种解决方案

1、浮动解决方案

浮动布局主要通过在中间层的两边添加2个div，分别为左浮动和右浮动，宽为300px

html代码：            

<section class="layout float">

    <article class="left-right-center"

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

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

        <div class="center">

            <h1>浮动解决方案</h1>

            1、这是浮动解决方案

            2、这是浮动解决方案

        </div>

    </article>

</section>

css代码：

.layout article diV{

      min-height: 100px;
}
.layout.float .left{

float: left;

width: 300px;

background: red;

}

.layout.float .right{

float: right;

width: 300px;

background: blue;

}

.layout.float .center{

background: yellow;

}

效果图如下：

2、绝对定位布局

绝对定位布局主要通过将left right center层分别设置绝对定位position: absolute属性，然后将left和right层分别left和right值设为300px，再让center层left和right的值设为300px，已达到自适应居中布局

html代码：

               <section class="layout absolute">

<article class="left-center-right">

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

<div class="center">

<h2>绝对定位解决方案</h2>

这是三栏布局绝对定位中间部分

这是三栏布局绝对定位中间部分

</div>

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

</article>

</section>

css代码：

                        <style type="text/css">

.layout.absolute .left-center-right>div{

position: absolute;

}

.layout.absolute .left{

left: 0;

width:300px;

background: red;

}

.layout.absolute .center{

left:300px;

right:300px;

background: yellow;

}

.layout.absolute .right{

right: 0;

width: 300px;

background: blue;

}

</style>

3、flex布局

flex布局自适应的主要是实现方法给父容器添加display：flex，然后给center添加flex：1，使中间层自适应。

html代码：

                <section class="layout flexbox">

<article class="left-center-right">

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

<div class="center">

<h1>flex解决方案</h1>

1、这是FLEX解决方案

2、这是FLEX解决方案

</div>

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

</article>

</section>

CSS代码：

                        <style>

.layout.flexbox .left-center-right{

display: flex;

}

.layout.flexbox .left{

width: 300px;

background: red;

}

.layout.flexbox .center{

flex: 1;

background: yellow;

}

.layout.flexbox .right{

width: 300px;

background: blue;

}

</style>

4、表格布局

表格布局父容器指定display为table，每个div的display为table-cell，left和right设置width：300px便可以实现三栏自适应布局

html:

                <section class="layout table">

<article class="left-center-right">

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

<div class="center">

<h1>这是表格布局</h1>

我是表格布局的中间层

我是表格布局的中间层

</div>

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

</article>

</section>

css:

                        <style type="text/css">

.layout.table .left-center-right{

width: 100%;

display: table;

height: 100px;

}

.layout.table .left-center-right>div{

display: table-cell;

}

.layout.table .left{

background: red;

width: 300px;

}

.layout.table .center{

background: yellow;

}

.layout.table .right{

background: #0000FF;

width: 300px;

}

 </style>

5、网格布局

网格布局grid，具体可以在http://www.css88.com/archives/8506了解

给父元素定义display为grid便可以使用网格布局

为了使起成为二维网格，我们需要定义列和行，我们使用grid-template-rows和grid-template-columns定义列和行，在下面的demo中我们可以看到-rows的为一个值，代表定义一行，-columns为三个值代表3列。

                                      grid-template-rows:100px;

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

html：

                    <section class="layout grid">

<article class="left-center-right">

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

<div class="center">

<h1>网格布局解决方案</h1>

这是网格布局解决方案的中间部分

这是网格布局解决方案的中间部分

</div>

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

</article>

</section>

css：

                        < style  media ="screen" >

.layout.grid .left-center-right{

display: grid;

width: 100%;

grid-template-rows:100px;

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

}

.layout.grid .left{

background: #FF0000;

}

.layout.grid .center{

background: #FFFF00;

}

.layout.grid .right{

background: #0000FF;

}

</style>

二、当高度不固定时五种布局的显示方式

由上图我们可以看出，只有表格布局和flex布局会自动将左右两栏一起撑开。

浮动布局可以通过创建BFC来解决