css 布局-单栏布局

普通布局（头部、内容、底部）

css 布局-两栏布局

• 1. float + margin

左侧采用 float:left 往左浮动，右侧 margin-left:200px,留出左侧内容的空间。

• 2. absolute + margin 方式
• 3. flex 布局

采用 flex 实现，左侧固定大小，右侧设置 flex:1,即可实现自适应

• 4. 表格布局—table

左侧 table-cell 定宽，右侧 table-cell 不定宽

css 布局-三栏布局

float 浮动

采用 float 浮动,左右大小固定，中间自适应

圣杯布局

圣杯布局和双飞翼布局解决的问题是相同的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

圣杯布局：为了让中间 div 内容不被遮挡，将中间 div 设置了左右 padding-left 和 padding-right 后，将左右两个 div 用相对布局 position: relative 并分别配合 right 和 left 属性，以便左右两栏 div 移动后不遮挡中间 div。

优点：不需要添加 dom 节点

缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图：当 middle 部分的宽小于 left 部分时就会发生布局混乱。（middle < left 即会变形）

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

上面是 html，发现了吧，middle 写在最前面，这样网页在载入时，就会优先加载。

具体实现思路，通过给 container 左右固定的 padding 来预留出 left 和 right 的空间

.container {
  position: relative;
  height: 300px;
  background: #ddd;
  padding: 0 300px 0;
}
.container .middle {
  float: left;
  width: 100%;
  height: 300px;
}
.container .left {
  float: left;
  position: relative;
  height: 300px;
  width: 300px;
  margin-left: -100%;
  left: -300px;
}
.container .right {
  float: left;
  position: relative;
  width: 300px;
  height: 300px;
  margin-left: -300px;
  left: 300px;
}

所以内部元素都是左浮动的，主要区域宽度 100%;

左侧区域通过 margin-left:100%;使它浮动到左方，然后更具自身定位 left：-300px;将之移动到父容器的 padding 中

右侧同理，只不过只需要 margin 自己本身的宽度。

结果：左右固定宽度 300px，中间自适应

双飞翼布局

双飞翼布局：为了让中间 div 内容不被遮挡，直接在中间 div 内部创建子 div 用于放置内容，在该 div 里用 margin-left 和 margin-right 为左右两栏 div 留出位置。

两端固定宽高，中间自适应、(性能比较好，主要是为了让 content 内容区域优先加载。)

双飞翼布局和圣杯差不多，主要是将 padding 换成了 margin 而且只需要包裹 middle 即可，

优点：不会像圣杯布局那样变形

缺点：多加了一层 dom 节点

<div id="center">
  <div id="inside">middle</div>
</div>
<div id="left">left</div>
<div id="right">right</div>

#center {
  float: left;
  width: 100%; /*左栏上去到第一行*/
  height: 100px;
  background: blue;
}
#left {
  float: left;
  width: 180px;
  height: 100px;
  margin-left: -100%;
  background: #0c9;
}
#right {
  float: left;
  width: 200px;
  height: 100px;
  margin-left: -200px;
  background: #0c9;
}

/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/
#inside {
  margin: 0 200px 0 180px;
  height: 100px;
}

原因为：float 元素会依次一行自动排开，宽度不够时就会换行，而 main 占据了所有故此，left 和 right 就会换行，这就和 display：inline-blick 一样， 当 margin-left 为父元素的-100%时，就会上移动一行。，行盒放置时，就会根据 margin 放置，

参考：https://www.cnblogs.com/tcxq/p/10938413.html (opens new window) https://www.cnblogs.com/jiguiyan/p/11425276.html (opens new window)

上下固定中间自适应

1. flex

2. calc(100vh - 200px)

.top {
  height: 100px;
  background: red;
}

.center {
  height: calc(100vh - 200px);
  background: yellow;
}

.bottom {
  height: 100px;
  background: red;
}

3. 三栏都 position: absolute;

.top {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100px;
  background: red;
}

.center {
  position: absolute;
  top: 100px;
  bottom: 100px;
  width: 100%;
  height: auto;
  background: yellow;
}

.bottom {
  position: absolute;
  height: 100px;
  width: 100%;
  bottom: 0;
  background: red;
}

其它布局

table 布局和 div 布局区别

table 布局

优点：

1. 容易上手。table 布局就是用 table 来布局，只要在对应的位置填上对应的内容就可以了。相对来说，还是比较的简单明了的。

2. 表现上更加的“严谨”，在不同的浏览器，可以做到很好的兼容。

缺点：

1. 显示样式和数据绑定在一起
2. 布局的时候灵活度不高
3. 一个页面可能会有大量的 table 元素 代码冗余度高
4. 搜索引擎不友好

div+css 布局

基本思想: 数据和样式分离

优点：

1. 符合 w3c 标准

2. 样式的调整更加方便，灵活度高

3. 搜索引擎更加友好

缺点：

开发技术高，要考虑兼容不同版本的浏览器