您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

CSS 布局解决方案终结版

时间：12-14来源：作者：点击数：

在我们前端开发时，经常会遇到不同的场景页面布局问题，页面框架搭建是前端开发基础，也是十分重要的一环。本文先是对页面开发基本流程思路进行了总结，在此基础上对 CSS 布局常见方案进行梳理，涉及水平垂直居中、单列布局、两栏布局、圣杯布局、双飞翼布局、等高布局以及粘带布局。

1.1 确定页面版心

常见的版心宽度：

知乎 960px
淘宝 1000px
网易 1200px
京东 1210px
腾讯 1400

1.2 页面整体布局

先分析行模块再分析列模块。
如果一行当中有多个模块，一定要放在同一个父模块中。列模块一般都用浮动，具体坐标，有层叠概念的需要用到定位。

1.3 单个模块布局

先给模块宽高（高度最终完成是要去除的）背景颜色，实例化这个盒子。
然后再分析模块的文本属性，背景其他属性。

CSS 书写顺序

位置属性 (position, top, right, z-index, display, float 等)
大小 (width, height, padding, margin)
文本 (font, line-height, letter-spacing, color- text-align 等)
背景 (background, border 等)
其他 (animation, transition 等)

一般模块是由标题和内容两个部分组成。
如果盒子本身有宽高，使用 padding 需要进行计算，使用 margin 有时会导致外边距合并塌陷问题。

1.4 行间距计算

行间距分为四条线：顶线、中线、基线、底线。

行间距是基线到基线的距离，设置给行高。

行内元素水平垂直居中常用方法有两种：

水平居中: text-align: center
垂直居中：Height=line-height（适合纯文字类）

块级元素居中分为：

居中元素宽高固定
居中元素宽高不固定

2.1 固定宽高

公共代码

<head>
<meta charset="utf-8">
<title>公共代码</title>
<style>
    .father{
         width: 500px;
         height: 300px;
         border: 1px solid red;
    }
    .son{
        width: 100px;
        height: 100px;
        background-color:red;
    }
</style>
</head>
<body>
  <div class="father">
        <div class="son"></div>
    </div>
</body>

(1) margin

水平居中：margin：0 auto

垂直居中：margin-top

.son {
  
  margin: 0 auto;
  
  margin-top:100px;
}

(2) absolute + 负 margin

子元素绝对定位，父元素相对定位
子元素先基于父元素移动 50%，再利用 - margin 往回移动自身的一半

 .father {
      position: relative;
   }
 .son {
     position: absolute;
     
     left: 50%;
     margin-left: -50%;
     
     top: 50%;
     margin-top: -50%;
 }

(3) absolute + margin auto

子元素绝对定位，父元素相对定位
子元素各个方向距离设为 0，再将 margin 设为 auto

.father {
     position: relative;
 }
 .son {
     position: absolute; 
     margin: auto; 
     
     left: 0;
     right: 0;
     
     top: 0;
     bottom: 0;
 }

2.2 不固定宽高

不固定宽高的方法是可以覆盖上面固定宽高的方法

子元素绝对定位，父元素相对定位
利用 - translateX 往回移动自身的一半

(1) absolute + transform

 .father{
     position: relative;
 }
 .son{
     position: absolute;
     
     left: 50%;
     transform: translateX(-50%);
     
     top: 50%;
     transform: translateY(-50%);
 }

(2) css-table

水平居中：父元素 text-align:center + 子元素 display:block

.father{
    text-align: center;
}
.son {
    display: inline-block;
}

垂直居中：父元素 display:table-cell+vertical-align: middle

.father{
    display: table-cell;
    vertical-align: middle;
}

(3) flex

水平居中：父元素 display: flex+justify-content: center
垂直居中：父元素 display: flex+align-items: center

.father {
   display: flex;
   
   justify-content: center;
   
   align-items: center;
}

3.1 普通布局

头部、内容、底部

<head>
<meta charset="utf-8">
<title>单列布局-普通布局</title>
<style>
    .header{
       margin:0 auto; 
       max-width: 960px;
       height:100px;
       background-color:pink;
    }
    .container{
       margin: 0 auto;
       max-width: 960px;
       height: 500px;
       background-color: aquamarine;
    }
    .footer{
       margin: 0 auto;
       max-width: 960px;
       height: 100px;
       background-color:skyblue;
    }
</style>
</head>
<body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>

3.2 内容居中

内容区域（版心）为 960px，采用 margin:0 auto 实现水平居中

<head>
<meta charset="utf-8">
<title>普通布局-内容居中</title>
<style>
    .header{
        margin:0 auto;
        height:100px;
        background-color:pink;
    }
    .content{
        margin: 0 auto;
        height: 500px;
        width:960px;
        background-color: aquamarine;
    }
    .footer{
        margin: 0 auto;
        height: 100px;
        background-color: skyblue;
    }
</style>
</head>
<body>   
    <div class="header"></div>
    <div class="center">
         <div class="content"></div>
    </div>
    <div class="footer"></div>
</body>

所谓两栏布局是指：左侧定宽，右侧自适应。

4.1 float

实现思路：

普通流体 BFC 后（float:left）和浮动元素不会产生交集，顺着浮动元素形成自己的封闭上下文。

<head>
<meta charset="utf-8">
<title>两栏布局-float</title>
<style>
    .left {
        width: 300px;
        background-color: pink;
        float: left;
        height:500px;
    }
    .right {
        width:100%;
        background-color: aquamarine;
        height:500px;  
    }
</style>
</head>
<body>      
     <div class="warp">
         <div class="left">定宽</div>
         <div class="right">自适应</div>
    </div>
</body>

4.2 flex

实现思路：父元素开启弹性空间，左盒子设置固定宽度，右盒子 flex：1

<head>
<meta charset="utf-8">
<title>两栏布局-flex</title>
<style>
   .warp{
       display:flex;
  }
  .left {
       width: 300px;
       background-color: pink;
       height:500px;
  }
 .right {
       background-color: aquamarine;
       height:500px;  
       flex:1
}
</style>
</head>
<body>      
     <div class="warp">
         <div class="left">定宽</div>
         <div class="right">自适应</div>
    </div>
</body>

5.1 什么是三栏布局

左右固定，中间自适应
中间栏放在文档流前面，保证优先加载。

实现方案有三种：flex 布局、圣杯布局、双飞翼布局
圣杯起源于 a list part 的一篇文章，双飞翼起源于淘宝 UED，灵感来源于页面渲染。

5.2 flex 布局

将中间盒子放置 html 最开始，保证优先加载
使用 flex order 属性决定三个盒子顺序，左，中，右
左盒子和右盒子固定宽度，中间盒子 flex:1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex布局</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        min-width: 800px;
        height: 600px;
        background: gray;
        display: flex;
    }
    .left{
        width:200px;
        height: 600px;
        background: pink;
        order:-1
    }
    .center{
        height: 600px;
        background: aquamarine;
        width:100%;
        flex:1
        order:1
    }
    .right{
        width:200px;
        height: 600px;
        background: skyblue;
        order:2
    }
</style>
</head>
<body>
<div class="box">
    <div class="center">中哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈中</div>
    <div class="left">左</div>
    <div class="right">右</div>	
</div>
</body>
</html>

5.3 圣杯布局

三个盒子都设置浮动

左盒子走负 margin-left:100%，右盒子走负自身的宽度

大盒子 padding left 和 right 左右盒子宽度

左右盒子相对定位，left，right - 往回走

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        min-width: 800px;
        height: 600px;
        
        padding-left:200px;
        padding-right:200px;
    }
    .left{
        
        float:left;
        width:200px;
        height: 600px;
        
        margin-left:-100%;
        background: pink;
        
        position:relative;
        left:-200px;
    }
    .center{
        float:left;
        width: 100%;
        height: 600px;
        background: aquamarine;
    }
    .right{
        float:left;
        width:200px;
        height: 600px;
        
        margin-left:-200px;
        background: skyblue;
        
        position:relative;
        right:-200px;
    }
</style>
</head>
<body>
    <div class="box">
        <div class="center">中哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈中</div>
        <div class="left">左</div>
        <div class="right">右</div>	
    </body>
</html>

5.4 双飞翼布局

三个盒子都设置浮动

左盒子走负 margin-left:100%，右盒子走负自身的宽度

调整中间盒子 margin

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双飞翼布局</title>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        min-width: 800px;
        height: 600px;
    }
    .left{
        
        float:left;
        width:200px;
        height: 600px;
        
        margin-left:-100%;
        background: pink;
    }
    .content{
        
        margin-left:200px;
        margin-right:200px;
        background-color: yellowgreen;
    }
    .center{
        float:left;
        width: 100%;
        height: 600px;
        background: aquamarine;
    }
    .right{
        float:left;
        width:200px;
        height: 600px;
        
        margin-left:-200px;
        background: skyblue;
    }
</style>
</head>
<body>
<div class="box">
    <div class="center">
        <div class="content">
            中哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈中
        </div>
    </div>
    <div class="left">左</div>
    <div class="right">右</div>	
</body>
</html>

圣杯布局双飞翼布局总结：

三栏全部 float:left，中间栏 div 内容不被遮盖
圣杯是中间添加相对定位，并配合 left 和 right 属性
双飞翼是中间栏的 div 在嵌套一个 div，对嵌套的 div 设置 margin-left 和 margin-right

等高布局是指子元素在父元素中高度相等的布局方式。

6.1 正值内边距 + 负值外边距

正值内边距 + 负值外边距，padding 和 margin 相互抵消的效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>等高布局-正值内边距+负值外边距</title>
<style type="text/css">
      *{
            margin:0;
            padding:0;
     }
     .left,
     .right {
            width:50%;
            float:left;
            text-align:center;
            background-color:aquamarine;
            
            padding-bottom:9999px;
            
            margin-bottom:-9999px;
     }
     .right{
             background-color: pink;	 
     }
     .container {
            width:1200px;
            margin:0 auto;
            
            overflow:hidden;
     }
</style>
</head>
<body>
 <div class="container">
     <div class="left">111111111111</div>
     <div class="right">
        333333333333333333333333333333333333333333333333
        333333333333333333333333333333333333333333333333
        333333333333333333333333333333333333333333333333
     </div>
 </div>
</body>
</html>

6.2 table 布局

弊端：使用 table 布局对一些属性设置有一定限制

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>等高布局-table布局</title>
<style type="text/css">   
 *{
    margin:0;
    padding:0;
 }
 .center,
 .left,
 .right {
    width:33.3%;
    text-align:center;
    display: table-cell;
    background-color:aquamarine;
 }
.container {
    display:table;
    width:1200px;
    margin:0 auto;
 }    
</style>
</head>
<body>
 <div class="container">
      <div class="left">111111111111</div>
      <div class="center">22222222222222222222222222</div>
      <div class="right">
        333333333333333333333333333333333333333333333333
        333333333333333333333333333333333333333333333333
        333333333333333333333333333333333333333333333333
     </div>
  </div>
</body>
</html>

6.3 flex 布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>等高布局-flex布局</title>
<style type="text/css">   
 *{
    margin:0;
    padding:0;
 }
 .center,
 .left,
 .right {
    text-align:center;
    background-color:aquamarine;
    flex:1
 }
 .container {
    display:flex;
    
    width:1200px;
    margin:0 auto;
 }
</style>
</head>
<body>
 <div class="container">
    <div class="left">111111111111</div>
    <div class="center">22222222222222222222222222</div>
    <div class="right">
	 333333333333333333333333333333333333333333333333
	 333333333333333333333333333333333333333333333333
	 333333333333333333333333333333333333333333333333
 </div>
</div>
</body>
</html>

4、grid 布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>grid布局</title>
<style>   
 *{
    margin:0;
    padding:0;
 }
 .center,
 .left,
 .right {
    text-align:center;
    background-color:aquamarine;
    flex:1
}
 .container {
    display:grid;
    grid-auto-flow: column;
    width:1200px;
    margin:0 auto;
}
</style>
</head>
<body>
<div class="container">
    <div class="left">111111111111</div>
    <div class="center">22222222222222222222222222</div>
    <div class="right">
	 333333333333333333333333333333333333333333333333
	 333333333333333333333333333333333333333333333333
	 333333333333333333333333333333333333333333333333
 </div>
</div>
</body>
</html>

当 main 的高度足够长的时候，footer 会跟在其后面。当 main 元素比较短的时候 (比如小于屏幕宽度)，footer 元素能够粘带在屏幕底部。

7.1 负 margin-bottom

实现思路：用一个元素将 footer 以外的内容包起来，设置负的 margin-bottom，他正好等于 footer 的高度。

<html>
<head>
<meta charset="UTF-8">
<title>粘带布局-负margin-bottom</title>
<style>
     html, body {
        height: 100%;
        margin: 0;
        text-align:center;
     }
     #wrap{
        width: 100%;
        min-height:100%;
        background-color: pink;	
     }
     
     #main{
        padding-bottom: 30px;
     }
     
     #footer{
         width: 100%;
         height: 30px;
         background-color: aquamarine;
         margin-top: -30px;
     } 
</style>
</head>
<body>
    <div>
    	<div>
            <p>main</p>
            <p>main</p>
    	</div>
    </div>
    <div>footer</div>
 </body>
</html>

7.2 footer 上用负的 margin-top

<html>
<head>
<meta charset="UTF-8">
<title>粘带布局-footer 上用负的 margin-top</title>
<style>
    html, body {
	height: 100%;
	margin: 0;
	text-align:center;
   }
     #wrap{
        width: 100%;
        min-height:100%;
        background-color: pink;	
    }
     
     #main{
        padding-bottom: 30px;
    }
     
     #footer{
        width: 100%;
        height: 30px;
        background-color: aquamarine;
        margin-top: -30px;
    } 
</style>
</head>
<body>
   <div>
       <div>
          <p>main</p> 
          <p>main</p>
      </div>
  </div>
  <div>footer</div>
</body>
</html>

7.3 flex

<html>
<head>
<meta charset="UTF-8">
<title>粘带布局-flex</title>
<style>
 html, body {
    margin: 0;
    padding:0;
    text-align:center;
}
 #warp{
	height:100%;
	display: flex;
	flex-direction: column;
 }
 #main{
	background-color: pink;	
	flex:1;
 } 
 #footer{
	background-color: aquamarine;
	height: 30px;
 }
</style>
</head>
<body>
   <div>
       <div>
          <p>main</p> 
          <p>main</p>
      </div>
  </div>
  <div>footer</div>
</body>
</html>

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号