Web11.CSS布局

什么是布局?
现有样式不能满足人们的需求
文档流 浮动 定位

人们需要：导航栏+内容
导航栏+内容+广告栏
从上到下、从左到右、定宽、自适应...
CSS 2并没有提供原生支持，所以需要将一些属性组合起来，以实现布局

div+css布局: 国内叫法
不一定只能用<div>
但是尽量使用有语义的标签

常见布局(PC)
固定宽度布局(页面变小时，会出现滚动条)
弹性(fluid)布局(页面设计复杂)
响应式布局 ----多终端(PC Pad Phone)

定宽

width: 1000px;  或 max-width: 1000px;

水平居中

margin-left: auto;  或 margin-right: auto;

单列布局

.layout{
    width: 960px;
    /* max-width: 560px;*/  没有滚动条
    margin: 0 auto;
}
#header {
    height: 60px;
    background: red;
}
#content {
    height: 400px;
    background: blue;
 }
#footer {
    height: 50px;
    background: yellow;
}

<div class="layout">
    <div id="header">头部</div>
    <div id="content">内容</div>
    <div id="footer">尾部</div>
</div>

省标签

layout{
    width: 960px;
    /* max-width: 560px;*/  没有滚动条
    margin: 0 auto;
}
#header {
    height: 60px;
    background: red;
}
#content {
    height: 400px;
    background: blue;
 }
#footer{
    height: 50px;
    background: yellow;
}


<div id="header" class="layout">头部</div>
<div id="content" class="layout">内容</div>
<div id="footer" class="layout">尾部</div>

内部元素水平居中

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

双列布局: 一列固定宽度 另一列自适应宽度

浮动 vs 负margin
对于相邻的俩个浮动元素，如果因为空间不够导致第二个元素下移
可以通过给第二个浮动元素设置margin-left: 负值 来让第二个元素上移
其中负值大于等于元素上移后和第一个元素重合的临界值

圣杯布局
1.是三列布局 两边固定宽度 中间自适应
2.中间内容元素在dom元素次序中优先位置
缺点： .main宽度一定要大于等于aside宽度