1.CSS背景
#box{width:300px;height:300px;background-color:#333; background-image:url(img/img.gif); background-repeat:no-repeat; background-position:-20px -30px; border:10px solid red;}
/*
background 背景
background-color 背景顏色
background-image 背景圖片 url(圖片路徑)
background-repeat 背景平鋪
repeat 平鋪
no-repeat不平鋪
repeat-x 水平平鋪
repeat-y 垂直平鋪
background-position 背景圖定位
關鍵字
x: left 圖的左側和元素的左側對齊
center 圖的中間和元素的中間對齊
right 圖的右側和元素的右側對齊
y: top 圖的頂部和頂部的左側對齊
center 圖的中間和元素的中間對齊
bottom 圖的底部和元素的底部對齊
具體值
x: 正值從左向右移動,負值從右向左移動
y: 正值從下向上移動,負值從上向下移動
*/
2.字體
#box{width:300px;border:1px solid #000; font:14px "宋體";}
/*
font
font-size 文字大小
font-weight 文字加粗(bold加粗/normal正常)
font-style 文字傾斜(italic傾斜/normal正常)
line-height 行高 （文字在一行上下居中）
font-family 字體
-------------------------------------
font:font-weight font-style font-size/line-height font-family;
font:font-size font-family(必須要寫)
*/
#box{width:300px;border:1px solid #000; font:14px/30px Arial,"宋體"; color:red; word-spacing:10px;}
/*
color 文字顏色
text-indent 首行縮進 (1em=1個文字大小)
text-align 文本對齊方式(left/center/right)
text-decoration 文本修飾(underline下劃線/line-through 刪除線/overline 上劃線/none)
letter-spacing 字母間距(字間距)
*/
3.填充
#box{width:100px;height:100px;background:red;border:10px solid #000; padding:20px 50px 80px 100px;}
#div{width:100px;height:100px;background:blue;}
/*
padding 內填充(padding在元素的邊框以內，內容之外，padding同樣顯示元素的背景)
padding-top
padding-right
padding-bottom
padding-left
可視寬(高):可視寬(高)=border+padding+width(height);
*/
4.邊距
#box{width:200px;height:200px;background:Red;border:10px solid #000; margin:30px;}
#div{width:200px;height:200px;background:blue;border:10px solid #ccc; margin:40px;}
/*
margin 外邊距(margin元素的邊框之外不顯示元素背景)
margin:10px 20px;
margin:10px 20px 40px;
margin:10px 20px 40px 60px;
margin-top
margin-right
margin-bottom
margin-left
margin疊加相鄰兩個元素的上下margin是疊加在一起
*/
/*
margin傳遞，子元素的上下margin會傳遞給父級
*/