css_14 | CSS——把「能夠動的盒子」更優雅地展現：③ 經常使用的「佈局」

本文推薦 PC 端閱讀~

本文版權歸 「公衆號 | 前端一萬小時」 全部，未經受權，請勿轉載！
複製代碼

css_14
複製代碼

響應式佈局原理？
複製代碼

---

前言： 拿到一張設計稿，咱們首要的就是從宏觀上考慮這整個頁面的「佈局」。隨着前端技術的不斷更替，之前不少老的佈局方式如今也慢慢淡化了，那哪些是咱們最基本最經常使用的佈局方式呢？

本篇給出答案，屬於必掌握篇。

---

1 什麼是佈局？

現有樣式不能知足人們的需求：

• 文檔流
• 浮動
• 定位

人們須要：

• 導航欄+內容
• 導航欄+內容+廣告欄
• 從上到下、從左到右、定寬、自適應...

2 最經常使用的佈局有哪些？

2.1 單列布局

現方式——定寬 + 水平居中。

2.1.1 非通欄

🔗源碼及效果展現
html

<div id="header"  class="layout">頭部</div>
<div id="content" class="layout">內容</div>
<div id="footer" class="layout">尾部</div>
複製代碼

css

.layout {
  width: 960px;
/*❗️實際網站中經常用的都是 width ，而沒有用 max-width 。 用 max-width 的好處就是它不會由於用戶屏幕的變小而出現左右滾動條。 反之用 width 就會出現這種狀況。 可是，因爲如今的網頁都很複雜，信息不少。若是用 max-width ， 雖然它會按照用戶的屏幕大小來顯示網頁，但很難讓它去作合適的佈局。 那與其這樣，咱們開發者更願意用 width ，即便有個滾動條，但至少裏邊的內容不會亂。 */ 


  margin: 0 auto;
}
#header {
  height: 60px;
  background: red;
}
#content {
  height: 400px;
  background: blue;
}
#footer {
  height: 50px;
  background: yellow;
}
複製代碼

2.1.2 通欄

🔗源碼及效果展現
html

<div id="header">
  <div class="layout">頭部</div>
</div>
<div id="content" class="layout">內容</div>
<div id="footer">
  <div class="layout">尾部</div>
</div>
複製代碼

css

.layout {
  width: 960px;
  margin: 0 auto;
}

body {
  min-width: 960px;
/*❗️❗️❗️對比加這個 min-width 和不加的區別，拉動屏幕大小， 咱們能夠看見給 body 設置 min-width 能夠去掉滾動背景色 bug。 */

}

#header {
  height: 60px;
  background: red;
}
#content {
  height: 400px;
  background: blue;
}
#footer {
  height: 50px;
  background: yellow;
}
複製代碼

2.2 雙列布局

一列固定寬度，另一列自適應寬度。
實現方式——浮動元素 + 普通元素 margin。

2.2.1 側邊欄在左

🔗源碼及效果展現
html

<div id="content">
  <div class="aside">aside</div>
  <div class="main">content</div>
</div>
<div id="footer">footer</div>
複製代碼

css

#content:after {
  content: '';
  display: block;
  clear: both;
}
.aside {
  width: 200px;
  height: 500px;
  background: yellow;
  float: left;
}
.main {
  margin-left: 210px;
  height: 400px;
  background: red;
}
#footer {
  background: #ccc;
}
複製代碼

2.2.2 側邊欄在右

時刻記着頁面元素的渲染順序！

🔗源碼及效果展現
html

<div id="content">
  <div class="aside">aside</div>
  <div class="main">content</div>
</div>
<div id="footer">footer</div>
複製代碼

css

#content:after {
content: '';
display: block;
clear: both;
}
.aside {
  width: 200px;
  height: 500px;
  background: yellow;
  float: right;    
}    
.main {      
  margin-right: 210px;      
  height: 400px;      
  background: red;    
}    
#footer {      
  background: #ccc;    
}
複製代碼

2.3 三列布局

兩側兩列固定寬度，中間列自適應寬度。
⚠️注意順序！

🔗源碼及效果展現
html

<div id="content">

<!-- 注意爲何不是 main 在前面 -->

  <div class="menu">aside</div>
  <div class="aside">aside</div>
  <div class="main">content</div>
</div>
<div id="footer">footer</div>
複製代碼

css

#content:after {
  content: '';
  display: block;
  clear: both;
}
.menu {
  width: 100px;
  height: 500px;
  background: pink;
  float: left;
}
.aside {
  width: 200px;
  height: 500px;
  background: yellow;
  float: right;
}
.main {
  margin-left: 110px; 
  /*注意爲何要加 margin-left*/

  margin-right: 210px;
  height: 400px;
  background: red;
}

#footer {
  background: #ccc;
}
複製代碼

2.4 水平等距排列

主要關注「負 margin 」的運用！

🔗源碼及效果展現
html

<div class="ct">
  <ul>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">6</li>
    <li class="item">7</li>
    <li class="item">8</li>
  </ul>
</div>
複製代碼

css

ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ct{
  overflow:hidden;
  width: 640px;
  border: 1px dashed orange;
  margin: 0 auto;
}

.ct .item {
  float:left;
  margin-left: 20px;
  margin-top: 20px;
  width:200px;
  height:200px;
  background: red;
}
.ct>ul {
  margin-left: -20px;  

}
複製代碼

---

後記： 對於「佈局」，咱們還有一些其餘更新、更強大的方式：彈性佈局 flex、grid 佈局等等，咱們隨後會在「前端綜合」系列文章中再一一探討，這篇咱們先掌握基礎。

前端知識突飛猛進，迭代很快，但最基本的知識是永遠都不會變的。因此，夯實好基礎，以不變應萬變！

祝好，qdywxs ♥ you！