1、鼠标指针
cursor: 光标
- default 默认正常鼠标指针
- text 文本选中
- move 移动选择
- pointer 手指
- url(url图片地址) 设置对象为图片
案例:自定义鼠标指针
#auto表示当前指针匹配的状态
cursor: url(curs.png),auto;
2、控制列表
list-style-type:
- disc 实心圆
- circle 空心圆
- square 实心方块
- decimal 阿拉伯数字
- lower-latin 小写字母
- upper-latin 大写字母
- lower-roman 小写罗马数字
- upper-roman 大写罗马数字
list-style-image:url
使用图片作为列表样式
list-style-position:inside|outside
控制列表标识的位置
3、控制表格(table)
#将相邻的表格边框重叠
border-collapse:collapse
width: 宽度
height: 高度
#设置表格内容垂直方向的位置
vertical-align
- top
- middle
- bottom
padding: 设置表格和内容的间距
#设置表格标题的位置在浏览器的高版本中使用
caption-side
- top
- right
- bottom
- left
4、盒子模型
外边距(margin)
margin-[top|right|bottom|left]
- margin-top: 上外边距
- margin-right: 右外边距
- margin-bottom: 下外边距
- margin-left: 左外边距
说明:
如果四边的外边距都相同,可以简写:
margin: 值px;
#margin也可以使用链式是写法:
/*情况一:设置一个值(上,右,下,左)*/
margin: 20px; //上,右,下,左都为20px
/*情况二:设置两个值(上下,左右)*/
margin: 20px 40px; //上下20px, 左右40px
/*情况三: 设置三个值(上,左右,下)*/
margin: 20px 40px 60px; //上20px,左右40px,下60px
/*情况四:设置四个值 (上,右,下,左)*/
margin: 20px 40px 60px 80px; //上20px,右40px,下60px,左80px
#水平居中 auto
margin: 20px auto; //上下20px,左右自适应居中
边框(border)
border-style:none|dotted|dashed|solid|double 边框样式
solid: 实线
dotted: 点状线
dashed: 虚线
double: 双实线
border-(top|right|bottom|left)-style
border-width: 边框粗细
border-(top|right|bottom|left)-width
border-color: 边框颜色
border-(top|right|bottom|left)-color
案例:
#统一设置
border: 2px orange solid;
内边距(padding)
padding: 内边距(边框和内容的间距)
padding-top
padding-right
padding-bottom
padding-left
规则与外边距相同
注意:
1、行内元素不能设置上下外边距,只能设置左右外边距。
2、行内元素在设置内边距时,上下内边距不会对其他元素造成影响
3、行内元素不能设置宽高
4、在设置相邻块元素上下外边距时。相邻的外边距会进行重合
(外边距塌陷,最终的边距以最大值为准)
5、行内元素在设置行高时,不会对内边距造成影响。
行高
#通常与height配合使用,可实现垂直居中(height与line-height相同)
line-height
#案例
div{
height: 60px;
line-height: 60px;
}
5、元素转换
display: 元素类型转换
none: 设置元素不可见,并且不占位
block: 转换为块元素
inline: 转换为行内元素
inline-block: 让元素具有行内和块的特性
visibility: hidden; 设置元素隐藏(元素要占位)