container的使用讓網頁的布局變得更加便利
<div class="container"></div>
.container { width: 1200px; margin: 0 auto; }
container屬性設置了上下外邊距為0，左右自動，在整個頁面中布置了一個自動左右居中的區域，根據頁面布局的需要，所有適合這樣布局的部分，都可以嵌套在container下面，作為container的子級。
container可以根據子級的內容，自動調整布局，針對整個頁面進行設置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>container</title> <link rel="stylesheet" href="container.css"> </head> <body> <div class="root"> <div class="content"> <div class="container"> <div class="part0"> <div class="part1">內容1</div> <div class="part2">內容2</div> </div> </div> <div class="part3">內容3</div> </div> </div> </body> </html>
body { margin: 0; padding: 0; } .container { width: 600px; margin: 0 auto; } .content { background: #ff6700; position: relative; width: 50%; } .part0 { padding:50px 0; display: flex; justify-content: space-between; } .part1 { background: #0395e1; width: 200px; height: 100px; } .part2 { background: #83c44e; width: 200px; height: 100px; } .part3 { background: deeppink; width: 400px; height: 50px; }
上面的代碼得到下面的頁面：
上面能看出，內容1和內容2都是在container內部，整體自動對齊，內容3 不在container內，位置默認在頁面最左側。
因此，根據頁面布置的需求，合理的利用container布局，會節省很多時間