《CSS權威指南》學習記錄 內邊距 邊框 外邊距

2021-07-12 07:01:33 字數 3827 閱讀 3824

//好討厭,這本書居然在第七章就直接用了這些屬性,然後在第八章部分介紹o(╯□╰)o~所以,這部分內容是根據w3c來學習的,等我看完第七章和第八章後再向裡面加些內容

css假定每個元素都會生成乙個或多個矩形框,稱其為元素框。元素框中心有乙個內容區,內容區周圍有可選的內邊距、邊框、外邊距。

元素框的最內部分是實際的內容,直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距,外邊距預設是透明的,因此不會遮擋其後的任何元素。內邊距、邊框和外邊距都是可選的,預設值是零。width 和 height 指的是內容區域的寬度和高度。。它們只能應用到塊級元素或替換元素上且沒有繼承性。

圍繞在元素邊框的空白區域是外邊距。設定外邊距會在元素外建立額外的「空白」。

可通過margin來設定外邊距。它接受任何長度單位,可以是畫素、英吋、公釐或 em。也可以設定為auto。可以使用負值。

p

則在p的四邊設定了30px的空白。

p

則在p的上、右、下、左分別設定了空白。

p

則為 p 元素設定的外邊距是其父元素的 width 的 10%。

p

p

上面兩條規則是等價的,方法如下:

如果為外邊距指定了 3 個值,則第 4 個值(即左外邊距)會從第 2 個值(右外邊距)複製得到。如果給定了兩個值,第 4 個值會從第 2 個值複製得到,第 3 個值(下外邊距)會從第 1 個值(上外邊距)複製得到。最後乙個情況,如果只給定乙個值,那麼其他 3 個外邊距都由這個值(上外邊距)複製得到。

再舉一些例子:

h1

/* 等價於 0.25em 1em 0.5em 1em */

h2 /* 等價於 0.5em 1em 0.5em 1em */

p /* 等價於 1px 1px 1px 1px */

並不是所有情況都可以簡寫的:

p

p

還可以設定單邊外邊距:margin-left、margin-right、margin-top、margin-bottom。

padding 屬性定義元素邊框與元素內容之間的空白區域。它接受長度值或百分比值,但不允許使用負值。關於賦值,百分數規則等和margin一樣,只是換成padding而已。

border是圍繞元素內容和內邊距的一條或多條線,可以規定元素邊框的樣式、寬度和顏色。

css2.1規範指出:元素的背景是內容、內邊距和邊框區的背景。

可以定義多種樣式:

p

則為段落定義了四種邊框樣式:實在線邊框、點線右邊框、虛線下邊框和乙個雙線左邊框。依舊是top-right-bottom-left 的順序。

border-top-style、border-right-style、border-bottom-style、border-left-style。

再舉個栗子:

p

p

注意:如果要使用第二種方法,必須把單邊屬性放在簡寫屬性之後。因為如果把單邊屬性放在 border-style 之前,簡寫屬性的值就會覆蓋單邊值 none。

border-width。可以指定長度值,或是關鍵字:thin、medium、thick。css並沒有定義三個關鍵字的確定值,這取決於使用者**。

p

div

當然可以定義單邊寬度:border-top-width、border-right-width、border-bottom-width、border-left-width。

p

上述情況下,不僅邊框的樣式沒有了,其寬度也會變成 0。因為如果邊框樣式為 none,即邊框根本不存在,那麼邊框就不可能有寬度,因此邊框寬度自動設定為 0,而不論原先定義的是什麼。例如:

h1

由於 border-style 的預設值是 none,如果沒有宣告樣式,就相當於 border-style: none。因此,所有 h1 元素都不會有任何邊框。所以,如果希望邊框出現,就必須宣告乙個邊框樣式。border-color,一次可以接受最多4個顏色值。

p

值複製規則仍會適用於此。

注意:預設的邊框顏色是元素本身的前景色。如果沒有為邊框宣告顏色,它將與元素的文字顏色相同。另一方面,如果元素沒有任何文字,假設它是乙個**,其中只包含影象,那麼該錶的邊框顏色就是其父元素的文字顏色(因為 color 可以繼承)。

然後是定義單邊顏色:border-top-color、border-right-color、border-bottom-color、border-left-color。

h1

透明邊框css2 引入了邊框顏色值 transparent。這個值用於建立有寬度的不可見邊框。

a

從某種意義上說,利用 transparent,使用邊框就像是額外的內邊距一樣;此外還有乙個好處,就是能在你需要的時候使其可見。這種透明邊框相當於內邊距,因為元素的背景會延伸到邊框區域(如果有可見背景的話)。

外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成乙個外邊距。

合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

當乙個元素出現在另乙個元素上面時,第乙個元素的下外邊距與第二個元素的上外邊距會發生合併。

當乙個元素包含在另乙個元素中時(假設沒有內邊距或邊框把外邊距分隔開),它們的上和/或下外邊距也會發生合併。

外邊距甚至可以與自身發生合併。假設有乙個空元素,它有外邊距,但是沒有邊框或填充。在這種情況下,上外邊距與下外邊距就碰到了一起,它們會發生合併:

如果這個外邊距遇到另乙個元素的外邊距,它還會發生合併:

這就是一系列的段落元素占用空間非常小的原因,因為它們的所有外邊距都合併到一起,形成了乙個小的外邊距。

注意:只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合併。

學習記錄 css 內邊距 邊框和外邊距

不可運用與行內非替換元素 父元素的背景 百分數相對于父元素width計算,不論上下還是左右 對於定位元素上下外邊距則不同 margin 上右下左 上 右左 下 上下 右左 負外邊距 上下外邊距合併 行內非替換元素只受left和right影響,top和bottom不會影響行高 border width...

《CSS權威指南》學習記錄 浮動

關鍵字 float。可接受 left right none 預設值 適用於所有元素。無繼承性。乙個元素浮動時,其他元素會 圍繞 該元素。浮動元素不會與周圍元素發生外邊距合併。如果要浮動乙個非替換元素,則必須要為其宣告乙個width。讓乙個元素浮動,它會像塊級元素一樣擺放和表現,但本質不變。幾點規則 ...

《CSS權威指南》學習記錄 列表

咖啡li 茶li 牛奶li ul 列表項內部可以使用段落 換行符 鏈結以及其他列表等等。咖啡li 牛奶li 茶li ol 列表項內部可以使用段落 換行符 鏈結以及其他列表等等。自定義列表不僅僅是一列專案,而是專案及其注釋的組合。自定義列表以 標籤開始。每個自定義列表項以 開始。每個自定義列表項的定義...