来自 Web前端 2019-11-08 21:58 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

常见的五种三列布局网上澳门金莎娱乐

前言:本文介绍五种常见的三列布局,主要是两侧定宽,中间自适应,其他情况大同小异。

页面布局

网上澳门金莎娱乐 1

 

题目1:三栏布局,中间自适应,左右两栏固定宽度300px

写出3种方案算是及格
给出5种方案,不管使用哪种方案,最终效果都是:

网上澳门金莎娱乐 2

首先写出html结构:

    <div class="wrapper">
        <div class="left">zuo</div>
        <div class="center">左右两列固定,中间自适应</div>
        <div class="right">you</div>
    </div>

方式一:float

方案一:float

优点:兄弟元素和父元素的浮动影响处理的好的话,就是比较简单,兼容性也比较好。
缺点:浮动是脱离文档流的,常见的问题是清除浮动。清除不好会带来很多问题,比如高度塌陷等。

     .wrapper {
        overflow: hidden;
    }

    .left {
        float: left;

        width: 300px;
        background: pink;
    }

    .right {
        float: right;

        width: 300px;
        background: pink;
    }

    .center {
        margin: 0 300px;

        background: gray;
    }

以上css样式设置完成后,效果是这样子的:

网上澳门金莎娱乐 3

为什么会出现这种情况呢???这是因为
html结构要改成这样:

    <div class="wrapper">
        <div class="left">zuo</div>        
        <div class="right">you</div>
        <div class="center">左右两列固定,中间自适应</div>
    </div>

延伸:你知道哪些清除浮动的方案?每种方案的有什么优缺点?

HTML代码:

方案二:absolute

左右两栏absolute,中间栏设置margin值。
优点:思路简单,不容易出问题
缺点:绝对定位是脱离文档流的,意味着所有的子元素也必须脱离文档流;代码较多,可使用性差。

      .wrapper {
        position:relative;
    }
    .left {
        position:absolute;
        top:0;
        left:0;

        width: 300px;
        background: pink;
    }

    .right {
        position:absolute;
        top:0;
        right:0;

        width: 300px;
        background: pink;
    }
    .center {      
        margin:0 300px;

        background: gray;
    }
<div class="layout-float">
    <div class="left">左边</div>
    <div class="right">右边</div>
  <div class="center">中间</div>

</div>

方案三:flex布局

优点:相对完美的方案。
缺点:不兼容IE8及以下浏览器,而且三栏同时增高。

    .wrapper {
        display:flex;
    }
    .left,.right {
        flex:0 0 300px;

        width: 300px;
        background: pink;
    }
    .center {      
        flex:1;

        background: gray;
    }

注:center要放最后。center这个元素是块级元素,占据一行,如果center放中间,right元素会在下一行向右浮动

方案四:table布局

优点:兼容性好,适用于很多场景。在flex布局不兼容的时候,可以使用table布局。
缺点:处于一行的单元格table-cell会同时增高,有时我们并不想要这种效果。

    .wrapper {
        display:table;
        width:100%;   //撑满整个屏幕的宽
    }
    .wrapper >div{
       display:table-cell;
    }
     .left,.right {
        width: 300px;
        background: pink;
    }
    .center {
        background: gray;
    }

CSS代码:

方案五:grid布局

优点:新的技术,代码量简化
缺点:浏览器对其支持很弱,而且三栏同时增高

步骤:

  • 设置display的值为grid,声明容器是一个网格容器
  • 设置网格行和列,我们可以通过grid-template-columns和grid-template-rows
    教程--->>>CSS Grid布局:快速入门
    .wrapper {
        display: grid;
        grid-template-rows: 100px;
        grid-template-columns: 300px auto 300px;
    }
     .left, .right {
        background: pink;
    }
    .center {
        background: gray;
    }
<style>
    .left {
        float: left;
        width: 300px;
        background-color: blue;
    }
    .right {
        float: right;
        width: 300px;
        background-color: blue;
    }
     .center {
        background-color: red;
    }
</style>            

延伸提问

答完题后,面试官会延伸提问
1)5中方案各自的优缺点
2)如果考虑纵向,哪种方案就不再适用

  • 当高度未知时
    使用flex布局、table布局和grid布局,当我们中间栏的高度随着内容增加时,其他两栏也同时增高。效果:
![](https://upload-images.jianshu.io/upload_images/8059334-e6ce25e9e32e2280.png)
  • 当高度已知时
    flex布局、table布局仍然会同时增高,而grid布局中间的内容会溢出来,效果:
![](https://upload-images.jianshu.io/upload_images/8059334-1bff532bf1d039a2.png)

3)5种方案的兼容性,哪种是最优的方案?
显然是flex布局、table布局。

方式二:table布局,非HTML中<table>标签

题目2:上下两栏固定,中间滚动

上下高度固定,中间自适应:APP用的非常多,上边是header,中间是内容,随着内容的增多会出现滚动条,下边是导航,比如美团、淘宝、京东。
先来看一下效果:

网上澳门金莎娱乐 4

首先写出html结构:

    <div class="wrapper">
        <div class="header">header</div>
        <div class="content">
            上下两栏固定,中间滚动<br/>
            上下两栏固定,中间滚动<br/>
            <!-- 此处省略n个-->
        </div>
        <div class="footer">footer</div>
    </div>

HTML代码:

方案一:使用position

    .wrapper {
        position:relative;
        height: 100%;
    }
    .header {
        height: 100px;
        background: pink;
    }
    .content {
        position:absolute;
        top:100px;
        bottom:25px;
        overflow: auto;

        width:100%;
        background: green;
    }
    .footer {
        position:fixed;
        left:0;
        bottom:0;

        width:100%;
        height: 25px;
        background: grey;
    }

这里需要说明的是:凡是给元素position为absolute/fixed和float后,元素脱离文档流后会导致无法计算自己的宽度和高度,display属性会隐式的变为inline-block,所以需要设置width。注意一点的是,position:relative并不能够改变display的类型。
如果不支持 position:fixed ,可以用position:absolute;来替代。

<div class="layout-table">
    <div class="left"></div>
    <div class="center">这是中间</div>
    <div class="right"></div>
</div>

方案二:flex布局

    .wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .header {
        height: 100px;

        background: pink;
    }
    .content {
        flex: 1;
        overflow: auto;//滚动条

        background: green;
    }
    .footer {
        height: 25px;

        background: grey;
    }

CSS代码:

方案三:grid布局

    .wrapper {
        display:grid;
        grid-template-rows: 100px auto 25px; 
        height: 100%;
    }
    .header {
        background: pink;
    }
    .content {
        overflow: auto;        
        background: green;
    }
    .footer {        
        background: grey;
    }
<style>
    .layout-table{
        width: 100%;
        display: table;
        height: 100px;
    }
    .layout-table div {
        display: table-cell;
    }
    .left {
        width: 300px;
        background-color: blue;
    }
    .right {
        width: 300px;
        background-color: red;
    }
    .center {
        background-color: blue;
    }
</style>    

方案四:calc()函数

你认识calc()函数吗?这货其实就是一个计算长度值的。

    .wrapper {
        height: 100%;
    }

    .header {
        height: 100px;
        background: pink;
    }

    .content {
        height: calc(100% - 100px - 25px);
        overflow: auto;
        background: green;
    }

    .footer {
        height: 25px;
        background: grey;
    }

 

CSS盒模型:谈谈你对盒模型的认识

网上澳门金莎娱乐 5

方式三:flex布局

考点1:基本概念:标准盒模型+IE盒模型

概念:在CSS中,文档中的每个HTML元素可以被看作一个盒子,这个模型描述了一个元素所占用的空间。它包括:content(内容)、padding(填充,内容到边框的距离)、border(边框)、margin(外边距)几个部分。

盒子模型分为两类:W3C标准盒子模型和IE盒子模型

box-sizing属性的作用
在IE8及以下的浏览器中只支持IE盒模型,在IE8+及其他主流浏览器中,通过CSS3新增的box-sizing属性可以设置浏览器的盒模型。box-sizing属性的默认值是content-box,即W3C标准盒模型;而将box-sizing值设置为border-box时,则会更改为IE盒模型。使用box-sizing属性能够统一IE和非IE浏览器之间的差异。

网上澳门金莎娱乐 6

网上澳门金莎娱乐 7

网上澳门金莎娱乐 8

HTML代码:

考点2:标准盒模型和IE盒模型的区别

计算width和height的不同:

  • 标准模型的width和height,指的是content的宽度和高度,不包含padding、border、margin
  • IE模型的width和height,指的是content+padding+border的宽度和高度
<div class="layout-flexbox">
    <div class="left"></div>
    <div class="center">这是中间</div>
    <div class="right"></div>
</div>

考点3:CSS如何设置这两种模型?

一个元素默认的模型是什么?如何设置为另一种?
CSS3的一个box-sizing属性:
语法:box-sizing:content-box | border-box | inherit:
content-box是标准模型,浏览器默认的模型。
border-box是IE模型。

 

考点4:JS如何设置获取盒模型对应的宽和高

  • 方法一:dom节点.style.width/height
    获取这个dom节点,然后根据它的style属性来拿到,这种方法有一定的局限性:
    只能获取CSS样式是内联式的,<style>嵌入式和通过link引入的外联式均无法获取到的

  • 方法二:dom节点.currentStyle.width/height
    不管CSS样式是三种中的哪一种,拿到的是渲染以后的、即时的width/height,结果相对准确。
    缺点:只有IE支持
    为了兼容其他浏览器,可以使用window.getComputedStyle(dom节点).currentStyle.width/height

  • 方法三:dom节点.getBoundingClientRect().width/height
    拿到的是渲染以后的、即时的width/height,
    适用于:根据视窗viewport的左上角,计算元素的绝对位置,getBoundingClientRect()拿到的是四个元素top、left、width、height

CSS代码:

考点5:根据实例题,解释盒模型什么是边距重叠

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }
    .wrapper{
        overflow: hidden;
        background:green;
    }
    .child{
        margin-top: 10px;
        height:100px;
        background:pink;
    }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="child"></div>
    </div>
</body>

</html>

网上澳门金莎娱乐 9

父元素高度为100px,加上overflow:hidden后,高度变为110px,效果:

网上澳门金莎娱乐 10

这是为什么捏???
给父元素添加overflow:hidden,相当于创建了一个BFC

<style>
    .layout-flexbox{
        display: flex;
    }

    .left {
        width: 300px;
        background-color: blue;
    }

    .center {
        flex: 1;
        background-color: green;
    }

    .right {
        width: 300px;
        background-color: blue;
    }
</style>

考点6:BFC(边距重叠解决方案)

 

BFC的基本概念:块级元素格式化上下文

方式四:grid布局

BFC的原理(渲染规则)

1)BFC元素的垂直方向上会发生边距重叠
2)BFC元素的区域不会与浮动元素的box重叠
3)BFC元素在页面上是一个独立的容器,BFC里面的元素与外面的元素互不影响
4)计算BFC高度的时候,浮动元素也会参与计算

  • 如何去创建一个BFC
    1)overflow(不是默认值visible),hidden/auto都可以
    2)创建float(值不是默认值none)
    3)创建position(值不是默认值为static)
    4)display属性为inline-box、table相关
    来看一个栗子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }
    .wrapper {
        overflow: hidden;
        background-color: pink;
    }
    .wrapper>p {
        margin: 5px auto 25px;
        background-color: red;
    }
    </style>
</head>

<body>
    <div class="wrapper">
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
</body>
</html>

上边的栗子,父元素overflow: hidden;创建了BFC,包含的几个p标签会在垂直方向上会发生边距重叠。效果见图:

网上澳门金莎娱乐 11

1的下边距和2的上边距发生了margin重叠,按照margin重叠计算规则,间距取最大值25px。
如何消除p标签它们之间的重叠呢???给任意一个子元素添加一个包裹父元素,给这个父元素创建一个BFC就可以消除。
代码奉上:

    <div class="wrapper">
        <p>1</p>
        <div style="overflow: hidden;">
            <p>2</p>
        </div>
        <p>3</p>
    </div>

效果:

网上澳门金莎娱乐 12

垂直方向上的边距重叠消除了,但是2的背景色却消失了,上下边距都变成了16px,1和3的边距都是5px和15px。

 

BFC的使用场景

  • BFC在布局上的应用
    栗子:左边固定宽度,右边自适应
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }
    .wrapper {
        background-color: red;
    }
    .left {
        float: left;
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .right {
        height: 110px;
        background-color: green;
    }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

效果:

网上澳门金莎娱乐 13

由上图可知,float有一个特性,就是当右边的高度高于左边时(110>100),右边会继续渲染左边没有float的元素,也就是左边与浮动元素的box发生重叠。解决办法,就是给右边这个元素创建一个BFC,代码如下:

    .right {
        height: 110px;
        overflow: auto;
        background-color: green;
    }

这时,BFC元素的区域不会与浮动元素的box重叠,效果见图:

网上澳门金莎娱乐 14

  • BFC清除浮动
    栗子:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }
    .wrapper {
        background-color: red;
    }
    .float {
        float: left;
        font-size:30px;
    }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="float">我是浮动元素</div>
    </div>
</body>
</html>

效果:

网上澳门金莎娱乐 15

可以看到,包裹父元素并没有背景色,并且height是0,这是为什么呢???
因为浮动元素是脱离文档流的,它的高度并不会计算到包裹div的高度里。这个怎么解决呢???就是给wrapper创建一个BFC:

    .wrapper {
        background-color: red;
        float:left;
    }

网上澳门金莎娱乐 16

    .wrapper {
        background-color: red;
        /*overflow: auto;*/
        overflow: hidden;
    }

网上澳门金莎娱乐 17

自行了解IFC(内联元素格式化上下文)

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:常见的五种三列布局网上澳门金莎娱乐

关键词: