CSS3基础(二)

时间:2026-06-03 16:43:48 来源:幸福记忆 作者:远方 阅读:76

一、css中的属性

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; 设置元素隐藏(元素要占位)