CSS----盒子模型、背景樣式

目錄

盒子屬性

邊框屬性

外邊距屬性

内邊距屬性

CSS盒子背景樣式

盒子屬性

文檔中的每個元素都可以被看作是一個矩形盒子。具有如圖的一些屬性。

margin

外邊距 代表盒子四周的區域。相鄰元素的邊距會合并（margin collapsing）

border

設定介于padding的外邊緣與margin的内邊緣之間，預設值為0

padding

内間距 在任何定義的邊界内的元素内容周圍生成空間

width & height

用于設定内容區的寬高，該片區域用于顯示内容。盒子高度預設為内容的高度。

width

内容寬度，塊級元素預設 100%，機關可以：px em %

height

内容高度，預設 0 ，由子元素填充，機關可以： px em %

max-width

定義元素的最大寬度。該屬性值會對元素的寬度設定一個最高限制。是以元素可以比指定值窄，但不能比其寬。不允許指定負值。

min-height

屬性設定元素的最小高度。該屬性值會對元素的高度設定一個最低限制。是以元素可以比指定值高， 但不能比其矮。不允許指定負值。

邊框屬性

邊框屬性的格式

邊框寬度 ​ border-width: 5px;

邊框樣式 ​ border-style: solid; ​

邊框樣式取值： ​

none 定義無邊框。 ​ hidden 與 "none" 相同。

不過應用于表時除外，對于表，hidden 用于解決邊框沖突。 ​

dotted 定義點狀邊框。在大多數浏覽器中呈現為實線。 ​

dashed 定義虛線。在大多數浏覽器中呈現為實線。 ​

solid 定義實線。 ​

double 定義雙線。雙線的寬度等于 border-width 的值。

邊框顔色 ​ border-color: red;

注意點: ​

1.這三個屬性的取值是按照順時針來指派, 也就是按照上右下左來指派, 而不是按照日常生活中的上下 左右 ​

2.這三個屬性的取值省略時的規律 ​

2.1上 右 下 左 > 上 右 下 - 左邊的取值和右邊的一樣 ​

2.2上 右 下 左 > 上 右 - 左邊的取值和右邊的一樣 下邊的取值和上邊一樣

2.3上 右 下 左 > 上 - 右下左邊取值和上邊一樣

border-radius

為元素指定圓角邊框的半徑取值：絕對值 px、mm 、cm 相對值 em 、rem %

取值是從左上角->到右上角->右下角->左下角

外邊距屬性

格式

非連寫 ​ margin-top: ; ​ margin-right: ;

浏覽器是預設左對齊的。看起來margin-right沒有生效，其實有效果的，隻是在預設即标準流的情 況的下顯示不出來效果，可以加右浮動脫離标準流。

margin-bottom: ; ​ margin-left: ;

連寫 ​ margin: 上 右 下 左;

這三個屬性的取值省略時的規律

1.上 右 下 左 > 上 右 下 - 左邊的取值和右邊的一樣 ​

2.上 右 下 左 > 上 右 - 左邊的取值和右邊的一樣 下邊的取值和上邊一樣 ​

3.上 右 下 左 > 上 - 右下左邊取值和上邊一樣

注意點: ​ 外邊距的那一部分是沒有背景顔色的

外邊距合并現象

在預設(标準流)布局的垂直方向上, 預設情況下外邊距是不會疊加的, 會出現合并現象, 誰的外邊距比較大就聽誰的。

水準方向上的外邊距會疊加

内邊距屬性

格式

非連寫 ​ padding-top: ; padding-right: ; ​ padding-bottom: ; ​ padding-left: ;

注意點: ​

1.給标簽設定内邊距之後, 标簽占有的寬度和高度會發生變化 ​

2.給标簽設定内邊距之後, 内邊距也會有背景顔色

連寫 ​ padding: 上 右 下 左;

.這三個屬性的取值省略時的規律

1.上 右 下 左 > 上 右 下 > 左邊的取值和右邊的一樣 ​

2.上 右 下 左 > 上 右 > 左邊的取值和右邊的一樣 下邊的取值和上邊一樣 ​

3.上 右 下 左 > 上 > 右下左邊取值和上邊一樣

盒子背景樣式

- background-color 背景顔色

專門用來設定标簽的背景顔色的 ​ 取值: ​ 具體單詞 ​ rgb ​ rgba ​ 十六進制

- background-image 背景圖檔

專門用于設定背景圖檔的 ​位置;

注意點: ​

1.圖檔的位址必須放在url()中, 圖檔的位址可以是本地的位址, 也可以是網絡的位址 ​

2.如果圖檔的大小沒有标簽的大小大, 那麼會自動在水準和垂直方向平鋪來填充

3.如果網頁上出現了圖檔, 那麼浏覽器會再次發送請求擷取圖檔

- background-repeat 背景平鋪屬性

專門用于控制背景圖檔的平鋪方式的

取值: ​

repeat 預設, 在水準和垂直都需要平鋪

no-repeat 在水準和垂直都不需要平鋪 ​

repeat-x 隻在水準方向平鋪 ​

repeat-y 隻在垂直方向平鋪

-background-position 背景定位屬性

專門用于控制背景圖檔的位置 ​ 格式: ​ background-position: 水準方向 垂直方向;

取值 ​ 具體的方位名詞 ​ 水準方向: left center right ​ 垂直方向: top center bottom

具體的像素 ​ 例如: background-position: 100px 200px; ​ 記住一定要寫機關, 也就是一定要寫px ​ 記住具體的像素是可以接收負數的

-如何修改背景關聯方式？

在CSS中有一個叫做background-attachment的屬性， 這個屬性就是專門用于修改關聯方式的

格式 ​ background-attachment：scroll;

取值： ​

scroll 預設值， 會随着滾動條的滾動而滾動 ​

fixed 不會随着滾動條的滾動而滾動

在CSS中有一個叫做background-attachment的屬性， 這個屬性就是專門用于修改關聯方式的

格式 ​ background-attachment：scroll;

取值： ​ scroll 預設值， 會随着滾動條的滾動而滾動 ​ fixed 不會随着滾動條的滾動而滾動