css经典布局的实现
一直以来在网上看过不少css布局方式，始终没有做一次较为完整的总结。今天通过自己敲代码一一进行了相应效果的实现。主要包括：一栏居中布局，两栏布局，三栏布局，以及盒子内容居中的实现。
一，html代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css经典布局</title> <link rel="stylesheet" type="text/css" href="cssless.css"> </head> <body> <!-- 一栏居中布局 --> <div class="header" > <div class="center" >一栏居中布局-第1种实现方法</div> </div> <div class="center" >主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部 分主体部分主体部分主体部分主体部分主体部分分</div> <div class="footer" > <div class="center" >页面尾部</div> </div> <div class="layout" > <div class="header-type" > <div>一栏居中布局-第2种实现方法</div> </div> <div class="center-type" >主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部 分主体部分主体部分主体部分主体部分主体部分分 </div> <div class="footer-type" > <div>页面尾部</div> </div> </div> <div class="container-flex" > <div class="head-foot"> 一栏居中布局-第3种flex实现方法 </div> <div class="main-flex" >主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部 分主体部分主体部分主体部分主体部分主体部分分</div> <div class="head-foot"> 页面尾部 </div> </div> <!-- 两栏布局 --> <!-- float+margin --> <div class="head-float" >两栏头部信息</div> <div class="float-layout clearfix" > <div class="aside fl" >侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧 侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧 侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边边侧边侧边侧边侧边侧边侧边侧边侧边侧 </div> <div class="main" >主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部分 </div> </div> <!-- position+margin --> <div class="head-position" >两栏头部信息</div> <div class="position-layout" > <div class="position-aside" >侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧 侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧 侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边边侧边侧边侧边侧边侧边侧边侧边侧边侧边 </div> <div class="position-main" >主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部分 </div> </div> <!-- flex两栏布局 --> <div class="flex-head" >两栏头部信息</div> <div class="flex-layout" > <div class="flex-aside" >侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧 侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧 侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边边侧边侧边侧边侧边侧边侧边侧边侧边侧边 </div> <div class="flex-main" >主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部分 </div> </div> <!-- 三栏布局 --> <div class="head-float" >三栏头部信息</div> <div class="clearfix clearfix-div" > <div class="fl fl-aside-left" >侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧 侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧 侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边边侧边侧边侧边侧边侧边侧边侧边侧边侧 </div> <div class="fr fr-aside-left" >侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧 侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧 侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边边侧边侧边侧边侧边侧边侧边侧边侧边侧 </div> <div class="float-main-three" >主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部分 </div> </div> <!-- position+margin三栏布局 --> <div class="head-position" >三栏头部信息</div> <div class="position-layout-three" > <div class="position-aside-left" >侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧 侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧 侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边边侧边侧边侧边侧边侧边侧边侧边侧边侧边 </div> <div class="position-aside-right" >侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧 侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧 侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边边侧边侧边侧边侧边侧边侧边侧边侧边侧边 </div> <div class="position-main-three" >主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部分 </div> </div> <!-- flex三栏布局 --> <div class="flex-head" >三栏头部信息</div> <div class="flex-layout-three" > <div class="flex-aside-three last" >33侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧 侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧 侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边边侧边侧边侧边侧边侧边侧边侧边侧边侧边 </div> <div class="flex-main-three" >22主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部体部分主体部分主体部分主体部分主体部分主体部分主体部分主体部分主体 部分主体部分主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部分主体部分主体部分主体部部分主体部分主体部分主体部分主体部分主体部分部页面主体部分 </div> <div class="flex-aside-three former" >11侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧 侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧 侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边侧边边侧边侧边侧边侧边侧边侧边侧边侧边侧边 </div> </div> <!-- 常用的子元素在父元素中居中方法 --> <!-- 水平居中 子元素分别为行内元素，块状元素，有宽度，无宽度等情况--> <div class = "flex-div"> <div class="parent inline" > <span>子元素为行内元素居中，一行文字</span> </div> <div class="parent mul-inline" > <span class="child-mul-inline" >子元素为行内元素居中，多行文字 使用了flex布局，父元素设置行高，子元素设置display:inline-block，表格布局三种方法实现多行布局。 </span> </div> <div class="parent block" > <div class="child-block" >div盒子在父元素中居中</div> </div> <div class="parent width" > <div class="child-width" >对于水平居中盒子子元素而言，如果子元素是行内元素，可以在父元素中设置text-align即可达到水平居中效果；<br/>对于子元素是块级元素水平居中而言，可以通过设置margin:auto达到水平居中<br/> 对于其他情况而言，可以通过设置display:inline/inline-block/block等转化为以上两种情况后，再设置。<br/>对于垂直居中而言，行内元素(包括inline/inline-block/table-cell)可通过设置vertical-align:middle来实现；单行可通过设置line-height得到<br/> 对于块级元素垂直居中，可以使用定位达到效果。<br/>最后，使用flex布局基本上都能达到以上效果，表格布局的使用也有响应的居中效果。 </div> </div> </div> </body> </html>
二，css代码
/* 第一种一览居中布局 */
.header,
.footer {
width: 100%;
background-color: #66F;
}
.center {
max-width: 1024px;
border: 1px solid #923;
margin: 0 auto;
text-align: center;
}
/* 第2种一栏居中布局 */
.layout {
margin-top: 50px;
}
.header-type,
.footer-type {
width: 100%;
height: 50px;
background-color: #ADC;
text-align: center;
}
.center-type {
max-width: 1024px;
height: 100px;
margin: -20px auto 0;
border: 1px solid #197;
}
.container-flex {
display: flex;
flex-direction: column;
margin-top: 50px;
text-align: center;
}
.container-flex .head-foot {
width: 100%;
background-color: #ADC;
}
.container-flex .main-flex {
max-width: 1024px;
margin: 0 auto;
background-color: #66F;
}
/* 两栏布局 */
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
.fr {
float: right;
}
.fl {
float: left;
}
.head-float, .head-position,.flex-head{
width:100%;
background-color: #888;
margin-top:150px;
text-align: center;
}
.float-layout{
width:80%;
margin: 0 auto;
}
.aside{
max-width:300px;
border:1px solid #923;
}
.main{
margin-left:300px;
border:1px solid #268;
padding:10px;
}
/* position+margin两栏布局 */
.position-layout{
width:80%;
margin:0 auto;
position: relative;
}
.position-aside{
width:20%;
position:absolute;
top:0;
right:0;
max-height:200px;
overflow:auto;
}
.position-main{
/* 不设置margin-right，仅仅设置width的宽度也可以达到类似的效果 */
/* width:80%; */
margin-right:20%;
}
/* flex两栏布局 */
.flex-layout{
display:flex;
justify-content:center;
}
.flex-aside{
max-width:300px;
}
.flex-main{
max-width:800px;
}
/* 三栏float布局 */
.clearfix-div{
max-width:80%;
margin:0 auto;
}
.fl-aside-left, .fr-aside-left{
max-width:300px;
}
.float-main{
margin:0 300px;
}
/* 三栏position布局 */
.position-layout-three{
width:1200px;
margin:0 auto;
position: relative;
}
.position-aside-left, .position-aside-right{
width:300px;
position: absolute;
top:0;
}
.position-aside-left {
left:0;
}
.position-aside-right{
right:0;
}
.position-main-three{
margin:0 300px;
}
/* flex三栏布局 */
.flex-layout-three{
display:flex;
width:1200px;
margin:0 auto;
}
.flex-aside-three{
width:300px;
}
.former{
order:1;
}
.last{
order:3;
}
.flex-main-three{
/* 设置宽度也可以达到相同效果 */
/* max-width:600px; */
flex:1;
order:2;
}
/* 常见元素居中 */
.flex-div{
display:flex;
justify-content: space-around;
flex-wrap:wrap;
margin:200px 0;
border:1px solid #AFE;
}
.parent{
width:300px;
height:300px;
border:1px solid #A1E;
}
.inline{
text-align:center;
height:20px;
line-height: 20px;
}
.mul-inline{
/* 方法一：flex实现垂直居中 */
/* display:flex;
align-items:center; */
/* 方法二：通过为父元素设置相同的行高，并为子元素设置vertical-align:middle */
/* width:300px;
height:300px;
line-height:300px;
text-align:center; */
/* 方法三：表格布局，最实用 */
display: table;
width:200px;
height:200px;
text-align:center;
}
.child-mul-inline{
/* width:200px;
margin:0 auto; */
/* 可以使用vertical-align实现垂直居中，不过vertical-align仅适用于行内元素，行内块元素也行和table-cell元素，因此之前需要转化 */
/* display:inline-block;
vertical-align:middle;
line-height:50px; */
display:table-cell;
vertical-align: middle;
}
.block{
/* 脱离文档流定位居中，这种情况下需要知道盒子的宽和高 */
/* position: relative; */
/* 弹性布局，宽和高设不设都可以 */
display:flex;
justify-content: center;
align-items: center;
}
.child-block{
/* width:200px;
height:200px;
border:1px solid #ADE;
position: absolute;
top:50%;
left:50%;
margin-left: -100px;
margin-top:-100px; */
/* width:200px;
height:200px;
border:1px solid #ADE;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto; */
/* 这时候宽度和高度可有可无 */
/* border:1px solid #ADE;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%); */
width:200px;
height:200px;
border:1px solid #ADE;
}
.width{
width:500px;
}
