跟着艾文一起学前端-第12篇-CSS剩余零散知识点

1. 控制元素的显示与隐藏

display-显示

display除了可以做模式转换外（block，inline， inline-block），还可以控制显示，比如当display:none;时，该元素则不显示，就被隐藏起来了，并且不占原来的位置。
块元素默认的值是block，行内元素默认的是inline，因此，对隐藏的元素进行展示时：控制块元素展示可以通过display:block; 让行内元素展示可以通过display:inline;

visibility - 可见

取值：

• visible 元素可见
• hidden 不可见，但是依旧保持原来的位置。
• inherit 继承父对象的可见性，是默认值

overflow - 溢出

溢出就是内容超出了容器的范围
取值：

• visible 可见的，默认值
• hidden 溢出隐藏，溢出的部分不可见
• scroll 总是显示滚动条，不管有没有超出，都会显示滚动条区域；
• auto 自动，超出的时候显示滚动条不超出的时候就不显示滚动条，该值是body 和 textarea的默认值

溢出的文字隐藏

1. white-space 用来设置文本显示方式，一般控制只显示一行，
   值：normal 默认的处理方式，也就是自动换行； nowrap 强制在一行内显示所有文本，即便超出了容器也会在一行上显示，直到文本结束或者遇到br换行标签时才换行。一般处理方式是加上overflow:hidden; 将超出容器的部分隐藏掉就好了。
2. text-overflow 文字溢出（前提是使用了white-space: nowrap; 强制在一行中展示）
   取值：
   • clip 不显示省略号标记，只是简单的切掉多余的部分
   • ellipsis 当文本溢出时显示省略号标记(…)
     想实现省略号的实现方式如下：
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

2. 用户界面样式

cursor - 鼠标样式

常用的值如下：

• pointer ： 鼠标样式是小手；
• text ： 鼠标样式是选择的状态就是，形状是罗马数字1上下两横的样子，或者你现在鼠标放在你看到的文字上的状态；
• move ：鼠标样式是拖拽的样式，四个向外的箭头组成的一个十字架的样子
• default ：鼠标默认的样子，就是你鼠标放在桌面上展示的那个箭头的样子

outline - 轮廓线

轮廓线是元素周围的线，比如表单元素的轮廓，类似盒子边框的样子，作用是突出元素；由于不同的浏览钱展示表单元素的轮廓线样式不一样，可能会很丑，所以它的最常用的做法就是取消轮廓线：outline: none;

resize - 阻止文本域的拖拽

textarea文本域默认是可以拉伸，变大或者缩小的，这样会影响到页面的展示，所以可通过resize:none; 来实现不让其进行拖拽伸缩的行为。

3. vertical-align - 垂直对齐

vertical-align 不影响块元素中的内容对齐，它只作用于行内元素和行内块元素，特别是行内块元素，通常用来控制图片与表单和文字的对齐。
比如给图片加一个vertical-align: middle; 可以实现图片跟文字中线对齐，也就是说图片和文字的中间对称轴在一条线上；文字上方对齐的话就是 top， bottom， 默认是baseline 基线对齐
如何解决图片底部留白问题：

1. 给图片设置img {vertical-align:top; border:0;} 主要是为了防止图片与文字的基线对齐，导致图片底部会留白，同时取消图片的边框。
2. img {border:0; display:block} 将其转成块

4. CSS精灵图技术

它是一种处理网页背景图像的方式，主要是为了减少服务器的请求次数，将一个页面涉及到的所有零星的背景图像都集中到一张大图上，然后将大图应用于网页，这样，用户访问页面时，只需要向服务器发送一次请求，页面的背景图像就可以全部展示，这样有很多小图的背景图像合成的大图被叫做精灵图。
在使用的时候需要通过background属性来设置显示精灵图中的某一部分，使用方式：
background: background-image no-repeat -x坐标 -y坐标; 这里的x和y轴是你在ps中测量的值，background中-x和-y这两个位置即background-position的值，这里的取值范围是0或者是负整数，单位是像素。
注意：精灵图只能用于小的装饰性背景图片，不能用于img的src