三栏布局

作者: 老虎爱吃母鸡 | 来源:发表于2016-08-03 01:12 被阅读0次

css经典布局总结
布局小结
常用的五大布局
实现三栏布局的六种方式
CSS3开发常用核心技能
移动端页面布局
前端网站5种布局
2019-08-25
flex布局的几种典型布局方式
css3设计模式，常用布局

负边距在让元素产生偏移时和position: relative有什么区别?
- 负边距让元素产生偏移会影响后面的元素，因为它不占有原来的位置
  
  原本的位置

.div:nth-child(2) {
    margin-top: -30px;
    margin-left: -20px;
}

margin-left
很明显看出当第二个div移动的时候，后面的元素跟随着一起移动，说明它不占有原来的位置
- position: relative;还占有原来的位置，相对原来的位置定位

.div:nth-child(2) {
    position: relative:
    top: 30px;
    left: 50px;
}

position: relative;

使用负 margin 形成三栏布局有什么条件?
假设三栏布局中的中间一栏为main，左边栏为left，右边栏为right
1. 在html结构中，必须main在前面
```
<div class="contain">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
```
1. 三栏布局中的三个块必须先浮动,因为div的默认是垂直一个接一个放置的，必须让left和right跟随在main的后面
2. 中间块必须width: 100%;因为：
  1. float之后div的宽度是内容宽度
  2. 因为三栏布局中的中间一栏需要自适应
  3. 必须把left和right顶到下一行
3. left的margin-left: -100%;，right的margin-left的值为本身宽度的负数
圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
圣杯布局的目的是使中间栏的内容得以先渲染，原理是利用浮动加负margin来实现三栏布局，然后在#contain上加padding，再把两个边栏用相对定位移到正确的位置
1. 先写好html的结构，注意中间栏要在两个边栏的前面
```
<div id="header"></div>
<div id="contain">
    <div class="main"></div>
    <div class="sub"></div>
    <div class="extra"></div>
</div>
<div id="footer"></div>
```
1. 设置main的宽度100%，三个div左浮动
```
#contain>div {
    height: 300px;
    float: left;
}

.main {
    width: 100%;
    background-color: #e65454;
}

.sub,.extra {
    width: 200px;
}
```

2016-08-03_005106.png

3. 把两个边栏移动到正确的位置
```
.sub {
    background-color: #03A9F4;
    margin-left: -100%;
}

.extra {
    background-color: #4CAF50;
    margin-left: -200px;
}
```

2016-08-03_005929.png

4. 让内容能正确显示不被两个边栏覆盖
```
#contain {
    overflow: hidden;
    padding: 0 200px;
}
.sub {
    background-color: #03A9F4;
    margin-left: -100%;
    position: relative;
    left: -200px;
}

.extra {
    background-color: #4CAF50;
    margin-left: -200px;
    position: relative;
    left: 200px;
}
```

2016-08-03_005902.png

双飞翼布局的原理? 实现步骤?
双飞翼布局的目的是使中间栏的内容得以先渲染，原理是利用浮动加负margin来实现三栏布局，相比圣杯布局，双飞翼布局的区别在于最后正确显示内容的方式
- 写html结构，注意双飞翼布局在main下还有一个显示内容的div
```
<div id="header"></div>
<div id="contain">
    <div class="main">
        <div class="content"></div>
    </div>
    <div class="sub"></div>
    <div class="extra"></div>
</div>
<div id="footer"></div>
```
- 和圣杯布局一样利用浮动+负外边距得到三栏布局
  
  2016-08-03_005623.png
- 让内容能正确显示不被两个边栏覆盖，这里是圣杯布局和双飞翼布局的区别，双飞翼布局不适用main来显示内容，而是在main下新建一个div，设置属性margin-left和margin-right来达到正确显示内容的目的
```
.content {
    margin-left: 200px;
    margin-right: 200px;
}
```