css3

颜色
color
#ffffff
rgb
rgba
hsl
hsla
尺寸
绝对单位
px mm cm in
相对单位
em
1em=16px
body的font-size有关
rem
1rem = 16px 不变化
百分比
占父元素百分之多少
字体属性
font
font-family 字体家族
设置网络字体
@font-face{
font-family:自己定义的名字;
src:url(’’);
}
div{
font-family:自己定义的名字;
}
font-size 设置字体大小
font-style 设置字体倾斜
normal 不倾斜
italic 倾斜
oblique 模拟倾斜
font-weight 设置字体粗细
normal 正常400
bold 加粗 700
lighter 比父元素细
bolder 比父元素粗
100-900
color 设置字体颜色
text
text-align 设置文本水平方向对齐方式
left
center
right
vertical-align 设置文本垂直方向上的对齐方式
top
middle
bottom
line-height 设置行高
设置文本的行高为容器的高度，那么文字在容器内就垂直居中了。
text-decoration 设置文本修饰线
text-decoration:none;
text-decoration-line 设置修饰线的位置
underline 下划线
overline 上划线
line-through 中划线
none 没有线
text-decoration-style 设置修饰线的样式
solid 实线
dotted 点状线
dashed 虚线
double 双实线
wavy 波浪线
text-decoration-color 修饰线的颜色
text-transform 设置文字改变
none 不改变
lowercase 转换成小写
uppercase 转换成大写
capitalize 首字母大写
text-shadow 设置文字的阴影
none 没有阴影
text-shadow:3px 3px 3px red;
水平方向的偏移 垂直方向的偏移 阴影的模糊距离 阴影颜色

列表相关属性
list-style 设置列表的样式
list-style:none;
list-style-type 设置标志项的类型
none 没有标志项
disc 实心原点
square 实心方形
circle 空心圆
decimal 数值
decimal-leading-zero 补零的数值
lower-roman 小写罗马
upper-roman 大写罗马
…
list-style-position 设置标志项的位置
outside 在主框外
inside 在主框内
list-style-image 设置标志项的图片
url(’’)
list-style:circle url(’’) inside;
如果type和image都可用，那么用image的，如果image不可用，那么用type的。
其他属性
cursor 设置鼠标样式
default 箭头
auto 浏览器的鼠标样式
pointer 手型
help 帮助问号
move 移动
text 文本
crosshair 十字交叉
wait 等待
w-resize e-resize n-resize s-resize
nw-resize ne-resize sw-resize se-resize
…
outline 设置外边线
不占据屏幕空间，可能会覆盖其他内容
1px solid blue
display 展示样式
inline 行内展示，宽高无效
inline-block 行内展示，宽高有效
block 块级显示，宽高有效
none 隐藏，不占据屏幕空间
visibility 可见性
hidden 隐藏，不可见，占据屏幕空间
visible 显示，可见的
opacity 透明度0-1
0 隐藏，透明度为0，占据屏幕空间
1 显示，透明度为1
overflow 溢出处理
overflow-x 水平方向的溢出处理
overflow-y 垂直方向的溢出处理
hidden 溢出内容隐藏，强硬
auto 如果溢出产生滚动条，如果不溢出不产生滚动条
scroll 强制产生滚动条，无论溢不溢出
盒子模型
W3C标准盒子模型 IE盒子模型
所有的元素都可当做盒子处理
盒子属性 width height padding border margin
盒子分为4个区域 content-box padding-box border-box margin-box
内容区 内间距区 边框区 外边距区
padding和margin属性的取值
padding-top
padding-right
padding-bottom
padding-left
margin-top
margin-right
margin-bottom
margin-left
padding和margin取值为一个值：上下左右
padding和margin取值为两个值：上下 左右
padding和margin取值为三个值：上 左右 下
padding和margin取值为四个值：上 右 下 左
盒子计算
W3C盒子
默认，不需要设置
box-sizing:content-box;
内容区宽高
宽 width
高 height
盒子的宽高
宽 width+paddingLeft+paddingRight+borderLeft+borderRight
高 height+paddingTop+paddingBottom+borderTop+borderBottom
所占屏幕空间的宽高
宽 width+paddingLeft+paddingRight+borderLeft+borderRight+marginLeft+marginRight
高 height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom
IE盒子
需要手动设置 box-sizing:border-box;
内容区宽高
宽 width-borderLeft-borderRight-paddingLeft-paddingRight
高 height-borderTop-borderBottom-paddingTop-paddingBottom
盒子的宽高
宽 width
高 height
所占屏幕空间的宽高
宽 width+marginLeft+marginRight
高 height+marginTop+marginBottom