元素的显示与隐藏

内容概览：

• 元素的显示与隐藏
  • 显示：display
  • 可见性：visibility
  • 溢出：overflow
• CSS高级技巧
  • CSS用户面界面样式
  • 鼠标样式：cursor
  • 轮廓：outline
  • 防止拖曳文本域：resize
  • vertical-align：垂直对齐
  • 图片和文字对齐
  • 去除图片底侧空白间隙
  • 溢出的文字隐藏
    • word-break：自动换行
    • white-space
    • text-overflow：文字溢出
• CSS精灵技术（sprite）（背景图片特别多时使用精灵图，融合一张页面中的所有背景图）
  • 精灵技术的本质
  • 精灵技术的使用
• 字体图标

元素的显示与隐藏

目的：

• 让一个元素在页面中消失，但是不在文档源码中删除。

显示 display

• display：none；隐藏元素，不保留位置；
• display：block；显示元素 并 转换为块级元素

可见性 visibility

• visibility：visible；显示元素；
• visibility：hidden；隐藏元素，但保留位置；

溢出 overflow

• overflow：visible；默认的，超出显示；
• overflow：auto；超出自动显示滚动条；不超出不显示滚动条；
• overflow：hidden；超出部分隐藏掉；
• overflow：scroll；不管内容是否超出，总是显示滚动条；

CSS高级技巧

CSS用户面界面样式

鼠标样式：cursor

• 检测鼠标指针如何在系统中定义光标

• cursor：default；默认的，指针 样式；
• cursor：pointer；鼠标经过后，变成 手掌 的样式；
• cursor：move；鼠标经过时，变成类似 十字架 的样式；
• cursor：text；鼠标经过时，变成类似于 输入框中显示 ‘I’  的样式；

轮廓：outline

• outline：0 || none；取消轮廓线；一般都会去掉轮廓线
• 是绘制元素周围的一条线，位于边框边缘的外围，起到突出元素的作用；
• 语法格式如下：

outline：outline-color || outline-style || outline-width；

防止拖曳文本域：resize

• resize:none；防止文本域被拖曳变形

vertical-align：垂直对齐

图片和文字对齐

• 对于块级元素无效；

vertical-align：baseline（基线对齐）| top | middle（居中对齐） | bottom；

• vertical-align：baseline；图片和文字默认是基线对齐，红色显示位置

去除图片底侧空白间隙（少部分会出现此问题）

• 图片 或者 表单 等行内块元素，底线会和父级盒子的基线对齐，这样就会造成上述图片中的间隙问题。
• 解决方案：
  1. display：block；转换为块级元素；
  2. vertical-align：top | middle | bottom；去除默认基线属性即可；

溢出的文字隐藏

word-break：自动换行

/* 主要用于处理英文单词 */
/* 浏览器默认换行规则 */
word-break: normal;
/* 允许单词拆开显示；即单词内部换行； */
word-break: break-all;
/* 不允许拆开单词；连字符（my-class）特殊，可拆开换行 */
word-break: keep-all;

white-space

• 设置或检索对象内 文本 的显示方式；通常用于强制显示一行内容

/* 默认处理方式 */
white-space: normal;
/* 强制在同一行显示所有文本，直到文本结束或者遭遇 <br/> 标签对象才换行 */
white-space: nowrap;

text-overflow：文字溢出

• 与 white-space：nowrap; 和 overflow：hidden; 搭配使用；
• 必须先利用 white-space：nowrap; 将文字强制显示在一行，然后使用 overflow：hidden; 隐藏属性后；才能使用 text-overflow 属性；

/* 不显示省略标记（...），而是简单的裁切 */
text-overflow: clip;
/* 当对象文本溢出时显示省略标记（...） */
text-overflow: ellipsis;

/* 示例 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

CSS精灵技术（sprite）

•  为了减少服务器的接收和请求次数

精灵技术的本质

• 简单来说，CSS精灵是一种处理网页背景图片的方式。即将一个页面中涉及到的所有背景图片集中到一张大图中，然后将大图应用网页；

精灵技术的使用

• 由其本质我们可以知道，各个网页元素通常只需要精灵图中不同位置的某个小图，想要精确定位到精灵图中的某个小图，就需要使用CSS的 background-image、background-repeat 和 background-position属性进行背景定位；

 字体图标

 字体图标使用流程

 svg格式上传转换为字体格式

• 字体文件包国内下载：阿里巴巴图标库
• 国外：图标库