一、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标签中使用) 有时候英文不换行的时候使用 | |
----