css拓展(笔记)

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：虚线