一、text字體font
二、背景
| 屬性 | 值 | 作用 |
| background-color | pink | |
|
background-image
|
url(images/l.jpg)
|
添加圖片 |
|
background-repeat
|
repeat
|
平鋪 |
|
no-repeat
|
不平鋪 | |
|
repeat-x
|
橫向平鋪 | |
|
repeat-y
|
縱向平鋪 | |
|
background-position
|
x坐標 y坐標
50px 10px
|
|
|
right top
|
右上角 | |
|
left bottom
|
左下角
|
|
| center center |
水平居中 垂直居中
|
|
|
center left
|
則兩個值前后順序無關 因為是方位名詞 | |
|
top
|
如果只指定了一個方位名詞，另一個值默認居中對齊
|
|
|
center 10px
|
水平居中 上邊10px | |
| background-position | center top | 一般用於body等大背景的設置， |
|
background-attachment
|
fixed
|
背景固定，互動滾輪時背景不移動 |
|
scroll
|
滾動，默認也是滾動的 | |
|
background
|
#ccc url(images/sms.jpg) no-repeat fixed center top |
（背景簡寫）背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置
|
|
background
|
rgba(0, 0, 0, .2) | 背景透明 因為是CSS3 ，所以 低於 ie9 的版本是不支持的。 |
三、部分常用屬性
| 屬性 | 值 | 作用 | |
| text-align | center | 字體居中，盒子里面的文字 行內元素 、行內塊居中對齊水平居中 | |
|
border-radius
|
10px
|
圓角 | |
|
50%
|
圓形 | ||
|
box-shadow
|
0 15px 30px rgba(0,0,0,.3)
|
水平陰影 垂直陰影 模糊距離（虛實） 陰影尺寸（影子大小） 陰影顏色 內/外陰影；
|
|
| text-decoration | underline | 有下划線 | |
| none | 沒有下划線 （一般用於a標簽） | ||
| overflow | scroll |
顯示滾動條總是會顯示 - 不會超出盒子大小，內容能顯示全但是 太丑了我們不常用
|
|
| hidden | 超出盒子大小的部分，隱藏起來 | ||
| auto | 如果超出盒子大小就顯示滾動條，不超出就不顯示 | ||
|
text-overflow
|
ellipsis
|
文字溢出 用省略號替代 ellipsis 省略號 (一般結合overflow:hidden一起使用)
|
|
|
white-space
|
normal
|
文字自動換行，文字顯示不開時（默認值換行的）
|
|
|
nowrap
|
文字強制一行內顯示，除非遇到 br 換行標簽 | ||
| dispaly | block | 塊級元素 | |
| inlinebolck | 行內塊元素 | ||
| inline | 行內元素 | ||
| none | 隱藏元素，不保留位置 | ||
|
visibility
|
hidden | 隱藏元素，保留位置 | |
|
visible
|
顯示元素，默認的值 | ||
| positon | relative | 相對定位 (相對自己原來的位置，保留原來的位置，不脫離標准文檔流) | |
| absolute | 絕對定位 （相對瀏覽器，或者設有定位的父元素，脫離標准文檔流，不保留原來的位置） | ||
| fixed | 固定定位 （相對於瀏覽器的位置） | ||
|
z-index
|
1 | 填寫數字，數字越大，在最上面一層 | |
| cursor |
default
|
默認的箭頭（鼠標樣式） | |
|
pointer
|
小手 | ||
|
move
|
移動 | ||
|
text
|
文本 | ||
|
not-allowed
|
禁止 | ||
|
outline
|
none
|
取消輪廓線，input、textarea標簽中的默認樣式，就是焦點時會有一個大的邊框，取消它 | |
|
resize
|
none
|
防止用戶拖拽文本域，比如在textarea標簽中 | |
|
vertical-align
|
middle
|
垂直居中，但是對於塊級元素是沒有作用的 | |
|
top
|
垂直方向 頂部對齊
|
||
|
bottom
|
垂直方向 底部對齊
|
||
|
baseline
|
垂直方向與基線對齊（底部對齊，但是底部和父盒子之間會有白邊縫隙）
解決方法：不要設置基線對齊，或者將該標簽設置為塊級元素 display:block
|
||
| 注意：如果是圖片和文字的對齊方式，直接給圖片img標簽來設置vertical-align屬性即可。 | |||
| word-break | break-all | 英文語句換行 （在area標簽中使用） 有時候英文不換行的時候使用 | |
----