前言
每一個元素，其實都可以將它看成是一個盒子。網頁的佈局裡面也是大盒子不斷的套著小盒子，那麼我們首先要認識一下一個盒子的一些基本知識。
content：內容區域，可以由width與height來進行設定。
padding：內邊距，指的是content與border的距離。
border：邊框，邊框也佔據整個盒子模型的體積大小。
margin：外邊距，指的是該盒子與另一個盒子的距離。
內容區域
基本設定
我們很少來規定一個盒子固定的大小，基本都是由內容進行撐開。當然如果你想設定出一個固定的盒子大小，可以使用height以及width來設定盒子的高度與寬度。
一定要注意！使用height以及width設定出來的盒子大小隻是針對content區域，任何對padding以及border的設定都可能會改變盒子的大小，從而引發整個頁面的混亂！我們增加了padding或者width就需要去減去width以及height，這十分的麻煩！
如何計算一個標準盒模型的大小？公式如下：
width+padding*2+border
外邊距
基本使用
如果想修改盒子的外邊距，就用margin進行修改，單位可以是px，em，rem以及%
margin一個值：上下左右
margin兩個值：上下 左右
margin三個值：上 左右 下
margin四個值： 上 下 左 右
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> div{ width: 200px; height: 200px; /* 這樣做顯然太麻煩了，我們有更簡便的方式 */ /* margin-top: 40px; margin-left: 40px; margin-right: 40px; margin-bottom: 40px; */ /* 上下左右 */ margin: 40px; /* 上下 左右 */ margin: 40px 40px; /* 上 左右 下 */ margin: 40px 30px 40px; /* 上 右 下 左 */ margin: 50px 40px 30px 20px; } </style> <title>Document</title> </head> <body> <div></div> </body> </html>
盒子居中
當一個大盒子中巢狀了一個小盒子，而我們要想將小盒子水平居中可以設定margin:auto;。
PS：關於小盒子的垂直居中涉及到margin的一個塌陷問題，後面會慢慢探討。
負值設定
當margin有兩個值設定為了負數，小盒子會跑出大盒子外。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> main{ width: 300px; height: 300px; } article{ width: 200px; height: 200px; margin:0 -40px; } </style> <title>Document</title> </head> <body> <main> <article></article> </main> </body> </html>
注意：同級縱向合併
同級縱向合併指的是兩個相同級別的盒子，一個設定margin-bottom，一個設定margin-top的話，會比較這兩個值的大小，然後取最大值進行設定。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body :nth-child(1){ width: 100px; height: 100px; margin-bottom: 30px; } body :nth-child(2){ width: 100px; height: 100px; margin-top: 50px; } </style> <title>Document</title> </head> <body> <div></div> <div></div> </body> </html>
注意：越級縱向邊距
當一個子級的盒子去設定margin-top或者margin-bottom想與父級保持一定的距離，那麼父級就必須擁有一些引數或者內容。若父級沒有引數或者內容則該子級盒子就會不斷的向上找，找父級的兄弟級，找父級的父級，直到找到<html>標籤。
Ps：橫向合併不會產生這樣的問題，所以margin:auto;大多數情況下都是用來橫向合併的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> main{ width: 300px; height: 300px; } article{ width: 200px; height: 200px; margin-top: 20px; } </style> <title>Document</title> </head> <body> <main>父級有內容了 <article></article> </main> </body> </html>
內邊距
基本使用
內邊距使用 padding 進行定義，使用語法與 margin 相似。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> div{ width: 200px; height: 200px; /* 這樣做顯然太麻煩了，我們有更簡便的方式 */ /* padding-top: 40px; padding-left: 40px; padding-right: 40px; padding-bottom: 40px; */ /* 上下左右 */ padding: 40px; /* 上下 左右 */ padding: 40px 40px; /* 上 左右 下 */ padding: 40px 30px 40px; /* 上 右 下 左 */ padding: 50px 40px 30px 20px; } </style> <title>Document</title> </head> <body> <div>內容區域</div> </body> </html>
邊框設計
對於邊框設計來說，它由三部分組成，邊框的樣式，邊框的寬度，邊框的顏色。
邊框樣式
定義邊框樣式，請使用border-style，它具有以下的一些值。
| 值 | 描述 |
|---|---|
| none | 定義無邊框。 |
| dotted | 定義點狀邊框。在大多數瀏覽器中呈現為實線。 |
| dashed | 定義虛線。在大多數瀏覽器中呈現為實線。 |
| solid | 定義實線。 |
| double | 定義雙線。雙線的寬度等於 border-width 的值。 |
| groove | 定義 3D 凹槽邊框。其效果取決於 border-color 的值。 |
| ridge | 定義 3D 壟狀邊框。其效果取決於 border-color 的值。 |
| inset | 定義 3D inset 邊框。其效果取決於 border-color 的值。 |
| outset | 定義 3D outset 邊框。其效果取決於 border-color 的值。 |
邊框寬度
定義邊框的寬度，請使用下表中的屬性，它的值可以是px，em，rem等等。
| 屬性名稱 | 說明 |
|---|---|
| border-top-width | 頂邊寬度 |
| border-right-width | 右邊寬度 |
| border-bottom-width | 下邊寬度 |
| border-left-width | 左邊寬度 |
| border-width | 四邊寬度 |
邊框顏色
定義邊框的顏色，請使用下表中的屬性，它的值可以是rgb，rgba，#16網頁色。
| 屬性名稱 | 說明 |
|---|---|
| border-top-color | 頂邊顏色 |
| border-right-color | 右邊顏色 |
| border-bottom-color | 下邊顏色 |
| border-left-color | 左邊顏色 |
| border-color | 四邊顏色 |
簡寫
我們可以指定任意一條邊，或者所有的4條邊來進行全部設定。如我想設定4邊的：border:solid 1px red;
| 規則名稱 | 說明 |
|---|---|
| border-top | 頂邊 |
| border-right | 右邊 |
| border-bottom | 下邊 |
| border-left | 左邊 |
| border | 四邊 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> div{ width: 200px; height: 200px; border-bottom: groove 30px blue; } </style> <title>Document</title> </head> <body> <div>內容區域</div> </body> </html>
圓角邊框
如果想讓你的邊框變為圓角，可以使用border-radius進行設定，可以使用px | % 等單位。也支援四個邊分別設定。
| 選項 | 說明 |
|---|---|
| border-top-left-radius | 上左角 |
| border-top-right-radius | 上右角 |
| border-bottom-left-radius | 下左角 |
| border-bottom-right-radius | 下右角 |
| border-radius | 全部角 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> div{ width: 200px; height: 200px; border: groove 10px blue; border-radius: 50%; } </style> <title>Document</title> </head> <body> <div></div> </body> </html>
box-sizing
我們說過，如果單純的只是用width以及height來進行盒子大小的設定是有問題的，這兩個引數實際上只是設定的content區域內容的大小，後面如果再使用padding以及border一定要小心！因為這些操作都可能引發盒模型大小的改變從而引起整個頁面的混亂。
怎麼更加方便的解決這個問題呢？使用BOX-SIZING即可解決。
我們先這樣設定一下box-sizing: border-box;，接下里的width以及height的設定就不單單只是針對content區域，而是針對整個盒模型。
box-sizing有兩個值，一個是content-box代表內容區域盒子，這是預設值，而border-box則是代表邊框盒子。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> div{ width: 200px; height: 200px; background-color: chocolate; box-sizing: border-box; border: solid 10px blue; } </style> <title>Document</title> </head> <body> <div>內容區域</div> </body> </html>
輪廓線
輪廓線outline有點像border，但是它是在獲取元素焦點時產生，並且輪廓線不佔用空間。可以使用偽類 :focus 定義樣式。
-
-
輪廓線顯示在邊框外面
-
輪廓線不影響頁面佈局
-
輪廓線也有三要素，分別是線條樣式，線條寬度，線條顏色。
線條樣式
定義輪廓線線條樣式，請使用outline-style，它具有以下的一些值。
| 值 | 描述 |
|---|---|
| none | 預設。定義無輪廓。 |
| dotted | 定義點狀的輪廓。 |
| dashed | 定義虛線輪廓。 |
| solid | 定義實線輪廓。 |
| double | 定義雙線輪廓。雙線的寬度等同於 outline-width 的值。 |
| groove | 定義 3D 凹槽輪廓。此效果取決於 outline-color 值。 |
| ridge | 定義 3D 凸槽輪廓。此效果取決於 outline-color 值。 |
| inset | 定義 3D 凹邊輪廓。此效果取決於 outline-color 值。 |
| outset | 定義 3D 凸邊輪廓。此效果取決於 outline-color 值。 |
線寬設定
定義輪廓線線條的寬度，請使用outline-width，它的值可以是px，em，rem等等。
線條顏色
定義輪廓線線條的顏色，請使用outline-color，它的值可以是rgb，rgba，#16網頁色。
簡寫
如同邊框一樣，我們也可以使用簡寫來定義一條輪廓線，如：outline:solid 10px red;再次提醒，輪廓線一般用於獲得焦點的物件！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> input{ margin: 0 5px; } input:focus{ outline:solid 3px blue; } </style> <title>Document</title> </head> <body> <label> 點我<input type="text" name="test"> </label> </body> </html>
表單輪廓線
我們的<input>框具有預設的輪廓線，有時候會影響美觀。可以通過outline:none;將它去除。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> input{ margin: 0 5px; } input:focus{ outline: none; } </style> <title>Document</title> </head> <body> <label> 點我<input type="text" name="test"> </label> </body> </html>
display
display可以將任意標籤轉換為內聯標籤，塊級標籤以及內聯塊級標籤，也可以將該標籤設定為隱藏。
值得注意的一點是，display將某一元素設定為隱藏後！該元素是不會佔據頁面上任何位置的！
| 選項 | 說明 |
|---|---|
| none | 隱藏元素 |
| block | 顯示為塊元素 |
| inline | 顯示為行元素，不能設定寬/高 |
| inline-block | 行級塊元素，允許設定寬/高f |
塊轉內聯
請使用display:inline;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> div{ display: inline; border: solid 1px red; } </style> <title>Document</title> </head> <span>-----測試----</span><div>我是一個div，現在我變成內聯了，不會獨佔一行了。</div><span>-----測試----</span> </html>
內聯轉塊
請使用display:block;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> em{ display: block; border: solid 1px red; } </style> <title>Document</title> </head> <span>-----測試----</span><em>我是一個em，現在我變成塊了，我要獨佔一行了。</em><span>-----測試----</span> </html>
內聯塊
請使用display:inline-block;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> span{ display: inline-block; border: solid 1px red; } </style> <title>Document</title> </head> <span>-----測試----</span><span>現在，我們的span即能設定寬高，又不會獨佔一行了，我們都是內聯塊</span><span>-----測試----</span> </html>
隱藏標籤
請使用display:none;，它不會留下被隱藏標籤的位置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> div{ display: none; border: solid 1px red; } </style> <title>Document</title> </head> <span>-----測試----</span><div>我人沒了，位置也不在了</div><span>-----測試----</span> </html>
visibility
visibility可以控制一個元素的隱藏或顯示。
值得注意的一點是，visibility如果將一個元素設定為隱藏，那麼該元素依然在頁面上佔據位置！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> div{ visibility: hidden; border: solid 1px red; } </style> <title>Document</title> </head> <span>-----測試----</span><div>我人沒了，但我位置還在</div><span>-----測試----</span> </html>
overflow
overflow主要是針對盒子內部的內容，如果超出盒子外的處理方式。可以設定為隱藏，加一個固定的滾動條，或者加一個自動的滾動條。
| 選項 | 說明 |
|---|---|
| hidden | 溢位內容隱藏 |
| scroll | 顯示滾動條（有些瀏覽器會一直顯示，有些在滾動時顯示） |
| auto | 根據內容自動處理滾動條 |
溢位隱藏
我們可以使用overflow:hidden;將超出盒子的部分內容隱藏起來。
如果不設定是這樣的：
當我們設定之後：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> div{ overflow: hidden; width: 10em; height: 20px; border: solid 1px red; } </style> <title>Document</title> </head> <body> <div>一二三四五六七八九十十一十二十三十四十五</div> </body> </html>
溢位產生滾動條
我們可以使用overflow:auto;給盒子新增上一個滾動條。
由於圖中我給盒子的高度設定的太小了，所以沒看出來，不過沒關係。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> div{ overflow: auto; width: 10em; height: 20px; border: solid 1px red; } </style> <title>Document</title> </head> <body> <div>一二三四五六七八九十十一十二十三十四十五</div> </body> </html>
尺寸定義
我們可以有多種方式，為一個容器中的元素進行寬高尺寸的設定，如下：
| 選項 | 說明 |
|---|---|
| width | 寬度 |
| height | 高度 |
| min-width | 最小寬度 |
| min-height | 最小高度 |
| max-width | 最大寬度 |
| max-height | 最大高度 |
| fill-available | 撐滿可用的空間 |
| fit-content | 根據內容適應尺 |
min&max
如果有一張圖片放在我們的盒子中，我們不希望它太大溢位了整個盒子，也不希望它太小了導致感官不太好。那麼就可以參照下面介紹的辦法：
min-width以及min-height代表如果填充內容太少，那麼我們應該讓內容佔據盒子的多少寬度以及高度。
min-width以及min-height代表如果填充內容太少，那麼我們應該讓內容佔據盒子的多少寬度以及高度。
設定之前：
設定之後：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> div{ width: 800px; height: 600px; background-color: red; } img{ /* min-width以及min-height代表如果圖片太小，那麼我們應該讓圖片佔據盒子的多少寬度以及高度 */ min-width: 100%; min-height: 100%; /* max-width以及max-height代表如果圖片太大，那麼我們應該讓圖片佔據盒子的多少寬度以及高度 */ max-width: 90%; max-height: 90%; } </style> <title>Document</title> </head> <body> <div><img src="OIP.jpg" alt="22娘33娘"></div> </body> </html>
fill-available
在chrome 瀏覽器中使用字首 -webkit 書寫樣式。這個代表是撐滿整個利用空間，
我們可以如下設定，達到與上面第二張圖一樣的效果：
img{
width: -webkit-fill-available;
height: -webkit-fill-available;
}
在這裡我另外舉個例子，顯得更加直白，下面是未設定的時候。
當我們設定之後：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> article{ width: 800px; height: 600px; background-color: red; } span{ display: inline-block; color: cornsilk; background-color: blue; width: -webkit-fill-available; height: -webkit-fill-available; } </style> <title>Document</title> </head> <body> <main> <article> <span>我看看我佔據了多少</span> </article> </main> </body> </html>
fit-content
這玩意兒是根據內容自適應容器的內容區域，即不管你輸入多少字元，都不會達到溢位，它會根據容器的內容來撐開容器本身。
如果你本身容器是一個塊級標籤那麼它是獨佔一行的，我們可以設定width:fit-content;，來讓它根據內容自動的設定行寬，這樣就不會獨佔一行了，再通過配合margin:auto;達到讓元素居中顯示的效果，主要就是移動端上使用的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> article{ width: 800px; height: 200px; background-color: red; } div{ color: cornsilk; background-color: blue; /* 主要設定，不管寫多少內容都不會溢位 */ width: fit-content; /* 水平居中 */ margin: auto; } </style> <title>Document</title> </head> <body> <main> <article> <div>只要設定了width: fit-content; 那麼你寫多少內容都不會溢位了</div> </article> </main> </body> </html>
min-content
使用min-content 將容器尺寸按最小元素寬度設定。也是移動端使用的較多。
未設定：
設定後：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body{ background-color: darkgoldenrod; } article{ height: 400vh; background-color: red; /* 根據最小內容調整寬度 */ width: min-content; } div{ color: cornsilk; background-color: blue; /* 水平居中 */ margin: auto; font-size: 2rem; } </style> <title>Document</title> </head> <body> <main> <article> <div>look me</div> </article> </main> </body> </html>
max-content
使用max-content 將容器尺寸按最大元素寬度設定。也是移動端使用的較多，請對照上面的圖片。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body{ background-color: darkgoldenrod; } article{ height: 400vh; background-color: red; /* 根據最大內容調整寬度 */ width: max-content; } div{ color: cornsilk; background-color: blue; /* 水平居中 */ margin: auto; font-size: 2rem; } </style> <title>Document</title> </head> <body> <main> <article> <div>look me</div> </article> </main> </body> </html>