阅读 3152

【CSS】CSS布局解决方案(终结版)

前言

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

全文概要

CSS布局方案.jpg

1 页面开发流程布局思路

1.1 确定页面版心

常见的版心宽度:

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

1.2 页面整体布局

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

1.3 单个模块布局

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

CSS书写顺序:

  • 位置属性(position, top, right, z-index, display, float等)
  • 大小(width, height, padding, margin)
  • 文本(font, line-height, letter-spacing, color- text-align等)
  • 背景(background, border等)
  • 其他(animation, transition等)
  1. 一般模块是由标题内容两个部分组成。
  2. 如果盒子本身有宽高,使用padding需要进行计算,使用margin有时会导致外边距合并塌陷问题。

1.4 行间距计算

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

image.png 行间距是基线到基线的距离,设置给行高。

2 水平垂直居中布局

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

  • 水平居中: 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>
复制代码

image.png

(1) margin

  • 水平居中:margin:0 auto

image.png

  • 垂直居中:margin-top

image.png

.son {
  /*水平居中*/
  margin: 0 auto;
  /*垂直居中 (父元素高-子元素高)/2*/
  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 单列布局

3.1 普通布局

头部、内容、底部

普通布局.png

<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实现水平居中

内容居中.png

<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 两栏布局

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

4.1 float

实现思路:
普通流体BFC后(float:left)和浮动元素不会产生交集,顺着浮动元素形成自己的封闭上下文。

image.png

<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

image.png

<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 三栏布局

5.1 什么是三栏布局

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

image.png

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

5.2 flex布局

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

flex布局.png

<!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 圣杯布局

  • 三个盒子都设置浮动

image.png

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

image.png

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

image.png

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

image.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        min-width: 800px;
        height: 600px;
        /* 4、padding左右盒子的宽度 */
        padding-left:200px;
        padding-right:200px;
    }
    .left{
        /* 1、三个盒子都设置浮动 */
        float:left;
        width:200px;
        height: 600px;
        /* 2、走中间盒子的-100% */
        margin-left:-100%;
        background: pink;
        /* 5 相对定位,往回走 */
        position:relative;
        left:-200px;
    }
    .center{
        float:left;
        width: 100%;
        height: 600px;
        background: aquamarine;
    }
    .right{
        float:left;
        width:200px;
        height: 600px;
        /*/3、走负自身的宽度 */
        margin-left:-200px;
        background: skyblue;
        /* 6 相对定位,往回走 */
        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 双飞翼布局

  • 三个盒子都设置浮动

image.png

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

image.png

  • 调整中间盒子margin

image.png

<!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{
        /* 1、三个盒子都设置浮动 */
        float:left;
        width:200px;
        height: 600px;
        /* 2、走中间盒子的-100% */
        margin-left:-100%;
        background: pink;
    }
    .content{
        /* 4、调整中间盒子margin */
        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;
        /*3、走负自身的宽度 */
        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 等高布局

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

image.png

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;
            /* 开启BFC限制内容 */
            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;
    /* flex-direction: row; */
    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.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>
复制代码

7 粘带布局

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

20210429160149788.jpg

7.1 负margin-bottom

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

<html>
<head>
<meta charset="UTF-8">
<title>粘带布局-负margin-bottom</title>
 <style>
/* 用一个元素将footer以外的内容包起来,设置负的margin-bottom,让他正好等于footer的高度 */
html, body {
     margin: 0;
     padding:0;
     text-align:center;
}
#wrap{
      min-height:100%;
      background-color: pink;	
      margin-bottom: -30px;
}
#footer,#main{
      height: 30px;
} 
#footer{
     background-color: aquamarine;
}
</style>
</head>
<body>
    <div id="wrap">
        <div id="main">
            main<br/>
            main<br/>
        </div>
    </div>
    <div id="footer">footer</div>
</body>
</html>
复制代码

image.png

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;
    }
     /*wrap包裹内容的最小高度是100%,此时将footer的部分通过margin-top拉上去30px。 */
     #footer{
        width: 100%;
        height: 30px;
        background-color: aquamarine;
        margin-top: -30px;
    } 
</style>
</head>
<body>
   <div id="wrap">
       <div id="main">
          <p>main</p> 
          <p>main</p>
      </div>
  </div>
  <div id="footer">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 id="wrap">
       <div id="main">
          <p>main</p> 
          <p>main</p>
      </div>
      <div id="footer">footer</div>
   </div>
</body>
</html>
复制代码

结语

本篇文章就到此为止啦,由于本人经验水平有限,难免会有纰漏,对此欢迎指正。如觉得本文对你有帮助的话,欢迎点赞❤❤❤,写作不易,持续输出的背后是无数个日夜的积累,您的点赞是持续写作的动力,感谢支持!

文章分类
前端
文章标签