CSS邊距---盒子模型

時間 2019-12-06

標籤 css 邊距盒子模型欄目 CSS 简体版

原文原文鏈接

CSS盒子模型

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

其中content(內容)又能夠有兩個元素width(寬)和height(高)html

CSS邊框樣式

可使用border-style來設置邊框的樣式，也能夠分別來設置上下左右的樣式：瀏覽器

border-top-style測試

border-left-stylespa

border-right-stylecode

border-bottom-stylehtm

邊框樣式有不少種，能夠定義不少，好比單邊框，虛線的邊框，實線的邊框，雙邊框，還有沒有邊框的邊框。blog

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

值	描述
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個屬性ci

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。