css经典布局

发表于 | 更新于 | 分类于 | 评论数：
本文字数： 4.7k | 阅读时长 ≈ 8 分钟

前端经典布局双飞翼和圣杯布局的实现

圣杯布局

css

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
* {

      margin: 0;
      padding: 0;
  }

  header,
  footer {
      line-height: 60px;
      text-align: center;
      background: #cccccc;
      overflow: hidden;
  }

  aside {
      padding: 0 200px;
      overflow: hidden;
  }

  .main {
      background: red;
      width: 100%;
  }

  .left {
      background: green;
      width: 200px;
      margin-left: -100%;
      left: -200px;
      position: relative;
  }

  .right {
      background: blue;
      width: 200px;
      margin-left: -200px;
      right: -200px;
  }

  .main,
  .left,
  .right {
      min-height: 200px;
      float: left;
      position: relative;
  }

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<header>
    header
</header>

<aside>
    <div class="main">
        中间

    </div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</aside>
<footer>
    footer
</footer>

原理

  1. 布局将main放在最前面让其最先渲染

  2. 给main left right设置float: left和position: relative;

  3. 给aside，和main设置宽为100%让main达到自适应

  4. 利用margin-left设置负值让left(margin-left: -100%;)和right(margin-left: -200px(right自身宽度))从而实现左右布局

  5. 给aside设置padding: 0 200px;让其内容不被覆盖

双飞翼布局

css

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   header,
   footer {
       line-height: 60px;
       text-align: center;
       background: #cccccc;
       overflow: hidden;
   }

   aside {
       width: 100%;
       overflow: hidden;
   }

   .main {
       background: red;
       width: 100%;
       min-width: 200px;
       padding: 0 200px;
   }

   .left {
       background: green;
       width: 200px;
       margin-left: -100%;
   }

   .right {
       background: blue;
       width: 200px;
       margin-left: -200px;
   }

   .main,
   .left,
   .right {
       min-height: 200px;
       float: left;
   }

html

1
2
3
4
5
6
7
8
9
10
<header>header</header>
   <aside>
       <div class="main">
       中间

       </div>
       <div class="left">left</div>
       <div class="right">right</div>
   </aside>
   <footer>foote</footer>

原理

  1. 原理与圣杯布局类似

  2. 但是不用相对定位

  3. 在main中多一个div标签(也可以给main设置box-sizing: border-box;来代替标签)

  4. 利用margin-left设负值拉回，区别与圣杯布局margin-left设置在main上

子绝父相的方法实现

css

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
* {
       margin: 0;
       padding: 0;
   }

   header,
   footer {
       overflow: hidden;
       line-height: 60px;
       text-align: center;
       background: #cccccc;
   }

   aside {
       position: relative;
       padding: 0 200px;
       overflow: hidden;
   }

   .main {
       min-height: 200px;
       width: 100%
   }

   .left {
       background: red;
       top: 0;
       left: 0;
   }

   .right {
       background: blue;
       top: 0;
       right: 0;
   }

   .left,
   .right {
       position: absolute;
       min-height: 200px;
       width: 200px;
   }

html

1
2
3
4
5
6
7
8
9
10
11
12
<header>header</header>
   <aside>
       <div class="main">main
           中间

       </div>
       <div class="left">left </div>
       <div class="right">right</div>
   </aside>
   <footer>
       footer
   </footer>

原理

  1. 子绝父相可是说是布局中的万精金油了

  2. 给aside相对定位，left和right设置绝对定位，给main宽度设置100%

  3. 然后给left设置top: 0; left: 0;和right设置top: 0; right: 0;定位左右

  4. 给aside设置padding: 0 200px;

flex布局实现(原来可以如此简单)

css

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
27
28
29
30
31
32
33
34
35
36
37
38
39
* {
     margin: 0;
     padding: 0;
 }

 header,
 footer {
     overflow: hidden;
     line-height: 60px;
     background: red;
     text-align: center;
 }

 aside {
     overflow: hidden;
     display: flex;
 }

 aside div {
     min-height: 200px;
 }

 .main {
     flex-grow: 1;
     background: blue;
     min-width: 200px;
     word-wrap:break-word;
 }

 .left {
     flex-basis: 200px;
     order: -1;
     background: bisque
 }

 .right {
     flex-basis: 200px;
     background: aqua
 }

html

1
2
3
4
5
6
7
8
9
10
11
12
13
<header>
       header
   </header>
   <aside>
       <div class="main">main</div>

       <div class="left">left</div>

       <div class="right">right</div>
   </aside>
   <footer>
       footer
   </footer>

原理

  1. 给aside设置display: flex;

  2. 给main设置flex-grow: 1(flex:1)让其分剩余的宽度达到main自适应

  3. 再给left和right设置flex-basis属性设置其宽度，给left设置order属性为-1默认0达到left在第一个的目的

5d0382b03af3f39856

Δ~~~~Δ
ξ •ェ• ξ
ξ　~　ξ
ξ　　 ξ
ξ　　　“~～~～〇
ξ　　　　　　 ξ
ξ　ξ　ξ~～~ξ　ξ
　ξ_ξξξ　ξξξ_ξ
　　ヽ(´•ω•)ノ
　　　 |　 /
　　　 UU”

本文结束谢谢大家的阅读

坚持技术分享，您的支持将鼓励我继续创作！
0%