CSS 7：网页布局（传统布局，flex布局，布局套路）
CSS 7：网页布局（传统布局，flex布局，布局套路）
传统布局
一栏、两栏、三栏布局
一栏布局
特点：页面内容居中，宽度固定
实现方式： 定宽 + 水平居中
width: 1000px; //或 max-width: 1000px; margin-left: auto; margin-right: auto; 演示地址范例
注意 max-width和width的区别：使用固定width的时候，如果浏览器缩小到比设置的宽度要小，那么会出现滚动条（不允许宽度小于width）。设置为max-width之后：缩小浏览器，如果浏览器比max-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>也可有如下写法，省标签，便于控制局部 ，主要方法是单独写一个layout类，需要控制布局的时候，加上这个类就可以了 范例演示地址
<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>以下是针对通栏（既上下栏是满width）的场景，给通栏加背景色 演示地址 http://js.jirengu.com/zira/ed...
<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>查看范例效果，能发现不完美的地方吗? 对了，滚动条 bug。
因为layout是固定宽度，而有背景色的上下通栏是自适应的屏幕宽度，所以当小于.layout的宽度的时候，会出现滚动条。
下面我们进行优化，给 body (或者layout)设置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>两栏布局
两栏布局 特点： 一栏固定宽度， 另外一栏自适应撑满
如何实现 浮动元素 + 普通元素margin 范例 http://js.jirengu.com/loxe/ed...
<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>如果侧边栏在右边呢？
侧边栏在右 谨记页面元素的渲染顺序 main 在下面 范例 http://js.jirengu.com/qaca/edit
<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>三栏布局
特点： 左右两栏固定宽度， 中间主要区块自适应撑满
如何实现 范例 http://js.jirengu.com/jige
#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>圣杯布局
利用浮动和负边距的特性实现的两(三)栏布局。圣杯布局和双飞翼布局 是老的布局方式，2012年以前流行，现在已不流行，但是面试可能会考察到，所以记录一下
why it?
- 是三列布局，两边固定宽度，中间自适应
- 中间内容元素在 dom 元素次序中优先位置
按照注释编号，一行行实现观察效果 范例
http://js.jirengu.com/poya/1/...
<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>缺点：.mian的最小宽度不能小于.aside的宽度
双飞翼布局
双飞翼布局 按照注释编号，一行行实现观察效果 范例 http://js.jirengu.com/fevifum...
解决了圣杯布局的缺点，多写了一个wrap。
<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>这两个布局都比较老，用了浮动和负边距的特性。面试可能会问到。
如果用flex实现三栏布局，且main在dom次序最上面，那么只需要contain使用flex布局，mainflex:1;order:2两边固定宽度即可
使用flex写几个简单布局
1.flex手机页面基本布局
main部分设置了overflow:auto之后，出现滚动条，header和下方按钮固定
代码演示地址：http://js.jirengu.com/saqulus...
2.flex产品列表布局
例如九个产品，每行三个展示
演示地址：http://js.jirengu.com/xecuqam...
3.flex PC布局(三栏布局，左右两栏定宽，中间内容自适应)
<header>header</header>
<div class="content">
<div class="aside">aside固定宽度</div>
<div class="main">main自动填充宽度</div>
<div class="nav">nav固定宽度</div>
</div>
<footer>footer</footer>header,footer{
height:100px;
background:#ccc;
}
.content{
display:flex;//
}
.content .aside{
width:250px;
background:red;
}
.content .main{
height:500px;
flex:1;//
}
.content .nav{
width:250px;
background:green;
}
flex:1,自动填充宽度。
4.flex完美居中
.content{
display:flex;
justify-content:center;
align-items:center;
}不管里面的子元素宽高是多少，都在垂直和水平方向居中。
布局的套路
口诀 float：
- 儿子全加
float: left （right） - 老子加
.clearfix
在做平均布局的时候，如果左右宽度不够，可以用负margin。例如margin: 0 -4px;
flex：
- 老子加
display: flex - 老子加
justify-content: space-between;
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
zoom: 1;
}原则
- 不到万不得已，不要写死
width和height - 尽量用高级语法，如
calc、flex - 如果是 IE，就全部写死
浮动布局套路
套路：
- 儿子全加
float: left（right） - 老子加
.clearfix
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
zoom: 1;
}举例：
<div class="father clearfix">
<div class="child1 child">儿子1</div>
<div class="child2 child">儿子3</div>
</div>.child{
float:left;
}
.clearfix::after{
content:'';
display:block;
clear:both;
}
.father{
border:1px solid black;
}
.child1{
width:30%;//
background:red;
}
.child2{
background:yellow;
width:70%;//
}
可以看到不管如何拉长，child1和child2永远占30%和70%。且两个child DIV只用来布局，然后内容写在里面，如果要加padding等边距，就得在里面再写一个div，child相当于是一个套在外面的wrapper，用来布局。
演示地址：http://js.jirengu.com/socoget...
做布局的时候，要分清布局块和内容块！布局块DIV只用来布局，内容快DIV只用来添加网页内容。bootstrop就用栅格系统做布局块，内容块是自己设计的独立元素。
例子：简单的头部导航布局
演示地址：http://js.jirengu.com/wabuluz...
举例使用：用float做平均布局
宽800的div上显示8张图，每列四张。 演示地址： http://js.jirengu.com/casodig...
加一个wrapper的作用是使用负margin扩大8像素，为了不与外面的pics冲突（pics用来布局，居中）所以再包裹一个div。又一次显示出布局块和内容块的区别。
如果使用flex布局，只需要三行代码。
diaplay：flex;
flex-wraP:wrap;
justify-content:space-between;自动平均布局。
使用calc
width是194px，定死的。如果不自己算picture的宽度
那么就可以使用
width：calc(25% - 8px)
左右不一样比例的布局
1:3使用float：
<div class="father clearfix">
<div class="child left"></div>
<div class="child right"></div>
</div>CSS:
.clearfix::after{
content:'';
display:block;
clear:both;
}
.father{
width:500px;
background: #red;
border:1px solid red;
}
.child{
height:200px;
float: left;
}
.left{
width:33.33333%;
background: #ccc;
}
.right{
width:66.66666%;
background: #777;
}如果想在1:3的块之间加空隙，那么这个已经成比例的布局块不要动，在里面加div,然后里面的div加上margin-right就行了。还有一种方法就是width:cacl(33.3333% - 20px).
使用flex：
<div class="father2">
<div class="child2 left2"></div>
<div class="child2 right2"></div>
</div>.father2{
width:500px;
border:1px solid red;
display:flex;
}
.child2{
height:200px;
}
.left2{
flex:1;//
background: #ccc;
border:1px solid green;
}
.right2{
flex:0 0 33.3333%;//
background: #777;
border:1px solid blue;
}关键在于：
flex:1自动占满剩余空间！
flex:0 0 33.3333%固定宽度为33.3333%！
或者也可以直接父亲display：flex，儿子1width:cacl(33.3333% - 20px),儿子2width:cacl(66.6666%)
演示地址： http://js.jirengu.com/qovefuw...
阮一峰的flex布局实例教程： https://cloud.tencent.com/developer/article/1095848
PC网页转成响应式的手机布局
在需要修改的地方加上媒体查询，然后修改相关CSS。主要需要修改的是显示的宽度width：auto,直到左右不能滑动为止。
请看我的博客，媒体查询CSS5:移动端页面(响应式)
图片处理技巧
为了防止图片收缩，尽量不要使用img标签，使用div标签然后使用
background:transparent url('xxx') no-repeat center;
background-size:cover;尽量完整显示图片
练习
分别用float和flex实现左右布局
如图：
float: http://js.jirengu.com/goqebat... flex: http://js.jirengu.com/folonow...
做一个平均布局
请打开这个 jsbin，完善代码， 要求用 float + 负 margin 做一个平均布局
演示地址： http://js.jirengu.com/jaxepij...
把上面的布局用 flex 实现 http://js.jirengu.com/huyihim...
腾讯云开发者
