经典问题之---网页三栏布局

时间 2019-11-10

标签经典问题网页布局栏目 HTML 繁體版

原文原文链接

重写于 2018-02-25，大部分参考于 https://zhuanlan.zhihu.com/p/25070186?refer=learncoding

1. 流体布局

简单来讲就是 -- 两边浮动，中间设置 margin
htmlphp

<div class="wrap">
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>
</div>

csscss

* {
  margin: 0;
  padding: 0;
}
.left, .right, .main {
  height: 300px;
}
.left {
  width: 200px;
  float: left;
  background-color: #089e8a;
}
.right {
  float: right;
  width: 200px;
  background-color: #19f;
}
.main {
  margin-left: 250px;
  margin-right: 250px;
  background-color: #080;
}

2. BFC布局

什么是BFC？
个人答案参考于：http://www.php.cn/div-tutorial-371936.htmlhtml

BFC区域，不会与浮动元素重叠。

BFC定义：(Block Formatting Contexts)块级格式上下文，是一个独立渲染的区域。浏览器

它是一个独立的盒子。独立盒子内部的布局不受外部的影响，也不影响外部。是否是和absolute的哲学有点类似！布局
BFC解决了什么问题？看一下这个例子(同一个BFC中会出现)：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    * {
      margin: 0;padding: 0;
    }
    .p1 {
      background-color: #FCE38A;
      width: 200px;
      height: 100px;
      margin-bottom: 50px;
    }
    .p2 {
      background-color: #EAFFD0;
      width: 200px;
      height: 100px;
      margin-top: 50px;
    }
    .p3 {
      background-color: #95E1D3; 
      width: 200px; 
      height: 100px;
    }
  </style>
</head>
<body>
  <p class="p1"></p>
  <p class="p2"></p>
  <p class="p3"></p>
</body>
</html>

1.没有设置margin值的时候，你们是这样的。

2.在 p1 和 p2 分别设置了 50px 的 margin 以后，是这样的。

3.在这里出现了外边距合并的现象，并无出现 100px 的距离。这就是BFC要解决的问题。flex

BCF规则
- 内部的box会在垂直方向，从顶部开始一个接着一个地放置（上面的例子能够看出）
- 同一个BFC中，在两个相邻的块级元素中，垂直margin会发生折叠
- 每一个元素的margin box的左边，与包含块border box的左边相接,对于从左往右的格式化，不然相反)，即便存在浮动也是如此
- BFC的区域不会与float box重叠
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
- 计算BFC的高度时，浮动元素也参与计算
如何触发BFC？前缀是 根元素
- float属性不为none（如：left | right）
- overflow的值不为visible（如：hidden | auto | scroll）
- display属性值为inline-block | flex | inline-flex | table-cell | table-caption
- position为absolute或fixed
应用BFC，解决 margin重叠问题(上例中 body 元素就是一个BFC)
- 根据规则:同一个BFC中，在两个相邻的块级元素中，垂直margin会发生折叠flexbox
  
  因此咱们给p1设置display:inline-block，让其不为block
  
  此时因为p1元素经过display:inline-block触发了BFC，此时的p1就是一个独立的BFC了，根据规则BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然3d

清除浮动亦可以使用BFC原理，具体还请看外链：http://www.php.cn/div-tutorial-371936.html

总结：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，一样的，外面的元素也不会影响到容器里面的子元素。code

BFC布局方式的三列
cssorm

* {
  margin: 0;
  padding: 0;
}
.left {
  float: left;
  height: 200px;
  width: 200px;
  margin-right: 50px;
  background-color: #fce38a;
}
.right {
  float: right;
  height: 200px;
  width: 200px;
  margin-left: 50px;
  background-color: #eaffd0;
}
.main {
  height: 200px;
  overflow: hidden;
  background-color: #95e1d3;
}

html

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>
</div>

3. 双飞翼布局

特色是：主内容优先加载。原理是：浮动元素 margin 负值的应用。

css

* {
  margin: 0;
  padding: 0;
}
.content {
  float: left;
  width: 100%;
}
.main {
  height: 200px;
  margin-left: 250px;
  margin-right: 250px;
  background-color: #95e1d3;
}
.left {
  float: left;
  margin-left: -100%;
  width: 200px;
  height: 200px;
  background-color: #fce38a;
}
.right{
  float: left;
  margin-left: -200px;
  width: 200px;
  height: 200px;
  background-color: #eaffd0;
}

html

<div class="content">
  <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

4. 圣杯布局

圣杯布局和双飞翼布局很像。。能够说是双飞翼改！！ html结构简单了，css复杂些

当我把中间层的 `margin`去掉后，我发现(我的发现，仅作参考或者不看)：

圣杯用padding，双飞翼用margin

双飞翼布局的中间占了全屏。可是两边被遮挡了。仿佛是两个翅膀挡住了中间。
圣杯布局的中间占了全屏。把两边也一块儿这该住了。仿佛是两个侧边将中间顶到了最上层。

css

* {
  margin: 0;
  padding: 0;
}
.container {
  padding: 0 250px;
}
.main {
  float: left;
  width: 100%;
  height: 200px;
  background-color: #95e1d3;
}
.left {
  position: relative;
  left: -250px;
  margin-left: -100%;
  float: left;
  width: 200px;
  height: 200px;
  background-color: #fce38a;
}
.right {
  position: relative;
  float: left;
  width: 200px;
  height: 200px;
  background-color: #eaffd0;
  margin-left: -200px;
  left: 250px;
}

html

<div class="container">
  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

5. Flex 布局

时代在变化！！浏览器兼容，看见我就怂。

先看实现吧，优雅简单。
css

* {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
}
.main {
  flex-grow: 1;
  height: 300px;
  background-color: #95e1d3;
}
.left {
  order: -1;
  flex: 0 1 200px;
  margin-right: 50px;
  height: 300px;
  background-color: #fce38a;
}
.right {
  flex: 0 1 200px;
  margin-left: 50px;
  height: 300px;
  background-color: #eaffd0;
}

html

<div class="container">
  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

经典问题之---网页三栏布局

重写于 2018-02-25，大部分参考于 https://zhuanlan.zhihu.com/p/25070186?refer=learncoding

1. 流体布局

2. BFC布局

BFC区域，不会与浮动元素重叠。

清除浮动亦可以使用BFC原理，具体还请看外链：http://www.php.cn/div-tutorial-371936.html

3. 双飞翼布局

4. 圣杯布局

当我把中间层的 `margin`去掉后，我发现(我的发现，仅作参考或者不看)：

5. Flex 布局

简称“弹性盒子”，除了用于实现弹性布局，还能够用来居中内容。改变标记中的源码顺序。

！！！！ IE9 如下浏览器不支持不支持不支持 FlexBox

经典问题之---网页三栏布局

重写于 2018-02-25，大部分参考于 https://zhuanlan.zhihu.com/p/25070186?refer=learncoding

1. 流体布局

2. BFC布局

BFC区域，不会与浮动元素重叠。

清除浮动亦可以使用BFC原理，具体还请看外链：http://www.php.cn/div-tutorial-371936.html

3. 双飞翼布局

4. 圣杯布局

当我把 中间层 的 margin去掉后，我发现(我的发现，仅作参考或者不看)：

5. Flex 布局

简称“弹性盒子”，除了用于实现弹性布局，还能够用来居中内容。改变标记中的源码顺序。

！！！！ IE9 如下浏览器 不支持 不支持 不支持 FlexBox

当我把中间层的 `margin`去掉后，我发现(我的发现，仅作参考或者不看)：

！！！！ IE9 如下浏览器不支持不支持不支持 FlexBox