058 - 三位一体(II)

不二如是

上一集：057 - 三位一体(I)

---

哈哈，废话不多说了，#敲黑板时刻！

---

在线视频：传送门

---

课程思维导图

猛戳

                               
登录/注册后可看大图

超清

---

上一节实现了单列布局，这节来看两列和三列布局。

两列布局

最简单的方式就是使用浮动 float：

1. <!DOCTYPE html>
   
2. <html>
   
3. 
   
4. <head>
   
5.   <meta charset="utf-8">
   
6.   <title>两列布局演示</title>
   
7.   <style type="text/css">
   
8.     .box {
   
9.       width: 1024px;
   
10.     }
    
11. 
    
12.     .left {
    
13.       width: 512px;
    
14.       padding: 20px;
    
15.       background-color: pink;
    
16.       float: left;
    
17.     }
    
18. 
    
19.     .right {
    
20.       width: 512px;
    
21.       padding: 20px;
    
22.       background-color: lightblue;
    
23.       float: left;
    
24.     }
    
25.   </style>
    
26. </head>
    
27. 
    
28. <body>
    
29.   <div class="box">
    
30.     <div class="left">
    
31.       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, ipsam earum excepturi eos quod distinctio
    
32.         nihil modi blanditiis reprehenderit eligendi architecto error non magni dicta rerum suscipit qui repudiandae
    
33.         corporis?</p>
    
34.     </div>
    
35.     <div class="right">
    
36.       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore nihil odio nulla pariatur necessitatibus in
    
37.         cumque porro quaerat nemo aperiam vel praesentium corrupti ut, dolores reiciendis. Adipisci vero magnam optio.
    
38.       </p>
    
39.     </div>
    
40.   </div>
    
41. </body>
    
42. 
    
43. </html>

复制代码

效果：

现在 left 和 right 都是块级元素，所以上下布局。

在 left 和 right 中分别添加 box-sizing:border-box：

1. .left {
   
2.       width: 512px;
   
3.       padding: 20px;
   
4.       background-color: pink;
   
5.       float: left;
   
6.       box-sizing: border-box;
   
7.     }
   
8. 
   
9.     .right {
   
10.       width: 512px;
    
11.       padding: 20px;
    
12.       background-color: lightblue;
    
13.       float: left;
    
14.       box-sizing: border-box;
    
15.     }

复制代码

效果：

这个利用之前讲过的盒模型中，对于块级盒子设置为 border box，边框盒包裹内容和内边距。

两个盒子就会并排在一行显示。

这种方法比较简陋，随着页面缩小，元素不会自动适配。

想优化就需要外层设置 max-width 属性，内层设置 width 和 float:left：

1. .box {
   
2.       /* 自适应修改 */
   
3.       max-width: 1024px;
   
4.       margin: auto;
   
5.     }
   
6. 
   
7.     .left {
   
8.       /* 自适应修改 */
   
9.       width: 50%;
   
10.       padding: 20px;
    
11.       box-sizing: border-box;
    
12.       background-color: pink;
    
13.       float: left;
    
14.     }
    
15. 
    
16.     .right {
    
17.       /* 自适应修改 */
    
18.       width: 50%;
    
19.       padding: 20px;
    
20.       box-sizing: border-box;
    
21.       background-color: lightblue;
    
22.       float: left;
    
23.     }

复制代码

效果：

很实用的技巧，请大家熟练掌握。

还有一种情况是侧栏固定宽度，主内容自适应的布局，用语义化标签来实现：

1. <!DOCTYPE html>
   
2. <html>
   
3. <head>
   
4.     <meta charset="utf-8">
   
5.     <title>两列布局演示</title>
   
6.     <style type="text/css">
   
7.         aside {
   
8.             width: 20%;
   
9.             height: 500px;
   
10.             background-color: pink;
    
11.             float: left;
    
12.         }
    
13.    
    
14.         main {
    
15.             width: 80%;
    
16.             height: 500px;
    
17.             margin-left: 20%;
    
18.             background-color: lightblue;
    
19.         }
    
20.     </style>
    
21. </head>
    
22. <body>
    
23.     <aside></aside>
    
24.     <main></main>
    
25. </body>
    
26. </html>

复制代码

效果：

边栏浮动到左侧，就会遮住右侧没有使用浮动的主内容。

可以对主内容施加一个 margin-left 属性，使其避开左侧内容的覆盖。

margin 属性的作用是设置元素的外边距，那这个外边距是如何弄出来的呢？

是通过移动自身的位置得到的。

比如这里我们设置 margin-left为20%，说明该元素向右移动 20% 的位置，这样左侧就有了 20% 的外边距啦。

好了，同样的效果，如果不使用浮动，我们还可以通过 position 属性来实现：

1.     <style type="text/css">
   
2.         aside {
   
3.             width: 20%;
   
4.             height: 500px;
   
5.             background-color: pink;
   
6.             position: absolute;
   
7.             top: 0;
   
8.             left: 0;
   
9.         }
   
10.    
    
11.         main {
    
12.             width: 80%;
    
13.             height: 500px;
    
14.             margin-left: 20%;
    
15.             background-color: lightblue;
    
16.         }
    
17.     </style>

复制代码

效果：

注意箭头所指支持，有空隙了！

absolute 属性是相对于最近一个设置了 position 属性值的祖先元素重新定位。

可以人为地给它包裹一个 position 属性为非 static 的父元素：

1. <!DOCTYPE html>
   
2. <html>
   
3. 
   
4. <head>
   
5.   <meta charset="utf-8">
   
6.   <title>两列布局演示</title>
   
7.   <style type="text/css">
   
8.     aside {
   
9.       width: 20%;
   
10.       height: 500px;
    
11.       background-color: pink;
    
12.       position: absolute;
    
13.       top: 0;
    
14.       left: 0;
    
15.     }
    
16. 
    
17.     main {
    
18.       width: 80%;
    
19.       height: 500px;
    
20.       margin-left: 20%;
    
21.       background-color: lightblue;
    
22.     }
    
23. 
    
24.     /* 新增外层 */
    
25.     .container {
    
26.       position: relative;
    
27.     }
    
28.   </style>
    
29. </head>
    
30. 
    
31. <body>
    
32.   <div class="container">
    
33.     <aside></aside>
    
34.     <main></main>
    
35.   </div>
    
36. </body>
    
37. 
    
38. </html>

复制代码

这样就会很和谐啦～


三列布局

相对于两列布局来说，三列布局的灵活性得到了进一步的加强。

三列布局有几种经典方式：

• 浮动
• 绝对定位
• margin 负值法
  

我们一个一个来说。

浮动大法

此方法最简单，左边栏向左浮动，右边栏向右浮动，中间主内容同样通过设置左右 margin 来避开覆盖：

1. <!DOCTYPE html>
   
2. <html>
   
3. <head>
   
4.     <meta charset="utf-8">
   
5.     <title>三列布局演示</title>
   
6.     <style type="text/css">
   
7.         .left {
   
8.             width: 200px;
   
9.             height: 500px;
   
10.             float: left;
    
11.             background-color: pink;
    
12.         }
    
13.    
    
14.         .right {
    
15.             width: 200px;
    
16.             height: 500px;
    
17.             float: right;
    
18.             background-color: lightblue;
    
19.         }
    
20.    
    
21.         .center {
    
22.             height: 500px;
    
23.             margin: 0 200px;
    
24.             background-color: cornsilk;
    
25.         }
    
26.     </style>
    
27. </head>
    
28. <body>
    
29.     <div class="left"></div>
    
30.     <div class="right"></div>
    
31.     <div class="center"></div>
    
32. </body>
    
33. </html>

复制代码

效果自己实现。

有两个点要注意：

• 中间主内容的 HTML 代码必须放在最后，否则右边栏会掉到下一行
• 中间主内容不能去指定它的宽度，因为我们需要中间列的宽度自适应，应该让它默认 auto 就可以了
  

绝对定位法

绝对定位法也是通过将左右两个边栏脱离文档流，并固定于左右两侧，中间主内容同样通过设置左右 margin 来避开覆盖：

1. <!DOCTYPE html>
   
2. <html>
   
3. <head>
   
4.     <meta charset="utf-8">
   
5.     <title>三列布局演示</title>
   
6.     <style type="text/css">
   
7.         .left {
   
8.             width: 200px;
   
9.             height: 500px;
   
10.             position: absolute;
    
11.             top: 0;
    
12.             left: 0;
    
13.             background-color: pink;
    
14.         }
    
15.    
    
16.                 .right {
    
17.             width: 200px;
    
18.             height: 500px;
    
19.             position: absolute;
    
20.             top: 0;
    
21.             right: 0;
    
22.             background-color: lightblue;
    
23.         }
    
24.    
    
25.                 .center {
    
26.             height: 500px;
    
27.             margin: 0 200px;
    
28.             background-color: cornsilk;
    
29.         }
    
30.    
    
31.         .container {
    
32.             position: relative;
    
33.         }
    
34.     </style>
    
35. </head>
    
36. <body>
    
37.     <div class="container">
    
38.         <div class="left"></div>
    
39.         <div class="center"></div>
    
40.         <div class="right"></div>
    
41.     </div>
    
42. </body>
    
43. </html>

复制代码

如果理解两列布局，这个也没难度。

margin负值法

这个是最难理解滴！

在日常应用也比较广泛的像：圣杯布局和双飞翼布局

预知如何布局，请先去看：一份关于负外边距使用的权威指南

---

课后作业，完成了吗？

传送门

---

                               
登录/注册后可看大图

下一集：059 - 三位一体(III)

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅 ）

aaron.yang

占沙发

yanghongchen666

抢板凳

weiter

坐地板

心驰神往

回复回复回复

hornwong

QBR

学习了