五分钟了解CSS样式的高级技巧

1.元素的显示与隐藏

• 目的
  让一个元素在页面中消失或者显示出来
• 场景
  类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

1.1 display显示

display:none;	隐藏对象
display:block;	除了转换为块级元素之外，同时还有显示元素的意思

1.2 visibility可见性

visibility：visible;	对象可视
visibility：hidden;	对象隐藏

1.3overflow溢出

visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
–	–
auto	超出自动显示滚动条，不超出不显示滚动条

2. CSS用户界面样式

2.1 鼠标样式cursor

default	默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

代码：

• 我是小白
• 我是小手
• 我是移动
• 我是文本
• 我是文本

2.2 轮廓线 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
最直接的写法是 ： outline: 0; 或者 outline: none;（去掉轮廓线）

2.3 防止拖拽文本域resize

实际开发中，我们文本域右下角是不可以拖拽：

3. vertical-align 垂直对齐

• 有宽度的块级元素居中对齐，是margin: 0 auto;
• 让文字居中对齐，是 text-align: center;
• vertical-align 垂直对齐，它只针对于行内元素或者行内块元素。
  代码：vertical-align : baseline |top |middle |bottom
  注意：
  vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，

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

4. 溢出的文字省略号显示

4.1 white-space

white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
white-space:normal;默认处理方式
white-space:nowrap;强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行

4.2 text-overflow 文字溢出

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出
text-overflow : clip ；不显示省略标记（…），而是简单的裁切
text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（…）

4.3 总结三步曲

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