1、當我們想使用百分比來進行兩個盒子的并排
代碼：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <style>
6 html,
7 body {
8 margin: 0;
9 padding: 0;
10 }
11
12 .container {
13 width: 1024px;
14 height: 2000px;
15 margin: 0 auto;
16 }
17
18 .container > div {
19 display: inline-block;
20 }
21
22 .left {
23 width: 80%;
24 height: 100%;
25 background-color: #ff0;
26 }
27
28 .right {
29 width: 20%;
30 height: 100%;
31 background-color: #00f;
32 }
33 </style>
34 </head>
35
36 <body>
37 <div class="container">
38 <div class="left"></div>
39 <div class="right"></div>
40 </div>
41 </body>
42 </html> 當我們想通過inline-block讓兩個div來并排，一個戰父盒子的80%，一個占20%。可能看起來剛好100%，但是會由于代碼中左右兩個盒子之間的空白字元會導緻右邊的盒子掉下來。
2、解決辦法
（1）消除空白字元
讓左右兩個盒子的代碼緊密連起來，就是不要讓他們中間有空白字元
（2）給父盒子添加屬性font-size:0;來消除空白字元，推薦使用此方法
3、字母間距和單詞間距
字母間距——letter-spacing
單詞間距——word-spacing
![阿裡雲ECS（ubutun）下安裝docker[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)