文章目录
1. 元素的显示、隐藏、透明
- display：隐藏对象，不保留位置
- visibility：隐藏对象，保留位置
- overflow：只是隐藏超出部分
-
rgba：只给当前元素设置背景透明度，不会影响子元素 - opacity：给元素设置透明度，影响子元素，当子元素值大于父元素值时不会生效，反之会生效
2. CSS用户界面样式
2.1 鼠标样式 cursor
- 隐藏：none
- 默认：default
- 小手：pointer
- 移动：move、all-scroll
- 文本：text
- 禁止：not-allowed
2.2 轮廓线 outline
- outline 不占据空间，绘制于元素内容周围
- 和border很相似
- input聚焦默认有这个属性，可以使用 outline: none; 取消
2.3 禁止拖拽 textarea
resize: none;
3. 行内块元素垂直对齐
行内块元素默认为基线对齐，如果文字也设置基线对齐也无法对齐
要设置底线、中线、顶线对齐
4. 文本溢出显示省略号
- white-space
- normal：默认
- nowrap：文本一行显示
- text-overflow
- clip：溢出裁剪
- ellipsis：溢出省略号标记
- 注意：必须要文本一行显示和溢出隐藏，才能出省略号
5. 精灵图(雪碧图)
5.1 为什么要使用精灵图
因为一个页面/项目里面会有很多个小图标，如果都使用图片会增加服务器的负担
5.2 怎么使用精灵图
固定宽高，通过background来添加精灵图，通过background-position来改变 x轴 y轴的位置获取想要的小图标
6. 边框折叠、字母间距
- 边框折叠：border-collapse: collapse(折叠) separate(分开);
- 字母间距：letter-spacing：像素单位;
7. 盒子模型
7.1 box-sizing
- content-box：内容盒(width = content)(默认)
- padding-box：内边距盒(width = content + padding)
- border-box：边框盒(width = content + padding + border)
8. 阴影相关
8.1 box-shadow
- box-shadow: X(正数往右) Y(正数往下) 模糊半径 延伸距离 颜色 外框阴影(默认)/内框阴影(inset);
- 可以配置多个阴影，box-shadow: X Y R L C ,X Y R L C ,X Y R L C ,X Y R L C ;
8.2 text-shadow
- text-shadow: X(正数往右) Y(正数往下) 模糊半径 颜色;
- 也可以配置多个阴影
9. 文本相关
9.1 首行缩进
- text-indent
9.2 文本修饰线
- text-decoration: 线 颜色 样式 粗细; ，可以不按顺序
- 线：
- underline：下划线
- overline：上划线
- line-through：删除线
- 样式：
- wavy：波浪线
- solid：实线
- dashed：虚线
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。