基础网页布局
布局分类
- 一列布局
- 两列布局
- 三列布局
- 多列布局
一列布局：
二列布局：
三列布局：
<div class="container">
<div class="header">我是header</div>
<div class="content">
<div class="left">左</div>
<div class="right">右</div>
<div class="middle">中间</div>
</div>
<div class="footer">我是footer</div>
</div>
.content {
min-height: 500px;
height: auto;
background-color: orange;
}
.content .left {
float: left;
width: 20%;
height: 500px;
background-color: orangered;
}
.container .right {
float: right;
width: 20%;
height: 500px;
background-color: yellow;
}
.container .middle {
height: 500px;
background-color: yellowgreen;
}
⚠️ middle 写再最后，由于上面左右 div 是浮动的，所以 middle 就会浮上去；如果 middle 想先渲染出来，放到最开始，由于它是 block 块级元素，左右就会被挤下去；怎么办呢？下面就要使用到圣杯布局了。
将左右的背景颜色取消掉，你会发现左右是叠在 middle 上，这个时候middle 实际占比是100%，然后根据左右的的占比，自动计算出内容显示占比。
圣杯布局
圣杯布局的出现是为了解决：老套的布局必须按照源顺序（在 DOM 中表现为先写 Left，然后 Middle，最后，Right）等，它将可能导致代码不够灵活，尤其是从 DOM 的载入顺序上来说，中间的内容不能被首先加载。
圣杯布局实现套路
- 两边带有固定宽度中间可以流动（fluid）；
- 允许中间一栏最先出现；
- 允许任意一栏放在最上面；
- 仅需一个额外的 div 标签； （最外层加一个div 容器包裹）
- 仅需非常简单的 CSS，带上最少的兼容性补丁
利用上面的代码，将 Middle 放到第一位：
<div class="content">
<!-- 主要内容先渲染 -->
<div class="middle">中间</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
呈现效果：
想让左边的移动上来， 也给 middle float 属性，然后再让left 左外边距 -100%;
.content {
min-height: 500px;
height: auto;
background-color: orange;
}
.content .left {
float: left;
width: 150px;
height: 500px;
background-color: orangered;
}
.container .right {
float: right;
width: 150px;
height: 500px;
background-color: yellow;
}
.container .middle {
float: left;
width: 100%;
height: 500px;
background-color: yellowgreen;
}
理解下 margin-left ， 设置与元素相关联的盒子模型的左外边距；
margin-left: 10px; /* 绝对长度 */
margin-left: 1em; /* 相对于字号的长度 */
margin-left: 5%; /* 相对最近块元素的宽度 */
右也改造下
.container .right {
float: left;
width: 150px;
height: 500px;
background-color: yellow;
margin-left: -150px;
}
到这里是不是基本圣杯布局雏形就出来了，让人不省心的就是中间内容被被盖了， 怎么办呢？
让最外部的父级容器承担左右栏的距离好让中间内容显示出来，这个就上面说的多加一个 div 的意思了。
通过 position 相对自己进行移动去填补预留空间
.content .left {
position: relative;
left: -150px;
float: left;
width: 150px;
height: 500px;
margin-left: -100%;
background-color: orangered;
}
.container .right {
position: relative;
left: 150px;
float: left;
width: 150px;
height: 500px;
background-color: yellow;
margin-left: -150px;
}
圣杯布局，你学会了没有～
双飞翼布局 + CSS HACK
双飞翼布局由早期圣杯布局演变而来，始创于淘宝UED，双飞翼布局由左中右三栏组合，如同一只鸟（左翼、身体、右翼）所以称为双飞翼布局。
圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。
不同在于解决"中间栏div内容不被遮挡"问题的思路不一样：
圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position:relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。多了1个div，少用大致4个css属性（圣杯布局中间div的padding-left和padding-right这2个属性，加上左右两个div用相对布局position:relative及对应的right和left共4个属性，一共6个：而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4）。
简单说起来就是双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了
其中使用
- position
- float
- 负边距
- 登高
- 盒子模型
- 清除浮动
