文章目录
1. 元素的显示、隐藏、透明
- display:隐藏对象,不保留位置
- visibility:隐藏对象,保留位置
- overflow:只是隐藏超出部分
-
rgba
:只给当前元素设置背景透明度,不会影响子元素 - opacity:给元素设置透明度,影响子元素,当子元素值大于父元素值时不会生效,反之会生效
2. CSS用户界面样式
2.1 鼠标样式 cursor
2.2 轮廓线 outline
2.3 禁止拖拽 textarea
resize: none;
3. 行内块元素垂直对齐
要设置底线、中线、顶线对齐
4. 文本溢出显示省略号
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:虚线
原文地址:https://www.jb51.cc/wenti/3285516.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。