CSS_邊框樣式

twilight0402發表於2017-01-25
CSS

版權宣告：本文為博主原創文章，轉載請註明出處。 https://blog.csdn.net/twilight_karl/article/details/54729515

CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式。

element : 元素。
padding : 內邊距，也有資料將其翻譯為填充。
border : 邊框。
margin : 外邊距，也有資料將其翻譯為空白或空白邊。

邊框模型

padding 內邊距

padding 屬性接受長度值或百分比值，但不允許使用負值。

可以按照上、右、下、左的順序分別設定各邊的內邊距，各邊均可以使用不同的單位或百分比值（相對父元素的width）：

h1 {padding: 10px 0.25em 2ex 20%;}

1個值 表示4條邊的邊距
2個值 上 下
3個值 上 左右 下
4個值 上 下 左 右

也可以通過單獨的屬性指定： padding-方向(top/right/bottom/left) 

<html>
    <head>
        <style type="text/css">
            .padding{
                padding:10px 20px 30px 40px;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <tr>
                <td class="padding">這個表格的內邊距設定為padding:10px 20px 30px 40px; </td>
            </tr>
        </table>

    </body>
</html>

內邊距

margin 外邊距

圍繞在元素邊框的空白區域是外邊距。設定外邊距會在元素外建立額外的“空白”。margin 屬性接受任何長度單位，可以是畫素、英寸、毫米或 em。可以設定為 auto。更常見的做法是為外邊距設定長度值

也可使用單個屬性來表示外邊距：
margin-top
margin-right
margin-bottom
margin-left 

<html>
    <head>
        <style type="text/css">
            p.s{
                margin : 0 100px 20px 0px;
            }
        </style>
    </head>
    <body>
    <p class="s"> 這個段落的外邊距為： 0 100px 20px 0px;這個段落的外邊距為： 0 100px 20px 0px;這個段落的外邊距為： 0 100px 20px 0px;這個段落的外邊距為： 0 100px 20px 0px;這個段落的外邊距為： 0 100px 20px 0px;這個段落的外邊距為： 0 100px 20px 0px;這個段落的外邊距為： 0 100px 20px 0px;這個段落的外邊距為： 0 100px 20px 0px;這個段落的外邊距為： 0 100px 20px 0px;</p>
    </body>
</html>

外邊距

外邊距合併

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

1.當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖：

2.當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併。請看下圖：

3.假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合併：

border-style 邊框風格

單獨定義的

none 無邊框
hidden 對於表,可用於解決邊框衝突。
solid 實線
dashed 虛線
dotted 點狀
double 雙線
groove 凹槽邊框
ridge 壟狀邊框
insert
outsert
inherit 繼承

使用單獨屬性表示樣式：border-方向-style(left/right/bottom/top)

<html>
<head>
<style type="text/css">
    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}
    p.ridge {border-style: ridge}
    p.inset {border-style: inset}
    p.outset {border-style: outset}
</style>
</head>

<body>
<p class="dotted">A dotted border</p>

<p class="dashed">A dashed border</p>

<p class="solid">A solid border</p>

<p class="double">A double border</p>

<p class="groove">A groove border</p>

<p class="ridge">A ridge border</p>

<p class="inset">An inset border</p>

<p class="outset">An outset border</p>
</body>

</html>

78a5e8c4e48e5ea9.png

border-width 邊框寬度

thin 細
medium 中等
thick 粗邊框
數字px 固定值
inherit 繼承

border-color 邊框顏色

rgb()
rgba()
transparent 透明
inherit 繼承


相關文章