个人笔记

或许为了自身写，或许为了知己写！

常见的CSS布局

发表于 | 更新于 |
字数统计 1.5k 字

单栏布局

常见单栏布局有以下情况：

  • header/content/footer等宽单栏布局
  • header/footer等宽，content略窄单栏布局

第一种情况：

1
2
3
<div class="header"> header </div>
<div class="content"> content </div>
<div class="footer"> footer </div>

css部分

1
2
3
4
5
6
7
8
9
10
11
12
.header{ 
    width:100%; // ①
    background:#c0c0c0; 
 }
.content{ 
    width:100%; // ①
    background:#f1f1f1;
  }
  .footer{
    width:100%; //①
    background:#000
  }

上述设置的width自适应充满屏幕。
如果设置width为固定值或者设置最大宽度(max-width)，当屏幕小于当前设置固定宽度(width)时，会出现滚动条；
而设置的最大宽度(max-width)，则不会出现滚动条。

如果实现居中，解决办法是添加居中属性(margin: 0 auto)即可。

1
2
3
4
5
6
.header{
  max-width:800px;
  background:#c0c0c0;
  margin: 0 auto; // ①
}
// content, footer添加margin: 0 auto;属性

第二种情况：

1
2
3
<div class="header"> header </div>
<div class="content"> content </div>
<div class="footer"> footer </div>

css部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.header{
  max-width: 800px;
  background: #c0c0c0;
  margin: 0 auto; // ①
}
.content{
  max-width: 700px;
  background:#f1f1f1;
  margin: 0 auto; // ①
}
.footer{
  max-width: 800px;
  background:#000;
  margin: 0 auto; // ①
}

注意：

如果header/footer内容宽度不设置，块级元素会充满整个屏幕；
如果header/content/footer内容区域中有设置同一个宽度，通过margin:0 auto居中。

1
2
3
4
5
<div class="header">
  <div class="container"> container </div>
</div>
<div class="content"> content </div>
<div class="footer"> footer </div>

css部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.header{
  max-width: 800px;
  background:#c0c0c0;
  margin: 0 auto; // ①
}
.container{
  max-width:600px; //宽度
  background:#fff;
  margin: 0 auto; // ①
}
.content{
  max-width:600px;  // 宽度
  background:#f1f1f1;
  margin: 0 auto;  // ①
}
.footer{
  max-width:800px;
  background:#000; 
  margin: 0 auto; // ①
}

两栏布局

指一边栏固定宽度，另一边栏充满剩余宽度。
常见两栏布局有以下情况：

  • 左栏固定宽度，右栏自适应
  • 左栏自适应，右栏固定宽度

第一种情况

1
2
<div class="left"> left </div>
<div class="right"> right </div>

1
2
3
4
5
6
7
8
9
10

.left{
  width:200px; //①
  float:left; // ①
  background:red;
}
.right{
  background:blue;
  margin-left:200px; // ②
}

使用flex

1
2
<div class="left"> left </div>
<div class="right"> right </div>

1
2
3
4
5
6
7
8
9
10
11
.body{
  display:flex; // ①
}
.left{
  width:200px; // ②
  background:red;
}
.right{
  flex:1; // ③
  background:blue;
}

第二种情况：(注意DOM布局顺序)

1
2
<div class="right"> right </div>
<div class="left"> left </div>

1
2
3
4
5
6
7
8
9
10
11
.right{
  width:200px; // ①
  background:red;
  position:absolute; // ①
  top:0; // ①
  right:0; // ①
}
.left{
  background:blue;
  margin-right:200px; // ② 
}

使用margin-right属性留出重叠区域。

使用flex

1
2
<div class="left"> left </div>
<div class="right"> right </div>

1
2
3
4
5
6
7
8
9
10
11
.body{
  display: flex; // ①
}
.left{
  flex:1; // ②
  background:red;
}
.right{
  width:200px; // ③
  background:blue;
}

如果是自适应两栏布局使用float + overflow

1
2
3
4
<div class="content">
  <div class="left"> left </div>
  <div class="right"> right </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
.content{
  overflow: hidden;
  zoom: 1;
}
.left{
  float: left;
  background:red;
}
.right{
  overflow: hidden;
  zoom: 1;
  background:blue;
}

这种方式通过overflow触发BFC，这时zoom:1兼容IE6浏览器；如果侧边栏在右侧注意渲染顺序。

三栏布局

指两边栏固定宽度，中间栏自适应布局。

第一种圣杯
实现原理：

  • 三栏都设置左浮动，设置中间栏宽度为100%；

  • 这时左右两栏会掉下来，设置margin-left为负值，添加相对定位并设置left属性与right属性，与中间栏同一行；

  • 设置padding留出间距。

1
2
3
<div class="middle"> middle </div>
<div class="left"> left </div>
<div class="right"> right </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.middle{
  float:left; // ①
  width:100%; // ① 充满屏幕
  background:red;
}
.left{
  width:200px; // ② 设置一个宽度
  margin-left:-100%; // ② 添加float, 与middle同一行
  float：left; // ②
  position: relative; // ② 添加相对定位移并到左边
  left: -200px; // ②
  background:blue;
}
.right{
  width: 200px; // ③
  margin-left: -200px; // ③ 添加float, 与minddle同行
  float: left; // ③
  position: relative; // ③ 添加相对定位 并移到右边
  right:-200px; // ③
  background:yellow; 
}
.body{
  padding: 0 200px; // ④ 左右两边留出间隙
}

第二种双飞翼
实现原理：

  • 三栏左浮动，设置中间栏宽度为100%；

  • 这时左右两栏会掉下来，设置margin-left为负值并设置left属性与right属性，与中间栏同一行；

  • 在中间栏增加一个div，设置margin留出左右间距。

1
2
3
4
5
<div class="middle">
  <div class="container"> container </div>
</div>
<div class="left"> left </div>
<div class="right"> right </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.middle{
  float:left; // ①
  width: 100%; // ①
  background: red;
}
.left{
  width: 200px; // ②
  margin-left: -100%; // ②
  background:blue;
}
.right {
  width:200px; // ③
  margin-left: -200px; // ③
  background: yellow;
}
.container{
  margin: 0 200px; // ④
}

圣杯布局与双飞翼布局对比：

  • 圣杯布局是在父容器的左/右内边距配合两个从列相对定位。

  • 双飞翼布局是把主列嵌套在一个父级块中配合主列左/右外边距。

第三种flex

1
2
3
<div class="left"> left </div>
<div class="middle"> middle </div>
<div class="right"> right </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body{
  display: flex; // ①
}
.left {
  width:200px;
  background:red;
}
.middle {
  flex:1; // ②
  background:blue;
}
.right{
  width:200px;
  background:yellow;
}

补充flex:1

flex是flex-grow，flex-shrink, flex-basis的缩写；默认值：0 1 auto。后两者属性可选。

flex-grow：属性定义了该空间的放大比例，默认值0；表示如果存在剩余空间，也不放大。

flex-skrink：属性定义了该空间的缩小比例，默认值1；表示如果空间不足，该空间将缩小。

flex-basis：属性定义在分配多余空间之前，占据的主轴空间。浏览器根据这个属性，计算主轴是否有剩余空间，默认值auto，表示该空间本来的大小。

flex:属性由两个值：auto(1 1 auto) 和 none(0 0 auto)。

———— / END / ————
0%