1. 颜色属性
color 颜色
英文单词:red,blue...
十六进制:#ff0000 ,ff00dd...
background-color 背景颜色
三原色:rgba(红,绿,蓝,透明度)
2. 尺寸属性
height 高
width 宽
注意:尺寸属性只针对块级标签,行级标签只有img 、input 有作用
3. 字体属性
color 字体颜色
font-size 字体尺寸
font-style 字体类型
font-weight 字体粗体
bold
normal
font-variant 字体变形
font -familay 字体族科
4. 文本属性
text -align:水平对齐方式
right
center
left
text -indent:缩进
em
text -decoration:文本修身
overline
underline
line -through
none
vertical-align
line -height
letter-spacing:字符间距
word -spacing:单词间距
word -wrap
noramal:正常
break-word :对英文字符执行强制转行
white-space
nowrap:将文字强制显示在一行
5. 背景属性
background-color :表示背景颜色
background-image :背景图片
background-repeat :平铺方式
no-repeat :不平铺
repeat -x:水平平铺
repeat -y:垂直平铺
background-position :背景图像位置
第一个值:表示水平位置,left center right
第二个值:表示垂直位置,top center bottom
两个值可以用像素表示
background-attachment :背景附件
fixed :固定图片的位置
scroll :默认位置
background-size :背景大小
cover
contain
6. 边框属性
border-style /color/width:边框的样式、颜色、宽度等的设置
border-style :边框的样式
none : 无轮廓。border-color 与border-width 将被忽略
hidden:隐藏边框。IE7及以下尚不支持
dotted: 点状轮廓。IE6下显示为dashed效果
dashed:虚线轮廓。
solid:实线轮廓
double:双线轮廓。两条单线与其间隔的和等于指定的border-width 值
groove:3 D凹槽轮廓。
ridge: 3 D凸槽轮廓。
inset: 3 D凹边轮廓。
outset:3 D凸边轮廓。
border-color :边框颜色
Border-width :边框的宽度
border-style /color/width:边框的样式、颜色、宽度等每一边的设置
方位:上top、下bottom、左left、右right
如:border-top -width
border-top -style
border-top -color
border-radius :圆角
从左上角,顺时针开始赋值,如果不满四个值,没有赋值的,取对角的值
box-shadow :盒子阴影
第一个:水平偏移量
第二值:垂直偏移量
第三个值:阴影的模糊度
第四个:阴影的外延度
第五个:颜色
text-shadow :文字阴影
7. 列表属性
list -style -type :序号的类型
Square:方形
Desc:实心圆
Circle:空心园
Decimal :数字
Lower-alpha :小写英文
Upper-alpha :大写英文
Lower-roman :小写罗马字母
Upper-roman :大写的罗马字母
list -style -position :序号的位置。
Inside:将我的序号,和内容整合在一起
Outside:将我的序号,分开
list -style -image :序号用图片表示
list -style :none 将序号去掉
8. 浮动属性
float:
none : 不浮动
left:左浮动
right :右浮动
clear :
left:清除左浮动
right :清除右浮动
both:都清除
overflow:
hidden:超出隐藏
scroll:总是以滚动条显示
auto:自动显示
display:
none :隐藏盒子
block:块级显示
将行级元素,转为块级元素。
inline-block:块级元素行显示。
可将元素,在一行显示。
9. 定位属性
position :定位方式
relative :相对定位
相对我盒子本身的当前位置
absolute :绝对定位
脱离文档流,相对于页面来定位。
fixed:固定定位
top:上边距
left:左边距
right:右边距
bottom:下边距
z-index:层级。
z-index的值越大。层级越高。
10. 外边距
margin:盒子和盒子之间的间距。
表示从上边距,开始顺时针旋转,如果不够,取对边的值。
margin-top :上外边距
margin-left :左外部距
margin-bottom :下外边距
margin-right :右外边距
11. 内边距
padding:内容和盒子边框的距离
表示从上边距,开始顺时针旋转,如果不够,取对边的值。
padding-left :左内边距
padding-right :右内边距
padiing-top :上内边距
padding-bottom :下内边距