CSS技巧总结

给自己时间，不要焦急，一步一步来，一日一日过，

请相信生命的韧性是惊人的，跟自己向上的心去合作，不要放弃对自己的爱护。

元素的显示与隐藏

display 显示

使用 disply 隐藏之后，不再保留原来的位置，会被之后正常的文档流覆盖

display: none 隐藏对象

display：block 除了转换为块级元素之外，同时还有显示元素的意思。

visibility 可见性

和 display 隐藏不同的是，使用可见性隐藏，元素仍然会保留原来的位置

visibility：visible ;  对象可视

visibility：hidden;    对象隐藏

overflow 溢出

这是一个神奇的单词哈????，很多地方都会用到它，之前提到的清除浮动也使用到了 overflow

综合运用

核心代码 github 地址

HTML 部分

CSS 部分（ 很重要的思想转换，一定要记得）

CSS 用户界面样式

鼠标样式 cursor

轮廓线

平时我们最直接的写法是：outline: none，取消轮廓线。

 <input  type="text"  style="outline: none;"/>

防止文本域拖拽

平时使用文本域布局的时候，如果不设置任何属性，用户抗议自己修改文本域的大小，会影响页面的整体布局，这时我们就要注意了：
实际开发中，我们文本域右下角是不可以拖拽的 ❗

<textarea  style="resize: none;"></textarea>

vertical-align 垂直对齐

vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素 或者 行内块元素

特别是行内块元素，通常用来控制图片 / 表单与文字的对齐。

vertical-align : baseline |top |middle |bottom

对齐方式依次是：基线、顶线、中线、底线

溢出的文字省略号显示

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出

text-overflow : clip；不显示省略标记（...），而是简单的裁切 

text-overflow：ellipsis；当对象内文本溢出时显示省略标记（...）

white-space 设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

white-space:normal；默认处理方式

white-space:nowrap；强制在同一行内显示所有文本，直到文本结束或者遭遇 br 标签对象才换行。

省略号三部曲

  /*1. 先强制一行内显示文本 */
      white-space: nowrap;
  /*2. 超出的部分隐藏 */
      overflow: hidden;
  /*3. 文字用省略号替代超出的部分 */
      text-overflow: ellipsis;

CSS 精灵技术（sprite）很重要

为什么需要 sprites 技术

???? 图为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展示给用户，但是 一个网页中往往会应用很多小的背景图作为修饰，当网页中的图像过多，服务器就会频繁的接收和发送请求，会降低页面的加载速度

特点：有效的减少服务器接收和发送请求的次数，提高页面的加载速度

精灵技术讲解

CSS 精灵图实际上是将网页中的一些背景图整合到一张大图中，这样当用户访问该页面时，只需要向服务器发送一次请求，网页中的背景图像即可全部展示出来

需要使用到的 CSS 技术：background-image、background-repeat、background-position 属性进行背景定位。

精灵技术使用的核心总结

1. 精确测量，每个小背景图片的大小和位置。
2. 给盒子指定小背景图片时，背景定位基本都是负值。