css布局-基础,单列,双列,三列

---

什么是布局

现有样式

• 文档流
• 浮动
• 定位

不能满足人们的需求.

人们需要:

• 导航栏+内容
• 导航栏+内容+广告栏
• 从上到下、从左到右、定宽、自适应...

CSS 2 并没有提供原生支持，所以需要将一些属性组合起来，以实现布局

“DIV + CSS 布局”？

国外一般不这么叫.<div> 是一个无语义的标签，适合用来做与内容无关的事情.

只能用<div> 吗？

• 不一定
• 尽量使用有语义的标签

常见布局(pc)

• 固定宽度布局

  所有的内容都在页面宽度范围内,最多使用.

  优点: 简单,每个分区的宽度都可以固定.
  缺点:浏览器宽度小于内容宽度时,会出现滚动条.

• 弹性（fluid）布局

无固定宽度.一般需要百分比来适配
优点:页面好看.
缺点:无论设计还是实现,都比较复杂,要考虑多种情况

• 响应式布局 —— 多终端（PC、Pad、Phone）

常见具体布局

1. 单列布局

实现:

#定宽
width: 1000px; 或 max-width: 1000px;
#水平居中
margin-left: auto; margin-right: auto; 

max-width 和 width的区别:

• 前者在浏览器宽度小于max-width情况下,显示宽度为浏览器宽度.
• 后者在浏览器宽度小于width情况下,宽度不变,下方出现滚动条.

优化:
省标签，便于控制局部 范例

通栏

给通栏加背景色 范例

通栏优化:
给 body 设置min-width 去掉滚动背景色 bug

内部元素水平居中

.parent{text-align:center;}
.child{display: inline-block;}

如果child高度不一致,需要设置 vertical-align:top实现顶部对齐.

IE 6 不支持 inline-block :

.child{*display: inline; *zoom: 1;}

bfc可以让元素呈现块级特性,即使是行内元素
使用zoom1可以触发bfc.设置height,width,
加*表示ie浏览器识别

范例

2. 双列布局

一列固定宽度，另外一列自适应宽度

如何实现

浮动元素 + 普通元素margin 范例

<style>
    #content:after{
      content: '';
      display: block;
      clear: both;
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: left;
    }
    .main{
      margin-left: 210px;
      height: 400px;
      background: red;
    }
    
    #footer{
      background: #ccc;
    }
  
  </style>
  <div id="content">
    <div class="aside">aside</div>
    <div class="main">content</div>
  </div>
  <div id="footer">footer</div>

如果侧边栏在右边:

.aside{float: right;}
.main{ margin-right: 210px;}

注意:考虑到浏览器的渲染顺序,

  <div id="content">
    <div class="aside">aside</div>
    <div class="main">content</div>
  </div>`

aside和main顺序不可更改.

3. 三列布局

两侧两列固定宽度，中间列自适应宽度

如何实现

范例

    #content:after{
      content: '';
      display: block;
      clear: both;
    }
    .menu{
      width: 100px;
      height: 500px;
      background: pink;
      float: left;
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: right;
    }
    .main{
      margin-left: 110px; /*为什么要加margin-left*/
      margin-right: 210px;
      height: 400px;
      background: red;
    }
    
    #footer{
      background: #ccc;
    }

  <div id="content">
    <!-- 注意main的位置 -->
    <div class="menu">aside</div>
    <div class="aside">aside</div>
    <div class="main">content</div>
  </div>
  <div id="footer">footer</div>