css：style样式大全
一、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标签中使用） 有时候英文不换行的时候使用 | |
----
