CSS 框模型概述![]() 元素框的最內(nèi)部分是實際的內(nèi)容,直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距,外邊距默認是透明的,因此不會遮擋其后的任何元素。 提示:背景應用于由內(nèi)容和內(nèi)邊距組成的區(qū)域。 內(nèi)邊距、邊框和外邊距都是可選的,默認值是零。但是,許多元素將由用戶代理樣式表設置外邊距和內(nèi)邊距??梢酝ㄟ^將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。這可以分別進行,也可以使用通用選擇器對所有元素進行設置: * { margin: 0; padding: 0; } 在 CSS 中,width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸,但是會增加元素框的總尺寸。 假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內(nèi)邊距。如果希望這個元素框達到 100 個像素,就需要將內(nèi)容的寬度設置為 70 像素,請看下圖: ![]() #box { width: 70px; margin: 10px; padding: 5px; } 提示:內(nèi)邊距、邊框和外邊距可以應用于一個元素的所有邊,也可以應用于單獨的邊。 提示:外邊距可以是負值,而且在很多情況下都要使用負值的外邊距。 瀏覽器兼容性一旦為頁面設置了恰當?shù)?DTD,大多數(shù)瀏覽器都會按照上面的圖示來呈現(xiàn)內(nèi)容。然而 IE 5 和 6 的呈現(xiàn)卻是不正確的。根據(jù) W3C 的規(guī)范,元素內(nèi)容占據(jù)的空間是由 width 屬性設置的,而內(nèi)容周圍的 padding 和 border 值是另外計算的。不幸的是,IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內(nèi)容的寬度,而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和。 雖然有方法解決這個問題。但是目前最好的解決方案是回避這個問題。也就是,不要給元素添加具有指定寬度的內(nèi)邊距,而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素。 術語翻譯
在 w3school,我們把 padding 和 margin 統(tǒng)一地稱為內(nèi)邊距和外邊距。邊框內(nèi)的空白是內(nèi)邊距,邊框外的空白是外邊距,很容易記吧:)
元素的邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。 CSS border 屬性允許你規(guī)定元素邊框的樣式、寬度和顏色。 CSS 邊框在 HTML 中,我們使用表格來創(chuàng)建文本周圍的邊框,但是通過使用 CSS 邊框?qū)傩?,我們可以?chuàng)建出效果出色的邊框,并且可以應用于任何元素。 元素外邊距內(nèi)就是元素的的邊框 (border)。元素的邊框就是圍繞元素內(nèi)容和內(nèi)邊據(jù)的一條或多條線。 每個邊框有 3 個方面:寬度、樣式,以及顏色。在下面的篇幅,我們會為您詳細講解這三個方面。 邊框與背景CSS 規(guī)范指出,邊框繪制在“元素的背景之上”。這很重要,因為有些邊框是“間斷的”(例如,點線邊框或虛線框),元素的背景應當出現(xiàn)在邊框的可見部分之間。 CSS2 指出背景只延伸到內(nèi)邊距,而不是邊框。后來 CSS2.1 進行了更正:元素的背景是內(nèi)容、內(nèi)邊距和邊框區(qū)的背景。大多數(shù)瀏覽器都遵循 CSS2.1 定義,不過一些較老的瀏覽器可能會有不同的表現(xiàn)。 邊框的樣式樣式是邊框最重要的一個方面,這不是因為樣式控制著邊框的顯示(當然,樣式確實控制著邊框的顯示),而是因為如果沒有樣式,將根本沒有邊框。 CSS 的 border-style 屬性定義了 10 個不同的非 inherit 樣式,包括 none。 例如,您可以為把一幅圖片的邊框定義為 outset,使之看上去像是“凸起按鈕”: a:link img {border-style: outset;} 定義多種樣式您可以為一個邊框定義多個樣式,例如: p.aside {border-style: solid dotted dashed double;} 上面這條規(guī)則為類名為 aside 的段落定義了四種邊框樣式:實線上邊框、點線右邊框、虛線下邊框和一個雙線左邊框。 我們又看到了這里的值采用了 top-right-bottom-left 的順序,討論用多個值設置不同內(nèi)邊距時也見過這個順序。 定義單邊樣式如果您希望為元素框的某一個邊設置邊框樣式,而不是設置所有 4 個邊的邊框樣式,可以使用下面的單邊邊框樣式屬性: 因此這兩種方法是等價的: p {border-style: solid solid solid none;} p {border-style: solid; border-left-style: none;} 注意:如果要使用第二種方法,必須把單邊屬性放在簡寫屬性之后。因為如果把單邊屬性放在 border-style 之前,簡寫屬性的值就會覆蓋單邊值 none。 邊框的寬度您可以通過 border-width 屬性為邊框指定寬度。 為邊框指定寬度有兩種方法:可以指定長度值,比如 2px 或 0.1em;或者使用 3 個關鍵字之一,它們分別是 thin 、medium(默認值) 和 thick。 注釋:CSS 沒有定義 3 個關鍵字的具體寬度,所以一個用戶代理可能把 thin 、medium 和 thick 分別設置為等于 5px、3px 和 2px,而另一個用戶代理則分別設置為 3px、2px 和 1px。 所以,我們可以這樣設置邊框的寬度: p {border-style: solid; border-width: 5px;} 或者: p {border-style: solid; border-width: thick;} 定義單邊寬度您可以按照 top-right-bottom-left 的順序設置元素的各邊邊框: p {border-style: solid; border-width: 15px 5px 15px 5px;} 上面的例子也可以簡寫為(這樣寫法稱為值復制): p {border-style: solid; border-width: 15px 5px;} 您也可以通過下列屬性分別設置邊框各邊的寬度: 因此,下面的規(guī)則與上面的例子是等價的: p { border-style: solid; border-top-width: 15px; border-right-width: 5px; border-bottom-width: 15px; border-left-width: 5px; } 沒有邊框在前面的例子中,您已經(jīng)看到,如果希望顯示某種邊框,就必須設置邊框樣式,比如 solid 或 outset。 那么如果把 border-style 設置為 none 會出現(xiàn)什么情況: p {border-style: none; border-width: 50px;} 盡管邊框的寬度是 50px,但是邊框樣式設置為 none。在這種情況下,不僅邊框的樣式?jīng)]有了,其寬度也會變成 0。邊框消失了,為什么呢? 這是因為如果邊框樣式為 none,即邊框根本不存在,那么邊框就不可能有寬度,因此邊框?qū)挾茸詣釉O置為 0,而不論您原先定義的是什么。 記住這一點非常重要。事實上,忘記聲明邊框樣式是一個常犯的錯誤。根據(jù)以下規(guī)則,所有 h1 元素都不會有任何邊框,更不用說 20 像素寬了: h1 {border-width: 20px;} 由于 border-style 的默認值是 none,如果沒有聲明樣式,就相當于 border-style: none。因此,如果您希望邊框出現(xiàn),就必須聲明一個邊框樣式。 邊框的顏色設置邊框顏色非常簡單。CSS 使用一個簡單的 border-color 屬性,它一次可以接受最多 4 個顏色值。 可以使用任何類型的顏色值,例如可以是命名顏色,也可以是十六進制和 RGB 值: p { border-style: solid; border-color: blue rgb(25%,35%,45%) #909090 red; } 如果顏色值小于 4 個,值復制就會起作用。例如下面的規(guī)則聲明了段落的上下邊框是藍色,左右邊框是紅色: p { border-style: solid; border-color: blue red; } 注釋:默認的邊框顏色是元素本身的前景色。如果沒有為邊框聲明顏色,它將與元素的文本顏色相同。另一方面,如果元素沒有任何文本,假設它是一個表格,其中只包含圖像,那么該表的邊框顏色就是其父元素的文本顏色(因為 color 可以繼承)。這個父元素很可能是 body、div 或另一個 table。 定義單邊顏色還有一些單邊邊框顏色屬性。它們的原理與單邊樣式和寬度屬性相同: 要為 h1 元素指定實線黑色邊框,而右邊框為實線紅色,可以這樣指定: h1 { border-style: solid; border-color: black; border-right-color: red; } 透明邊框我們剛才講過,如果邊框沒有樣式,就沒有寬度。不過有些情況下您可能希望創(chuàng)建一個不可見的邊框。 CSS2 引入了邊框顏色值 transparent。這個值用于創(chuàng)建有寬度的不可見邊框。請看下面的例子: <a href="#">AAA</a> <a href="#">BBB</a> <a href="#">CCC</a> 我們?yōu)樯厦娴逆溄佣x了如下樣式: a:link, a:visited {
border-style: solid;
border-width: 5px;
如需查看以上樣式的效果,請點擊:TIY。 從某種意義上說,利用 transparent,使用邊框就像是額外的內(nèi)邊距一樣;此外還有一個好處,就是能在你需要的時候使其可見。這種透明邊框相當于內(nèi)邊距,因為元素的背景會延伸到邊框區(qū)域(如果有可見背景的話)。 重要事項:在 IE7 之前,IE/WIN 沒有提供對 transparent 的支持。在以前的版本,IE 會根據(jù)元素的 color 值來設置邊框顏色。 CSS 邊框?qū)嵗?/H2>
CSS 邊框?qū)傩?/H2>
|
|