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:邊框的顏色
更優化的書寫方式:
border:px dashed blue;
outline:輪廓線