div+css屬性各個屬性詳解3

來源:互聯網
上載者:User

邊框屬性

{框填充屬性

padding-bottom
padding-left
padding-top
padding-right

功能:毎個容器都有邊框,這些屬性設定邊框與框內元素間的距離。
數值:
長度 - 設定相對或絕對值。在數字後指定度量單位如下:mm, cm, in, pt, px, pc, ex, em。em 和 ex 設定產生相對於父字型的字型尺寸。
百分比 - 以父元素的百分比設定邊框。
說明:填儲值不能使用負值,但可以是小數。

框填充屬性--- padding

功能:是個簡寫屬性,用於設定上,下,左,右各個方向邊框和內容元素的間距。
數值:同前。
說明:用單一值可以讓毎邊等距填充;如果用兩個值,則第一個值用於上下填充,第二個值用於左右填充;如果用三個值,則賦於上邊填充,左右填充和下邊填充;如果用四個值,則分別用於上,右,下,左填充。可以混合數實值型別。

框邊框屬性
border-top
border-bottom
border-right
border-left

功能:這四個屬性都是簡寫屬性,分別設定上,下,右,左的邊框屬性。預設情況下,邊框沒有樣式設定。
數值:共有三個邊框屬性
border-width: 取值為 thin, medium, thick或指定長度。
border-style: 設定用於修飾邊框的底紋。可以設定下列樣式:none, dotted,doshed, solid, double, groove, ridge, inset, outset。
border-color: 設定邊框顏色。

框邊框屬性

border-top-width
border-bottom-width
border-right=width
border-left-width

功能:分別設定各個邊框的厚度。
數值:
thin - 細邊框。
medium - 中等線寬。
thick - 粗線。
長度 - 用相對或絕對單位設定邊框寬度。

框邊框屬性

border-color

功能:簡寫屬性,設定四個邊框的顏色值。
數值:可以用顏色名或RGB值。如果指定單個顏色,則四個邊框都顯示為這個顏色;如果指定兩個顏色,則順序為上下,左右;如果指定三種顏色,則順序為上,左右,下;如果指定四種顏色,則順序為上,右,下,左。
說明:顏色名如下
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
對於RGB值,可用三種方法指定
#rrggbb; rgb(r,g,b); rgb(r%,g%,b%)

框邊框屬性

border

功能:簡寫屬性,設定所有邊框屬性。
數值:
border-width - 取值 thin, medium, thick 或指定長度。
border-style - 取值 none, dotted, dashed, solid, double, groove, ridge, inset, outset
border-color - 可用顏色名或RGB值。
說明:與其它簡寫屬性不同的是,每個設定只能取一個值,這個屬性均勻作用於框的各邊。

框邊框屬性

border-style

功能:用於顯示邊框和指定邊框樣式。
數值:
none - 不顯示邊框,為預設值
dotted - 點線
dashed - 虛線
solid - 實線
double - 雙線
groove - 3D陷入線
ridge - 3D山脊狀線
inset - 使頁面有沉入感
outset - 使頁面有浮出感
說明:並非所有瀏覽器都能顯示ridge, inset, outset 之類的樣式,有些瀏覽器將所有邊框都繪製成實線。

框邊界屬性

margin-bottom
margin-left
margin-right
margin-top

功能:這四個屬性用來設定元素與其相鄰元素間的距離,可以用長度或相對於其父文本的寬度的百分比來定義,也可以自動處理。
數值:
長度 - 設定元素相應邊與框邊緣之間的相對或絕對距離,有效單位為:mm, cm, in, px, pt, pica,ex, em ...
百分比 - 以父元素寬度的百分比設定邊界尺寸。
auto - 自動,這個設定取瀏覽器的預設邊界。

框邊界屬性

margin

功能:簡寫屬性,用於設置元素的所有邊界。這是用於描述元素的內容的邊緣到框邊緣的距離的。這個區總是透明的,可以看到下面的頁面背景。
數值:
長度 - 同前
百分比 - 以父元素寬度的百分比設定邊界尺寸。
auto - 自動,這個設定取瀏覽器的預設邊界。

框位置屬性

height

功能:設定元素高度,瀏覽器按照這個高度調整圖形。
數值:
長度 - mm, cm, px, pt, .....
auto - 自動。

框位置屬性

width

功能:設定元素寬度,瀏覽器按照這個寬度調整圖形。
數值:
長度 - mm, cm, in, px, pt, ......
百分比 - 將圖形尺寸設定為父元素寬度的百分比。
auto - 自動調整

框位置屬性

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.