CSS盒子模型

2020 年 7 月 13 日
筆記
CSS3

CSS盒子模型

前言

　　每一個元素，其實都可以將它看成是一個盒子。網頁的布局裡面也是大盒子不斷的套著小盒子，那麼我們首先要認識一下一個盒子的一些基本知識。

　　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的使用

盒子居中

　　當一個大盒子中嵌套了一個小盒子，而我們要想將小盒子水平居中可以設置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的負值

注意：同級縱向合併

　　同級縱向合併指的是兩個相同級別的盒子，一個設置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同級縱向合併問題

注意：越級縱向邊距

　　當一個子級的盒子去設置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>

margin越級縱向邊距問題

內邊距

基本使用

　　內邊距使用 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>

padding的使用

邊框設計

　　對於邊框設計來說，它由三部分組成，邊框的樣式，邊框的寬度，邊框的顏色。

邊框樣式

　　定義邊框樣式，請使用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簡寫

圓角邊框

　　如果想讓你的邊框變為圓角，可以使用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>

box-sizing邊距盒子

輪廓線

　　輪廓線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>

outline簡寫

表單輪廓線

　　我們的<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>

display隱藏屬性

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>

visibility隱藏屬性

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>

mix與max

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>

fill-available

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>

fit-content

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>

min-content

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>

max-content

Tags: CSS3