布局
随着前端的发展,现有样式(文档流、浮动、定位)已经不能满足人们的需求，
人们需要：
导航栏+内容
导航栏+内容+广告栏
从上到下、从左到右、定宽、自适应...
单列布局
1.gif
实现方式： 定宽 + 水平居中
width: 1000px; //或 max-width: 1000px;
margin-left: auto;
margin-right: auto;
注意 max-width和width的区别,最好用max-width
1、一栏布局
<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>
2、一栏布局（通栏）
<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>
双列布局
22.gif
实现方式： 一列固定宽度，另外一列自适应宽度
浮动元素 + 普通元素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>
其他的方法：还可以使用position的absolute，可以得到同样的效果
三列布局
333.gif
实现方式：两侧两列固定宽度，中间列自适应宽度
1.使用左右两栏使用float属性，中间栏使用margin属性进行撑开
#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-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>
2. 使用position定位实现，即左右两栏使用position进行定位，中间栏使用margin进行定位
.left{
background: yellow;
width: 200px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
.middle{
height: 300px;
margin: 0 220px;
background: red;
}
.right{
height: 300px;
width: 200px;
position: absolute;
top: 0;
right: 0;
background: green;
}
<div class="left">左栏</div>
<div class="middle">中间栏</div>
<div class="right">右栏</div>
其它布局
水平等距排列
实现方式：浮动加 -margin
<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>
圣杯布局
将middle的宽度设置为100%，然后将其float设置为left，其中的main块设置margin属性，然后左边栏设置float为left，之后设置margin为-100%，右栏也设置为float：left，之后margin-left为自身大小。
.wrapper{
overflow: hidden; //清除浮动
}
.middle{
width: 100%;
float: left;
}
.middle .main{
margin: 0 220px;
background: red;
}
.left{
width: 200px;
height: 300px;
float: left;
background: green;
margin-left: -100%;
}
.right{
width: 200px;
height: 300px;
float: left;
background: yellow;
margin-left: -200px;
}
<div class="wrapper">
<div class="middle">
<div class="main">中间</div>
</div>
<div class="left">左栏</div>
<div class="right">右栏</div>
</div>
元素居中
水平居中
1 行内元素水平居中
行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。
.center{
text-align:center;
}
<div class="center">水平居中</div>
2 块级元素水平居中
只需给需要居中的块级元素加margin:0 auto即可
.center{
width:200px;
margin:0 auto;
border:1px solid red;
}
<div class="center">水平居中</div>
水平垂直居中
1 文本水平垂直居中
设置paddingtop=paddingbottom；text-align:center;
2 绝对定位 + 负margin
html,body {
height: 100%;
}
.dialog {
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
width: 400px;
height: 300px;
box-shadow: 0px 0px 3px #000;
}
.dialog .header{
padding: 10px;
background: #000;
color: #fff;
}
.dialog .content{
padding: 10px;
}
<div class="dialog">
<div class="header">我是标题</div>
<div class="content">我是内容</div>
</div>
3 绝对定位 + margin:auto
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
4 绝对定位 + transform
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:50%; /* 定位父级的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
}
5 table-cell实现居中
div{
display:table-cell;
text-align:center;
vertical-align: middle;
}
6 vertical-align实现居中
.box{
width: 300px;
height: 200px;
border: 1px solid ;
text-align: center;
}
.box:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box img{
vertical-align: middle;
background: blue;
}
<div class="box">
<img src="" alt="">
</div>
7 flex布局实现居中
.box{
height:600px;
display:flex;
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中
/* aa只要三句话就可以实现不定宽高水平垂直居中。 */
}
.box>div{
background: green;
width: 200px;
height: 200px;
}
网友评论