CSS 3學習 box sizing和背景

2022-03-28 20:03:28 字數 2703 閱讀 1147

在css 2中設定元素的width和height僅僅是設定了元素內容區的寬和高,元素實際的尺寸是 margin + border + padding + 內容區。

css 3(截止到2023年12月6日該屬性還是草案)中新加了box-sizing屬性,用來重新規定設定元素的width和height時,到底包含哪些區域。

box-sizing的可取值有兩個:content-box(預設值)和border-box

content-box預設值。該值表示設定元素的width和height時,這兩個尺寸實際指的是內容區的尺寸。即:

border-box該值表示設定元素的width和height時,這兩個尺寸實際指的是 border + padding + 內容區 這三項的總尺寸。即:

通過background屬性可以設定元素的背景樣式。

實際上background是以下八個屬性的簡寫(後面跟的是預設值):

屬性名預設值

background-color

transparent

background-image

none

background-size

auto auto

background-position

0% 0%

background-repeat

repeat

background-origin

padding-box

background-clip

border-box

background-attachment

scroll

background-color設定元素的背景顏色

可取值:

transparent || 某些表示顏色的英文單詞 || 十六進製制的顏色名  || rgb顏色名 || rgba
background-image設定元素的背景影象。通過url()引入,可以引入多張背景,用逗號隔開。

預設情況下背景從元素的左上角開始(包含border區域)渲染。

background-size用於重新計算引入背景的尺寸。

可以設定多組值,有多組值時,按照引入的順序一一對應。

如果設定的值的組數小於引入的張數,則餘下的的尺寸按第一組值計算。

每組值可以設定1~2個值,第乙個值表示寬度,第二個值表示高度,如果只設定了乙個值,第二個值為auto;也可以設定規範中指定的關鍵字,設定為關鍵字時,只有乙個值。

background-size的可取值:

對於contain 或 cover,有固有比例的用固有比例放大。沒有的,就使用背景區域的尺寸。

對於兩個值都是auto的情況,影象如果有固有寬度和高度,則按這個尺寸。如果沒有固有尺寸與固有比例,則按背景區的大小。如果沒有固有尺寸但是有固有比例, 效果同 contain。如果只有乙個固有長度(寬度或高度),但有固有比例,則用這乙個固有長度根據固有比例計算另乙個值的大小。如果只有乙個固有長度(寬度或高度),但沒有固有比例,則使用此乙個固有長度,另乙個值使用背景區域的相應的長度(寬度或高度)。

乙個為 auto 另乙個不是auto,如果影象有固有比例,則指定的長度使用指定值,未指定的長度由指定值與固有比例計算。如果影象沒有固有比例,則指定的長度使用指定值,未指定的長度使用影象相應的固有長度(寬度或高度),若即沒有固有比例也沒有固有長度(寬度或高度),則使用背景區相應的長度(寬度或高度)。

background-position用於指定背景在背景區域中的初始位置。

可以設定多組值對應多張背景。每組值可以設定1~2個值。

可取值:

如果引入背景的張數大於指定的值的組數,則餘下的背景的位置根據第一組值計算。

background-repeat指定是否重複或如何重複背景。預設其情況下,在水平方向上和垂直方向上重複以填滿整個背景區域。(根據background-size屬性重新計算背景的尺寸後再重複)

可取值:

該屬性支援單值語法和雙值語法。在雙值語法中,第乙個值表示在水平方向上的重複行為,第二個值表示在垂直方向的重複行為。

單值和雙值對照表:

單值雙值

repeat-x

repeat no-repeat

repeat-y

no-repeat repeat

repeat

repeat repeat

no-repeat

no-repeat no-repeat

space

space space

round

round round

background-origin規定了背景出現區域的具體範圍,注意與背景區域區分。

要看到該屬性的效果background-repeat屬性的值必須為no-repeat

可取值:

background-clip用於指定背景區域顯示出來的範圍。

可取值:

background-attachment如果引入了背景,用該屬性決定背景的滾動特性。支援多張背景,可以設定多組值。

可取值:

CSS3中的box sizing屬性

box sizing屬性是css3中新新增的屬性,用來替換原來的css盒子模型,box sizing屬性值的不同,元素的高度和寬度的計算方法也不同。box sizing的三個屬性值,我們只針對前兩個說明 box sizing content box box sizing border box box...

CSS3中盒子的box sizing屬性

box sizing 屬性box sizing 屬 性用來改變預設的 css盒模型 對元素寬高的計算方式。這個屬性可以用於模擬那些非正確支援標準盒模型的瀏覽器的表現。box sizing content box default border box content box 預設值,標準盒模型。wid...

CSS3屬性box sizing使用指南

box sizing用於改變cswww.cppcns.coms盒子模型,從而改變元素寬高的計算方式。box sizing取值如下 複製 如下 box sizing content box padding box border box 預設值是 content box 對應css2.1規範中標準的盒子...