CSS精髓：这些布局你都学废了吗？

前言

成都创新互联长期为1000多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为广宗企业提供专业的成都网站设计、网站建设、外贸网站建设，广宗网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

最近忙里偷闲，给自己加油充电的时候，发现自己脑海中布局这块非常的凌乱混杂，于是花了一些时间将一些常用的布局及其实现方法整理梳理了出来，在这里，分享给大家。

单列布局

单列布局是最常用的一种布局，一般是将一个元素作为容器，设置一个固定的宽度，水平居中对齐。

单列布局一般有两种形式：

(图片来源：https://blog.csdn.net/Ace_Arm/article/details/81036129)

一栏布局

一栏布局头部、内容、底部宽度一致

效果图

代码实现

html

css

 
 
 
 
  
  
  
  header,footer{ 
  
  
  
      width: 1200px; 
  
  
  
      height: 100px; 
  
  
  
      margin: 0 auto; 
  
  
  
      background: black; 
  
  
  
  } 
  
  
  
  main{ 
  
  
  
      width: 1200px; 
  
  
  
      height: 600px; 
  
  
  
      background: red; 
  
  
  
      margin: 0 auto; 
  
  
  
  }

一栏布局(通栏)

一栏布局(通栏)头部和底部宽度一致，占满整个页面，中间内容区域宽度较小不占满屏幕。

效果图

代码实现

html

css

 
 
 
 
  
  
  
  header,footer{ 
  
  
  
      width: 100%; 
  
  
  
      height: 100px; 
  
  
  
      background: black; 
  
  
  
  } 
  
  
  
  main{ 
  
  
  
      width: 1200px; 
  
  
  
      height: 600px; 
  
  
  
      background: red; 
  
  
  
      margin: 0 auto; 
  
  
  
  }

单列布局是最为基础和简单的一种，实现方法并不局限于以上两种，大家可自由发挥，找到更多的方法来实现。

2列布局

2列布局的使用频率也非常高，其实现效果主要就是将页面分割成左右宽度不等的两列。一般宽度较小的一列会设置为固定宽度，作为侧边栏之类的，而另一列则充满剩余宽度，作为内容区。

在后台管理系统及api文档中使用较为广泛。

效果图

先来看看效果：

代码实现

实现两列布局的方法有很多，这里主要介绍两种方法。

calc函数

calc() 函数用于动态计算长度值。实现思路很简单，侧边栏宽度固定，设置绝对定位，使其脱离文档流，内容区域通过calc()函数计算剩余宽度并设置宽度，再加一个margin-left，值为侧边栏的宽度。

代码如下：

html

*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
}
.slider,.main{
height: 100%;
}
.slider{
position: absolute;
left: 0;
top: 0;
width: 100px;
background: black;
}
.main{
width: calc(100% - 100px);
background: red;
margin-left: 100px;
}

通过flex属性实现思路也很简单，将父元素设置为flex，侧边栏宽度固定，内容区域设置flex:1即可充满剩余区域。

*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
}
body{
display: flex;
}
.slider,.main{
height: 100%;
}
.slider{
width: 100px;
background: black;
}
.main{
flex: 1;
background: red;
}

中间
左边
右边

* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
}
div{
height: 100%;
}
.main>div {
float: left;
}
.left {
width: 200px;
background: red;
margin-left: -100%;
}
.right {
width: 200px;
background: blue;
margin-left: -200px;
}
.middle {
width: 100%;
background: yellow;
}
.content {
margin-left: 200px;
margin-right: 200px;
}

* {
margin: 0;
padding: 0;
}
.main {
height: 200px;
padding: 0 150px 0 200px;
background: greenyellow;
*zoom: 1;
}
.left,
.center,
.right {
float: left;
}
.center {
width: 100%;
height: 200px;
background: red;
}
.left {
width: 200px;
height: 200px;
background: yellow;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 150px;
height: 200px;
background: gainsboro;
margin-left: -150px;
position: relative;
left: 150px;
}

* {
padding: 0px;
margin: 0px;
}
body,html{
width: 100%;
height: 100%;
}
body{
display: flex;
}
#left,
#right {
width: 100px;
background-color: #0FC;
}
#main {
flex: 1;
background-color: #999;
}

body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
.content {
flex: 1;
}
.footer{
flex: 0;
}

html, body, .wrapper {
height: 100%;
}
body > .wrapper {
height: auto;
min-height: 100%;
}
.content {
padding-bottom: 150px; /* 必须使用和footer相同的高度 */
}
.footer {
position: relative;
margin-top: -150px; /* footer高度的负值 */
height: 150px;
clear:both;
}

.clearfix{
display: inline-block;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

标题一
标题二
标题三
标题四

let num = 20
let html = ''
for (var i = 0; i < num; i++) {
html += `
${i + 1}
`
}
Array.prototype.slice.call(document.getElementsByClassName('content')).forEach(item=>{
item.innerHTML = html
})

main {
width: 400px;
height: 300px;
margin: 200px auto;
overflow: auto;
}
header {
position: sticky;
top: 0;
height: 30px;
background-color: blanchedalmond;
}