课程内容
什么是布局
DIV + CSS？
固定宽度 VS 弹性布局
单列布局
双列布局
三列布局
什么是布局
现有样式不能满足人们的需求
文档流
浮动
定位
人们需要：
导航栏+内容
导航栏+内容+广告栏
从上到下、从左到右、定宽、自适应...
CSS 2 并没有提供原生支持，所以需要将一些属性组合起来，以实现布局
“DIV + CSS 布局”？
中国特色，国外一般不这么叫 <div> 是一个无语义的标签，适合用来做与内容无关的事情 只能用 <div> 吗？
不一定
尽量使用有语义的标签
常见布局（PC）
固定宽度布局：比如京东首页，一般pc端都是
优点：简单，宽度可以写死，不管页面怎么变，整体的样式不变
缺点：假如浏览器的宽度小于内容时，会出现滚动条
弹性（fluid）布局：内容并不是固定宽度，和页面的整体宽度有关，需要用百分比做适配，
缺点：在设计和实现上都要复杂些，需要考虑屏幕的不同情况，
优点：设计的好的话，页面会很好看。
响应式布局 —— 多终端（PC、Pad、Phone）
如何实现
定宽
width: 1000px; 或 max-width: 1000px;
width：1000px:当小于1000的时候有滚动条
max-width: 1000px;当小于1000的时候没有滚动条
水平居中
margin-left: auto; margin-right: auto;
范例：单列布局
范例 注意 max-width和width的区别
<style>
.layout{
/* width: 960px; */
max-width: 960px;
margin: 0 auto;
}
#header{
height: 60px;
background: red;
}
#content{
height: 400px;
background: blue;
}
#footer{
height: 50px;
background: yellow;
}
</style>
<div class="layout">
<div id="header">头部</div>
<div id="content">内容</div>
<div id="footer">尾部</div>
</div>
进化
省标签，便于控制局部 范例
<style>
.layout{
width: 960px;
margin: 0 auto;
}
#header{
height: 60px;
background: red;
}
#content{
height: 400px;
background: blue;
}
#footer{
height: 50px;
background: yellow;
}
</style>
<div id="header" class="layout">头部</div>
<div id="content" class="layout">内容</div>
<div id="footer" class="layout">尾部</div>
通栏
给通栏加背景色 范例
<style>
.layout{
width: 960px;
margin: 0 auto;
}
#header{
height: 60px;
background: red;
}
#content{
height: 400px;
background: blue;
}
#footer{
height: 50px;
background: yellow;
}
</style>
<div id="header">
<div class="layout">头部</div>
</div>
<div id="content" class="layout">内容</div>
<div id="footer">
<div class="layout">尾部</div>
</div>
通栏优化
给 body 设置min-width 去掉滚动背景色 bug
<style>
.layout{
width: 960px;
margin: 0 auto;
}
body{
min-width: 960px;
}
#header{
height: 60px;
background: red;
}
#content{
height: 400px;
background: blue;
}
#footer{
height: 50px;
background: yellow;
}
</style>
<div id="header">
<div class="layout">头部</div>
</div>
<div id="content" class="layout">内容</div>
<div id="footer">
<div class="layout">尾部</div>
</div>
内部元素水平居中
.parent{text-align:center;}
.child{display: inline-block;}
IE 6 不支持 inline-block (为什么用下面的写法)
.child{*display: inline; *zoom: 1;}
http://js.jirengu.com/yaluqavufi/1/edit
如何实现
浮动元素 + 普通元素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>
如果侧边栏在右边呢？
侧边栏在右
谨记页面元素的渲染顺序 范例
：浏览器先读content，样式，然后再读aside，样式，再读content
<style>
#content:after{
content: '';
display: block;
clear: both;
}
.aside{
width: 200px;
height: 500px;
background: yellow;
float: right;
}
.main{
margin-right: 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>
三列布局
两侧两列固定宽度，中间列自适应宽度
如何实现
范例
#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>
http://js.jirengu.com/jige/edit?html,output
浮动 vs 负margin
水平等距排列
圣杯布局
双飞翼布局
浮动 vs 负margin
对于相邻的两个浮动元素，如果因为空间不够导致第二个浮动元素下移，可以通过给第二个浮动元素设置
margin-left: 负值 来让第二个元素上移，其中 负值 大于等于元素上移后和第一个元素重合的临界值
三个浮动元素
最后一个浮动元素使用了负边距
使用了负边距
范例演示
范例 想想最后一个元素为什么要设置为 -20px?
.float{
overflow:hidden;
width:280px;
border:dashed 1px orange;
}
.float .item{
width:100px;
height:100px;
float:left;
}
.float .item:nth-child(1){
background:red;
}
.float .item:nth-child(2){
background:grey;
}
.float .item:nth-child(3){
background:blue;
margin-left: -20px; /* 为什么这里是 -20px ??*/
}
</style>
<div class="float">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
水平等距排列
范例
<style>
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.ct{
overflow:hidden;
width: 640px;
border:dashed 1px orange;
margin: 0 auto;
}
.ct .item{
float:left;
margin-left: 20px;
margin-top: 20px;
width:200px;
height:200px;
background: red;
}
.ct>ul{
margin-left: -20px;
}
</style>
<div class="ct">
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
</ul>
</div>
http://js.jirengu.com/xute/edit?html,output
圣杯布局
why it?
是三列布局，两边固定宽度，中间自适应
中间内容元素在 dom 元素次序中优先位置
实现
按照注释编号，一行行实现观察效果 范例
<style>
#content:after{
content: ''; /*8*/
display: block; /*8*/
clear: both; /*8*/
}
#content{
padding-left: 100px; /*5*/
padding-right: 150px; /*5*/
}
.aside, .main, .extra{
float: left; /*2*/
}
.aside{
width: 100px; /*1*/
height: 300px; /*1*/
background: red; /*1*/
margin-left: -100%; /*4*/
position: relative; /*6*/
left: -100px; /*6*/
}
.extra{
width: 150px; /*1*/
height: 300px; /*1*/
background: yellow; /*1*/
margin-left: -150px; /*5*/
position: relative; /*7*/
left: 150px; /*7*/
}
.main{
height: 350px; /*1*/
background: blue; /*1*/
width: 100%; /*3*/
}
</style>
<div id="content">
<div class="main">main</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
http://js.jirengu.com/poya/1/edit?html,output
缺点
.mian的最小宽度不能小于.aside的宽度
why?：当小于的时候会发生错乱，.main被挤下去
双飞翼布局
按照注释编号，一行行实现观察效果 范例
解决了什么问题?
<style>
#content:after{
content: ''; /*8*/
display: block; /*8*/
clear: both; /*8*/
}
#content{
}
.aside, .main, .extra{
float: left; /*2*/
}
.aside{
width: 100px; /*1*/
height: 300px; /*1*/
background: red; /*1*/
margin-left: -100%; /*4*/
}
.extra{
width: 150px; /*1*/
height: 300px; /*1*/
background: yellow; /*1*/
margin-left: -150px; /*5*/
}
.main{
/* background: blue; */ /*第1步添加，第7步注释掉*/
/* height: 350px; */ /*第1步添加，第7步注释掉*/
width: 100%; /*3*/
}
.wrap{
margin-left: 100px; /*6*/
margin-right: 150px; /*6*/
background: blue; /*7*/
height: 350px; /*7*/
}
</style>
<div id="content">
<div class="main">
<div class="wrap">main</div>
</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
http://js.jirengu.com/casozaraxo/1/edit
网友评论