接筆記5--CSS基礎知識
2.3背景相關屬性
body{
background-color: red;
background-image:url("xx.jpg");
background-repeat: repeat-x;
background-position:inherit;
}
background-color背景顏色
background-image背景圖片，需要設置圖片的url地址
background-repeat-x：圖片的複製選項（背景圖橫向平鋪）
-y：縱向平鋪
no-repeat：不復制（平鋪）
background-position：right
left
top
bottom
Inherit
也可以將這一組屬性值封裝到一個屬性background中，書寫順序是:
背景色background-color
背景圖background-image
背景平鋪方式background-repeat
位置background-position
表達更加簡潔。
background: greenurl("xx.jpg") no-repeat right;
2.4 尺寸相關屬性
height：高度
width：寬度
div{
width:200px;
height:200px;
background-color: red;
}
max-width：最大寬度
max-height：最大高度
min-width：最小寬度
min-height：最小高度
2.5顯示相關屬性
隱藏元素的方法：
（1）visibility:hidden，僅僅隱藏內容，該元素所佔位置依然存在。
（2）dispaly：none ，不僅隱藏內容，而且不佔位置。
div{
/*visibility: hidden;*/
height:100px;
display: none;
}
display 可以設置元素的顯示模式
inline：將塊級元素以內聯元素的形式顯示，此時width和height屬性無效。其空間取決於元素的內容。
inline-block：將塊級元素以內聯元素的形式顯示，同時兼具塊級元素的某些特徵，比如可以使用width和height設置所佔位大小。
li{
display:inline-block;
width:200px;
background-color: red;
}
反過來也可以將內斂元素以塊級元素形式來顯示
span{
display:block;
}
即display：block
2.6盒子模型
background-color:#71b9fe;
：外邊距
margin-top
-right
-bottom
-left
使用方式
（1）margin：30px；表示上下左右都爲30px
（2）margin：30px；分別設置上下左右外邊距
（3）Margin：10px；20px；30px；40px；分別設置上右下左四個邊距。
padding：內邊距
也有上下左右邊距，和margin類似，不再贅述。
border：邊界、邊框
border-width: 20px;邊框寬度
border-style: dashed;邊框線條類型
border-color:blue;邊框的顏色
word中設置邊框的操作
也可以使用更優化的書寫方式：
border：10px dashed blue；
outline：輪廓線，用法同border