背景
background-color 背景顏色
十六進製制
rgbrgba a的取值0-1
background-image 背景
url 位置 加""會有提示,不加沒有提示
background-repeat 背景是否平鋪滿
no-repeat 不平鋪滿
repeat-x 在x軸平鋪滿
repeat-y 在y軸平鋪滿
repeat 平鋪滿
background-position 背景位置
left right center top bottom 方向位置,只寫乙個的話,另乙個預設是center
x,y 精確位置,第乙個值必須是x軸
混合單位 第乙個值必須是x軸
background-attachment 背景是否隨滑鼠滾輪滾動
scroll
fixed 會按照瀏覽器的位置進行調整,不是特別好用,定位在頁面,不隨著頁面滾動
復合寫法
background-color,background-image,repeat,fixed,position
background-size
精確值寬高
只設定乙個,高auto
百分比父盒子的寬高計算百分比
只設定乙個,高auto
contain
完全顯示
盒子部分空白
cover
盒子全被蓋住
有可能顯示不安全
盒子模型
外邊距邊框
border
border-width 邊框寬度
1px 四條邊
1px 2px 上下,左右
1px 2px 3px 上,左右,下
1px 2px 3px 4px 上,下,左,右
border-style
solid 實線
dashed 虛線
dotted 點線
border-color
復合寫法 border-width border-style border-color
border-top
內邊距內容 width,height
背景大小
background-size
300px 可以設定數字+px, 寬高, 如果只設定乙個, 按照寬度進行原比例縮放
50% 百分比時, 按照父元素的寬高進行計算, 設定乙個百分比時, 寬度按照父元素寬度計算, 高度等比例縮放
contain cantain 按照原比例縮放, 當有一邊和父元素邊框相接時, 停止縮放 可能會造成盒子有空白區域
cover 按照原比例進行縮放, 當盒子完全被蓋住時停止 可能顯示不完全
盒子模型的背景
三 精靈圖 雪碧圖 四 設定背景圖的大小 五 復合屬性background 背景顏色，缺省會填充盒子的內容區域，padding區域，邊框區域。並不會填充margin區域。background color 單詞 16進製制 rgb函式 rgba函式 transparent background ima...
CSS之盒子模型與背景屬性
盒子模型與背景屬性 一.盒子模型 1.介紹 2.元素的總寬度和總高度 二.自定義邊框 border 1.基本設定 2.邊框寬度 border width 3.邊框顏色 border color 4.邊框樣式 border style 5.css的邊寬和高度 width height 三.背景 bac...
CSS基礎 背景樣式與盒子模型
在我們的程式設計過程中,經常不光會使用到設定字型樣式,還會用到設定背景顏色,背景等樣式,今天我們就來學習一下關於背景的樣式設定 1.背景顏色 background color 顏色這個屬性我們為我們的標籤設定背景顏色,其中我們有三種屬性值的書寫方式 1.預定義的顏色表示 red,blue,green...