border : 边框

属性值 说明
border-width 指定边框宽度
border-style 指定边框样式
border-color 指定边框颜色
border-top-color 顶部边框颜色
border-right-color 右边边框颜色
border-bottom-color 底部边框颜色
border-left-color 左边边框颜色
同上可设置样式/边框 同上使用

border-radius : 圆角

属性值 说明
length 自定义容器高宽,常用 px, em, rem, % …
inherit 从父元素继承
border-top-left-radius 设置左上角圆角
border-top-right-radius 设置右上角圆角
border-bottom-left-radius 设置左下角圆角
border-bottom-right-radius 设置右下角圆角

background : 背景

属性值 说明 版本
background-color 指定背景颜色 1
background-position 指定背景图片位置 1
background-repeat 指定背景图片重复 1
background-origin 指定背景图片定位区域 3
background-clip 指定背景图片绘画区域 3
background-size 指定背景图片的大小 3
background-attachment 指设置背景图像是否固定或滚动 1
background-image 指定背景图片绘画区域 1

clear : 清除浮动

属性值 说明
left 清除左侧浮动
right 清除右侧浮动
both 清除两侧浮动
none 不清除浮动,允许两遍有浮动
inherit 继承父级

color : 颜色

属性值 说明
#ff0000 十六进制
rgb 红绿蓝颜色值
rgba 红绿蓝颜色值 + 透明度
red 颜色名

查看详情

cursor : 手势

属性值 说明
url 自定义光标
auto 默认光标(浏览器默认)
default 默认光标
crosshair 十字线
pointer 手势
move 此光标指示某对象可被移动
text 设置一段指示文本
wait loading
help 问号或一个气球

display : 元素类型

属性值 说明
none 隐藏元素
block 设置为快级元素
inline 内联元素,元素前后没有换行符
inline-block 行内块级元素
table 表格 类似 table
table-row 类似 tr
table-cell 表格单元格 类似 td
inherit 从父元素继承

float : 浮动

属性值 说明
left 左浮动
right 右浮动
none 默认值 , 不浮动 , 清除浮动
inherit 从父元素继承

font : 字体

属性值 说明
font-style 字体样式(字体倾斜)
font-weight 加粗
font-size 字体大小
line-height 字体行高
font-family 字体格式

height / width: 高 / 宽

属性值 说明
auto 默认。浏览器会计算出实际的高宽。
length 自定义容器高宽,常用 px, em, rem, % …
inherit 从父元素继承

margin : 外边距

属性值 说明
margin 简写
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距

padding : 内边距

属性值 说明
padding 简写
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距

position : 定位

属性值 说明
absolute 绝对定位
fixed 绝对定位(固定在页面某个位置)
relative 相对定位
static 默认值, 清除定位
inherit 从父元素继承