CSS背景、尺寸、盒子模型

1、背景相關屬性

background-color:背景色

background-image:設定背景圖片,需要設置圖片的URL地址

background-repeat:圖片的複製選項

repeat:在水平和垂直兩個方向上進行復制

no-repeat:不復制

repeat-x:在垂直水平方向上覆制

repeat-y:在垂直方向上覆制

 

也可以將這一組屬性值封裝到一個屬性background中,表達更加簡潔,書寫順序是:背景色background-color

     背景圖片 background-image

     重複方式 background-repeat

     位置 background-position

2、尺寸相關屬性

height:高度

width:寬度

max-width:最大寬度

max-height:最大高度

min-width:最小寬度

min-height:最小高度

3、顯示相關屬性

隱藏元素的方法:

(1)   visibility:hidden,僅僅隱藏內容,該元素所佔位置依然存在

(2)   display:none,不僅隱藏內容,且不佔位置

 display可以設置元素的顯示模式

inline:將塊級元素以內聯元素形式顯示,此時width和height屬性無效,其空間取決於元素的內容。

inline-block:將會計元素以內聯元素形式顯示,同時兼具塊級元素的某些特徵,比如可以使用width和height設置所佔位置大小。

4、盒子模型

margin:外邊距

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

使用方式

(1)   margin:30px;表示上下左右外邊距都爲30px

            margin-top: 單獨設置上外邊距

            margin: 可分別設置上右下左四個邊距 

(2)padding:內邊距

(3)border:邊框

          border-width:邊框寬度

         border-style:邊框線條類型

         border-color:邊框的顏色

更優化的書寫方式:

borderpx dashed blue

outline:輪廓線




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章