整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

HTML+CSS 常用的网页布局

栏双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>三栏双飞翼布局</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
body{
    overflow: hidden;/*隐藏页面的滚动条*/
}
.content{
    width: 100%;
    min-width: 1120px;/*设置一个最小宽度 免得页面布局太丑(文字会掉下来)*/
    height: 200px;
    background-color: red;
    position: relative;
}
.left{
    width: 200px;
    height: 200px;
    background-color: green;
    position: absolute;
    left: 0;
    top: 0;
}
.right{
    width: 300px;
    height: 200px;
    background-color: blue;
    position: absolute;
    right: 0;
    top: 0;
}
.center{
    /* 宽度不给默认父元素宽度 */
    /* 有一个padding值 */
    padding: 0 300px 0 200px;
}
</style>
</head>
<body>
<!-- 三栏布局：左右固定中间自适应 -->
<!-- 双飞翼 -->
<div class="content">
<div class="left">200*200</div>
<div class="center">我是自适应网页......</div>
<div class="right">300*200</div>
</div>
</body>
</html>

三栏圣杯布局

言

今天聊点简单的，最近在整理面试题的时候，看到css部分，感觉自己有段时间没有切页面了，正好趁着这个机会好好复习一下，加深一下印象。

如何实现三栏布局 中间自适应？这也是在前端面试官经常会问到的，当你被问到这个它的时候，你的脑子里应该想到什么？给你3秒钟的时间...那必然是最最经典的圣杯、双飞翼布局，这就是实现这个问题最优雅的方式。

既然是三栏布局，我们先创建3个容器：left + middle + right

接下来就是实现三栏布局的效果，我们先聊一个最简单最好想的方法，使用弹性

先给left和right都设置200px的宽度，再给它们的父容器container设置属性display: flex;这样这三个容器就会自动去到同一行，再给middle容器设置flex：1，这样中间这个容器的宽度就能一直得到全部宽度减去左右两边容器宽度，这个宽度会随着窗口的大小而变化，代码和效果图如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      height: 100px;
    }
    .container{
      display: flex;
    }
    .left,.right{
      width: 200px;
      background: #66a4bd;
    }
    .middle{
      flex: 1;
      background: gray;
    }

  </style>
</head>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
  </div>
</body>
</html>


这个方法看起来是不是很简单，没错它真的非常简单，都不需要动脑子，简简单单两行代码就能搞定。but！它存在一个问题，这个方法是先加载左边容器的，中间容器加载。不知道大家在上网的时候有没有发现过，有些页面左右两边的都是广告，重要内容都在中间，那么当我们如果使用这个方法来布局的时候，最先出来的是广告，那你愿意吗？我们肯定是想先看到中间的主要内容，两边广告什么时候出现谁在意呢？

所以为了优化这个问题，就出现了经典的 圣杯 和 双飞翼 布局，它们的目的就是为了在HTML结构上，中间栏在最前面保证了最先渲染中间提升性能

圣杯布局

既然要保证中间栏最先加载，那就要把middle容器写在前面

<body>
  <div class="container">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>


css样式还是先给左右容器宽度200px，高度都一样，给个背景色便于区分：

第一步：给三个容器的父容器添加padding：0 200px；腾开位置；middle中间容器设置width：100%；此时的宽度继承了父容器的100%；并且给三个子容器都设置float: left;让它们都向左浮动，去到同一行，效果如下：

此时的页面效果就是第一行位置放不下，左右两个容器被挤到了第二行，其实按道理来说它们应该是在第一行两块红色区域位置的，浮动的效果嘛，大家都能理解吧

第二步：给左右容器相对定位，让它们相对自己原本文档流的位置进行定位

.left{
      width: 200px;
      background: #76d1ea;
      position: relative;
      margin-left: -100%; //向左挪动父容器宽度的100%
      left: -200px;  //再向左挪动自身的200宽度
    }


此时right接替了left原本的位置，同理，这时候只需要给right设置：margin-right: -200px; 那么就实现了我们想要的三栏布局

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圣杯</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .container{
      height: 100px;
      padding: 0 200px;
    }
    .middle, .left, .right{
      height: 100%;
      float: left;
    }
    .middle{
      width: 100%;
      background: gray;
    }
    .left{
      width: 200px;
      background: #76d1ea;
      position: relative;
      margin-left: -100%; 
      left: -200px; 
    }
    .right{
      width: 200px;
      background: #76d1ea;
      position: relative;
      margin-right: -200px; 
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>


不过这样布局有一个问题就是：有一个最小宽度，当页面小于最小宽度时布局就会乱掉。 “由于设置了相对定位，所以当left原来的位置和right的位置产生重叠时，由于浮动的原因一行放不下就会换行” 。所以布局就被打乱了，使用双飞翼布局就可以避免这个问题。

双飞翼布局

我们先把HTML结构稍微改造一下，在middle容器里面多用了个inner容器

<body>
  <div class="container">
    <div class="middle">
      <div class="inner">middle</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>


因为已经设置了middle的width：100%，这时候我们只需要设置inner容器为padding：0 200px，我们要的效果同样是把左右两个容器摆放到对应的红框位置

接下来left、middle、right同样使用浮动，left设置margin-left:-100%;（父容器的整个宽度），right设置margin-left：-200px；这样便实现了三栏布局的效果，连定位都不使用，且当页面过小时，布局不会乱，效果如下：

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双飞翼</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .container{
      height: 100px;
    }
    .middle, .left, .right{
      float: left;
      height: 100%;
    }
    .middle{
      width: 100%;
      background: gray;
    }
    .inner{
      height: 100%;
      padding: 0 200px;
    }
    .left{
      width: 200px;
      background: pink;
      margin-left: -100%;
    }
    .right{
      width: 200px;
      background: pink;
      margin-left: -200px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="middle">
      <div class="inner">middle</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>


给个图便于大家理解

总结

两种布局方式都是把主要栏放在文档流最前面，使主要栏优先加载

相同之处 ：让三列浮动，然后通过负外边距形成三列布局

不同之处 在于如何处理中间主列的位置：

  • 圣杯布局是利用父容器的左、右内边距+两个列的相对定位;
  • 双飞翼布局是把主列嵌套在一个新的父级块中并利用主列的左、右外边距进行布局调整


作者：深藏blue9
链接：https://juejin.cn/post/7276398869734817832

言

三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。

我们不妨假定这样一个布局：高度已知，其中左栏、右栏宽度各为300px,中间自适应，可以通过几种方法来实现？以及各自的优缺点是什么？

本文源代码请猛戳三栏布局源码，欢迎star和fork

一、浮动布局

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Layout</title>
 <style media="screen">
 html * {
 padding: 0;
 margin: 0;
 }
 .layout article div {
 min-height: 150px;
 }
 </style>
</head>
<body>
 <!--浮动布局 -->
 <section class="layout float">
 <style media="screen">
 .layout.float .left {
 float: left;
 width: 300px;
 background: red;
 }
 .layout.float .center {
 background: yellow;
 }
 .layout.float .right {
 float: right;
 width: 300px;
 background: blue;
 }
 </style>
 <h1>三栏布局</h1>
 <article class="left-right-center">
 <div class="left"></div>
 <div class="right"></div> // 右栏部分要写在中间内容之前
 <div class="center">
 <h2>浮动解决方案</h2>
 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
 </div>
 </article>
 </section>
</body>
</html>

这种布局方式，dom结构必须是先写浮动部分，然后再中间块，否则右浮动块会掉到下一行。

浮动布局的优点就是比较简单，兼容性也比较好。但浮动布局是有局限性的，浮动元素脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如父容器高度塌陷等。

二、绝对布局

 <!--绝对布局 -->
 <section class="layout absolute">
 <style>
 .layout.absolute .left-center-right>div{
 position: absolute;//三块都是绝对定位
 }
 .layout.absolute .left {
 left:0;
 width: 300px;
 background: red;
 }
 .layout.absolute .center {
 right: 300px;
 left: 300px;//离左右各三百
 background: yellow;
 }
 .layout.absolute .right {
 right: 0;
 width: 300px;
 background: blue;
 }
 </style>
 <h1>三栏布局</h1>
 <article class="left-center-right">
 <div class="left"></div>
 <div class="center">
 <h2>绝对定位解决方案</h2>
 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
 </div>
 <div class="right"></div>
 </article>
 </section>

绝对定位布局优点就是快捷，设置很方便，而且也不容易出问题。缺点就是，容器脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题，这就导致了这种方法的有效性和可使用性是比较差的。

三、flexbox布局

 <!--flexbox布局-->
 <section class="layout flexbox">
 <style>
 .layout.flexbox .left-center-right{
 display: flex;
 }
 .layout.flexbox .left {
 width: 300px;
 background: red;
 }
 .layout.flexbox .center {
 background: yellow;
 flex: 1;
 }
 .layout.flexbox .right {
 width: 300px;
 background: blue;
 }
 </style>
 <h1>三栏布局</h1>
 <article class="left-center-right">
 <div class="left"></div>
 <div class="center">
 <h2>flexbox解决方案</h2>
 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
 </div>
 <div class="right"></div>
 </article>
 </section>

flexbox布局是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox。 flexbox的缺点就是IE10开始支持，但是IE10的是-ms形式的。

四、表格布局

<!--表格布局-->
 <section class="layout table">
 <style>
 .layout.table .left-center-right {
 display: table;
 height: 150px;
 width: 100%;
 }
 .layout.table .left-center-right>div {
 display: table-cell;
 }
 .layout.table .left {
 width: 300px;
 background: red;
 }
 .layout.table .center {
 background: yellow;
 }
 .layout.table .right {
 width: 300px;
 background: blue;
 }
 </style>
 <h1>三栏布局</h1>
 <article class="left-center-right">
 <div class="left"></div>
 <div class="center">
 <h2>表格布局解决方案</h2>
 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
 </div>
 <div class="right"></div>
 </article>
 </section>

表格布局的兼容性很好(见下图)，在flex布局不兼容的时候，可以尝试表格布局。当内容溢出时会自动撑开父元素。

表格布局也是有缺陷:①无法设置栏边距；②对seo不友好；③当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，然而有时候这并不是我们想要的效果。

五、网格布局

 <!--网格布局-->
 <section class="layout grid">
 <style>
 .layout.grid .left-center-right {
 display: grid;
 width: 100%;
 grid-template-columns: 300px auto 300px;
 grid-template-rows: 150px;//行高
 }
 .layout.grid .left {
 background: red;
 }
 .layout.grid .center {
 background: yellow;
 }
 .layout.grid .right {
 background: blue;
 }
 </style>
 <h1>三栏布局</h1>
 <article class="left-center-right">
 <div class="left"></div>
 <div class="center">
 <h2>网格布局解决方案</h2>
 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
 </div>
 <div class="right"></div>
 </article>
 </section>

CSS Grid是创建网格布局最强大和最简单的工具。就像表格一样，网格布局可以让Web设计师根据元素按列或行对齐排列，但他和表格不同，网格布局没有内容结构，从而使各种布局不可能与表格一样。例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重叠和类似元素定位。

但网格布局的兼容性不好。IE10+上支持，而且也仅支持部分属性。

六、总结

通过上面详细介绍五种布局的优缺点，在实际开发中最优选择哪种布局？相信读者心中会有自己的答案。

我觉得flex和grid布局就可以搞定实际开发中的布局，假设浏览器都支持这两个模块，你将选择grid还是flexbox来给页面布局？flexbox是一维布局，他只能在一条直线上放置你的内容区块；而grid是一个二维布局。前面也简单说到，你可以根据你的设计需求，将内容区块放置到任何你想要放的地方。那么不用多说，你应该知道哪一种更适合你的布局。此外，如果要兼容低版本的IE(比如IE8+)，可以考虑table布局。

最后问大家一个问题，如果中间部分被内容高度撑开，需要左右栏也撑开，这五种布局哪些布局还可以用？

答案：flex布局和table布局

作者：人心思动

链接：http://www.imooc.com/article/details/id/79718


在线咨询
上一篇：快速编写HTML / CSS代码的方法，您掌握了吗？
下一篇：20 道必看的 Vue 面试题 - 原力计划

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 镇海区 绩溪县 高明区 韩城市 辽中县 当阳市 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服