CSS邊框盒子模型詳解

盒子模型主要是有margin(外邊距)、border(邊框)、padding(內邊距)、content(內容)組成，這些屬性我們可以把它轉移到我們日常生活中的盒子上來理解，日常生活中所見的盒子也就是裝東西的箱子，也具有這些屬性，所以叫它盒子模型

其中content(內容)又可以有兩個元素width(寬)和height(高)

CSS邊框樣式

可以使用border-style來設定邊框的樣式，也可以分別來設定上下左右的樣式：

border-top-style

border-left-style

border-right-style

border-bottom-style

邊框樣式有很多種，可以定義很多，比如單邊框，虛線的邊框，實線的邊框，雙邊框，還有沒有邊框的邊框。

分別都可以用border-style屬性的上下左右後面接上，下表的值

值	描述
none	定義無邊框
hidden	與 “none” 相同。不過應用於表時除外，對於表，hidden 用於解決邊框衝突。
dotted	定義點狀邊框。在大多數瀏覽器中呈現為實線。
dashed	定義虛線。在大多數瀏覽器中呈現為實線。
solid	定義實線。
double	定義雙線。雙線的寬度等於 border-width 的值。
groove	定義 3D 凹槽邊框。其效果取決於 border-color 的值。
ridge	定義 3D 壟狀邊框。其效果取決於 border-color 的值。
inset	定義 3D inset 邊框。其效果取決於 border-color 的值。
outset	定義 3D outset 邊框。其效果取決於 border-color 的值。

<!DOCTYPE html>
<html>
    <head>
        <title>測試內邊距</title>
        <meta charset="utf-8">
        <!-- 呼叫CSS樣式表 -->
        <style type="text/css">
            p.none{border-style: none;}/*設定無邊的邊框*/
            p.dotted {border-style: dotted}/*設定點狀邊框*/
            p.dashed {border-style: dashed}/*設定虛線邊框*/
            p.solid {border-style: solid}/*設定實線邊框*/
            p.double {border-style: double}/*設定雙線邊框*/    
            p.groove {border-style: groove}/*設定3D凹槽邊框*/        
            p.ridge {border-style: ridge}/*設定3D壟狀邊框*/
            p.inset {border-style: inset}/*設定3D inset 邊框*/
            p.outset {border-style: outset}/*設定3D outset 邊框*/
        </style>
    </head>
    <body>
        <p class="none">我沒有邊框</p>
        <p class="dotted">點狀邊框</p>
        <p class="dashed">虛線邊框</p>
        <p class="solid">實線邊框</p>
        <p class="double">雙線邊框</p>
        <p class="groove">3D凹槽邊框</p>
        <p class="ridge">3D 壟狀邊框</p>
        <p class="inset">3D inset 邊框</p>
        <p class="outset"> 3D outset 邊框</p>
    </body>
</html>

CSS邊框寬度與高度

邊框寬度

邊框寬度是通過border-width來定義的，可以分別設定上下左右4個屬性

border-top-width

border-bottom-width

border-left-width

border-right-width

邊框顏色

邊框寬度是通過border-color來定義的，同樣也可以分別設定上下左右4個屬性

border-top-color

border-bottom-color

border-left-color

border-right-color

<!DOCTYPE html>
<html>
    <head>
        <title>測試內邊距</title>
        <meta charset="utf-8">
        <!-- 呼叫CSS樣式表 -->
        <style type="text/css">
            /*定義p標籤，是實線邊框*/
            p {border-style: solid;}

            .all {
                /*定義所有邊框寬度為5畫素*/
                border-width: 5px; 
                /*定義所有邊框是顏色為橙色*/
                border-color: #FF8000
            }
            .top {
                /*定義上邊框寬度為5畫素*/
                border-top-width: 5px; 
                /*定義上邊框是顏色為橙色*/
                border-top-color: #FF8000
            }
            .bottom {
                /*定義下邊框寬度為5畫素*/
                border-bottom-width: 5px; 
                /*定義下邊框是顏色為橙色*/
                border-bottom-color: #FF8000
            }
            .left {
                /*定義左邊框寬度為5畫素*/
                border-left-width: 5px; 
                /*定義左邊框是顏色為橙色*/
                border-left-color: #FF8000
            }
            .right {
                /*定義右邊框寬度為5畫素*/
                border-right-width: 5px; 
                /*定義右邊框是顏色為橙色*/
                border-right-color: #FF8000
            }
        </style>
    </head>
    <body>
        <p class="all">我是設定所有邊框的</p>
        <p class="top">我只負責上面</p>
        <p class="bottom">我負責下面</p>
        <p class="left">我設定的是左邊</p>
        <p class="right">我設定的是右邊</p>
    </body>
</html>

CSS3邊框：

border-radius: 圓角邊框

圓角邊框後面設定值，邊框就會變得有弧度了。

box-shadow: 邊框陰影

邊框陰影有幾個很有意思的值，還可以設定內陰影，外陰影，陰影顏色，陰影位置什麼的。見下表：

值	描述
h-shadow	必須。水平陰影的位置。允許負值
v-shadow	必須。垂直陰影的位置。允許負值
blur	可選。模糊距離
spread	可選。陰影的尺寸
color	可選。陰影的顏色。
inset	可選。將外部陰影(outset)改為內部陰影

<!DOCTYPE html>
<html>
    <head>
        <title>測試內邊距</title>
        <meta charset="utf-8">
        <!-- 呼叫CSS樣式表 -->
        <style type="text/css">
            .divtest {
                /*定義顏色為橙色*/
                background-color: #FF8000;
                width: 300px;
                height: 300px;

                /*設定圓角為20像數*/
                border-radius: 20px;

              /*第1個值是陰影向右移動5個像數
                第2個值是陰影向下移動5個像數
                第3個值是陰影模糊度的屬性
                第4個值是陰影的顏色，我設定是黑色
                預設是外部陰影，所以我沒有設定outset*/
                box-shadow: 5px 5px 5px black;
            }

        </style>
    </head>
    <body>
        <div class="divtest"></div>
    </body>
</html>

CSS內邊距

內邊距是在內容外、邊框內，內邊距的屬性有5個，其中padding是設定所有的邊距，其他4個則分別設定上下左右的邊距。

屬性	描述
padding	設定所有的邊距
padding-top	設定上邊距
padding-bottom	設定下邊距
padding-left	設定左邊距
padding-right	設定右邊距

下面HTML分別設定padding所有屬性的樣式：

<!DOCTYPE html>
<html>
    <head>
        <title>測試內邊距</title>
        <meta charset="utf-8">
        <!-- 呼叫CSS樣式表 -->
        <style type="text/css">            
            #all{padding: 100px;}/*設定所有內邊距*/            
            #top{padding-top: 100px;}/*設定上面的內邊距*/            
            #bottom{padding-bottom: 100px;}/*設定下面的內邊距*/            
            #left{padding-left: 100px;}/*設定左邊的內邊距*/
            #right{padding-right: 100px;}/*設定右邊的內邊距*/
        </style>
    </head>
    <body>
        <table border="1">
            <tr>
                <td id="top">我是padding-top，我設定了上邊距</td>
            </tr>
        </table>
        <br />
        <table border="1">
            <tr>
                <td id="bottom">我是padding-bottom，我設定了下邊距</td>
            </tr>
        </table>
        <br />
        <table border="1">
            <tr>
                <td id="left">我是padding-left，我設定了左邊距</td>
            </tr>
        </table>
        <br />
        <table border="1">
            <tr>
                <td id="right">我是padding-right，我設定了右邊距</td>
            </tr>
        </table>

        <table border="1">
            <tr>
                <td id="all">我是padding，我設定了所有內邊距</td>
            </tr>
        </table>
    </body>
</html>

CSS外邊距

圍繞在內容邊框的區域就是外邊距，外邊距預設為透明區域，外邊距接受任何長度的單位、百分數。

外邊距常用屬性：

屬性	描述
margin	設定所有邊距
margin-top	設定上邊距
margin-bottom	設定下邊距
margin-left	設定左邊距
margin-right	設定右邊距

外邊距也有上下左右4個屬性，就不一一列出來了，因為下邊和右邊的顯示不太明顯，如果有需要，可以根據上表來調邊距

<!DOCTYPE html>
<html>
    <head>
        <title>測試內邊距</title>
        <meta charset="utf-8">
        <!-- 呼叫CSS樣式表 -->
        <style type="text/css">
            .divtest {
                /*定義顏色為橙色*/
                background-color: #FF8000;
                width: 100px;
                height: 100px;

                /*設定圓角為20像數*/
                border-radius: 20px;

              /*第1個值是陰影向右移動5個像數
                第2個值是陰影向下移動5個像數
                第3個值是陰影模糊度的屬性
                第4個值是陰影的顏色，我設定是黑色
                預設是外部陰影，所以我沒有設定outset*/
                box-shadow: 5px 5px 5px black;
              /*設定所有邊距為100像數*/
                margin: 100px
            }

        </style>
    </head>
    <body>
        <div class="divtest"></div>
    </body>
</html>