0%

布局的套路

发表于 更新于

原则

兼容 IE8 float
其他 flex

  • 不到万不得已，不要写死 width 和 height
  • 尽量用高级语法，如 calc、flex
  • 如果是 IE，就全部写死

口诀

  1. float
    1. 儿子全加 float: left （right）
    2. 老子加 .clearfix
  2. flex
    1. 老子加 display: flex
    2. 老子加 justify-content: space-between;
1
2
3
4
5
6
7
8
.clearfix:after{
    content: '';
    display: block;
    clear: both;
}
.clearfix{
    zoom: 1;
}<!--IE6-->

float 平均布局

1
2
3
4
5
6
7
8
9
10
<div class="super clearfix">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</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
26
.super{
  width: 860px;
  background: green;
  margin: 0 auto;
}

.child{
  width: 200px;
  height: 200px;
  background: #eee;
  float: left;
  margin: 10px;
}

.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

.child:nth-child(4n+1){
  margin-left: 0;
}
.child:nth-child(4n){
  margin-right: 0;
}

但是 ie 并没有完全支持 nth-child 所以还能多加一个 div 来包裹

1
2
3
4
5
6
7
8
9
10
11
12
<div class="super">
  <div class="superchild clearfix">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</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
.super{
  width: 860px;
  background: green;
  margin: 0 auto;
}

.child{
  width: 200px;
  height: 200px;
  background: #eee;
  float: left;
  margin: 10px;
}

.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

.superchild {
  margin-left: -10px;
  margin-right: -10px;
}

flex 平均布局

1
2
3
4
5
6
7
8
9
10
<div class="super">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.super{
  width: 860px;
  background: green;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.child{
  width: 200px;
  height: 200px;
  background: #eee;
  margin: 10px 0;
}

但如果最后一行不是一行该有个数少了几个看上去就很难看，这时候若果要有和之前一样的效果就换回 float， 或类似第二种

1
2
3
4
5
6
7
8
9
10
11
12
<div class="super">
  <div class="superchild">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.super{
  width: 860px;
  background: green;
  margin: 0 auto;
}
.superchild{
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}

.child{
  width: 200px;
  height: 200px;
  margin: 10px;
  background: #eee;
}

但是到了手机端的话要记得 overflow： hidden

图片可以使用 background： url（）

background-size：cover

使用 calc

用了 flex 那就可以不写死 width

可以这样 不过要注意 calc() 使用算术符号前后要空格

1
width：calc（25% - 20px）

一般不要将 class 命名 为 .ad 可能会被当做广告给屏蔽。

做了布局的 div 就不要在上面干别的事，另再加其他的 div