css背景相關屬性和盒子

2021-10-23 20:29:59 字數 1412 閱讀 3745

rgb(red greed bule)(0.0.256)#0010ff

css中的顏色表示方式

預定義顏色:bule。red。black

16進製制顏色:#0f0f0f

rgb顏色(128.0.0)全紅

rgba在rgb的基礎上又新增了表示透明度的alpha

hsl:用色調,飽和度,和透明度三個分量來表示顏色

hsl:在hsl的基礎上又增加了表示透明度的alpha

直接定義顏色,預定義顏色

rgb顏色

16進製制顏色

背景相關屬性

background*color:背景顏色

background-image;背景

background-repeat:複製選項(repeat -x/y分別在水平,垂直兩個方向複製,norepeat為不複製)

background-position:所在位置 上top 下 bottom 左left 右right

簡寫在一起(background: #ffc0cb url(…/…/img/1.jpg) repeat-x right top;)順序為背景顏色-背景-複製排列方式-所在位置

尺寸相關屬性固定高度與寬度(height:200px)

自適應高度(高度根據內容增加而加大)

max-height指定最大高度,

min-height指定最小高度

顯示相關屬性visibility:hidden僅僅隱藏內容,該元素站的位置依然存在

display:none不僅隱藏內容,而且隱藏位置

display:inline-block:將塊級元素以內聯元素的形式顯示並且具有塊級元素的特徵,寬高屬性依然有效

display:inline:將塊級元素以內聯元素的形式顯示,此時寬高屬性對其無效

display:block將內聯元素以塊級元素顯示

盒子模型margin:外邊距

margin-top(上)margin-left(左)margin-right(右)margin(bottom)下

(1) margin:30px,表示上下左右都設定30邊距

(2) margin:30px 20px 10px 50px,表示依次按照上右下左順時針設定邊距

(3) margin:20px 30px表示設定上下邊距為20px,左右邊距為30px

padding:內邊距

操作與margin類似,

border:邊框

如果想讓兩個盒子在一行裡,那就要讓他們都浮動(float),並且讓他們的父類清除浮動(overflow)

css 盒子背景屬性

background 背景顏色 背景 背景平鋪 背景定位 背景滾動 注 沒有固定的順序,但是一般這樣寫 background image none url 路經 預設none background repeat repeat no repeat repeat x repeat y 預設repeat ...

CSS 背景相關屬性

頁面中可以用 jpg 或者 gif 作為背景圖,這與向網頁中插入不同,背景影象放在網頁的最底層,文字和等都位於其上。background clip 屬性的語法格式如下 background clip border box padding box content box text background...

CSS背景的相關屬性

div1 div1 contain 包含 等比例縮放,直到最大部分填滿容器有可能會出現覆蓋不完整的效果 length 設定背景影象的高度和寬度。第乙個值設定寬度,第二個值設定高度。如果只設定乙個值,則第二個值會被設定為 auto div1 repeat x 背景影象將在水平方向重複。repeat y...