【CSS】基础笔记——第七天
▊ 元素的显示与隐藏
▍ display（最常用）
我们熟悉的display还可以设置为display: none
这有两层含义：隐藏；不再保留位置
▍ visibility 可见性
默认值为visibility: visible，即可见
还以取值：visibility: hidden，两层含义：隐藏；保留位置
▍ overflow 溢出
| visible（默认） | 不被截取隐藏 |
| hidden | 超出的部分被隐藏 |
| scroll | 总是显示滚动条 |
| auto | 只有超出时才自动加上滚动条 |
▊ 用户界面样式
▍ 鼠标样式 cursor
| default（默认） | 小白 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
▍ 轮廓线 outline
可以设置outline-color，outline-style，outline-width，但我们通常不使用（浏览器兼容性问题）
最常见的用法为outline: 0或outline: none
▍ 防止拖拽文本域 resize
文本域（textarea）的右下角是可以任意拖拽的，这会让我们的布局排版毁于一旦
让其固定大小，不可拖拽：resize: none;
另外，实际开发中，文本域也有默认轮廓线，需要把outline设置为none；其默认边框通过border进行修改
▊ 垂直对齐 vertical-align
我们之前学习过了水平居中：
• 有宽度的块级元素水平居中：margin: 0 auto;
• 文字水平居中对齐：text-align: center;
下面介绍垂直居中 ↓ 它只针对行内元素或者行内块元素，而不是针对块级元素的内容的！！！
先明确一下：
取值：vertical-align: baseline | top | middle | bottom
它通常被用在两个地方：
❶ 图片、表单与文字的对齐
vertical-align的本质是行内元素，行内块元素的对齐方式（比如下面的图片与文字）
注意默认的位左上图 —— 基线(baseline)对齐
❷ 去除图片底侧的空白缝隙
用图片撑开没有高度的盒子时，底部会有空白缝隙（原理是图片与文字默认基线对齐，空隙实际上是基线与底线之间的那部分）
解决方法：img的vertical-align设置为顶线、中线、底线对齐都可以，只要不是默认的基线对齐（baseline）
第二种解决方法：img改为display: block，原理是块级元素就不会有默认的vertical-align基线对齐
▊ 文字溢出
▍ white-space（ 对象内文本显示方式 ）
white-space: narmal; 默认处理方式，即自动换行
white-space: nowrap; 强制一行内显示
▍ text-overflow（ 是否使用省略标记(…) ）
text-overflow: clip; 直接裁剪，不显示省略号（…）
text-overflow: ellipsis;文本溢出时显示省略号
▍ 三步曲——溢出的文字省略号显示
white-space: nowrap; /*强制一行内显示*/
overflow: hidden; /*超出的部分隐藏*/
text-overflow: ellipsis; /*显示省略号*/
▊ CSS精灵技术（sprite）
▍ 为什么需要精灵技术
网页的每一张图像都要像服务器请求后才能展现给用户，很显然这会大大降低加载速度
因此精灵技术的目的就是：
为了有效减少服务器接受和发送请求的次数，提高页面的加载速度
▍ 精灵技术详解
精灵图就是那张大图
精灵技术是针对背景的，插入的img并不使用
最关键的是：盒子大小正好；使用background-position属性精确定位
background: url(image/img.png) no-repeat -34px -45px; /* 注意是负值，理解一下 */
▊ 滑动门
直观上就是：长度可伸缩的图片
原理就是CSS精灵技术：
- a是设置左侧背景（左门）
- span是设置右侧背景（右门）
- 因为整个导航栏都是链接，因此a还要包含span
- 因为是左右推拉的滑动门，需要用文字撑开盒子，要用到行内块
- 注意右门的右对齐也是关键
代码 ：
<a href="#">
<span>一个按钮span>
a>
a {
display: inline-block;
height: 33px;
background: url() no-repeat;
}
a span {
display: inline-block;
height: 33px;
background: url() no-repeat right top;
▊ margin负值之美
❶ 前面在绝对（absolute）定位时，使小元素垂直居中，水平居中时就使用到了margin的负值
即：先left: 50%，然后往回修正时就使用了负值
❷ 压住盒子的相邻边框
因为有边框的盒子在浮动后挨在一起时，相邻的边框因为紧挨着会变粗：1 + 1 = 2
我们显然不能像HTML中的合并单元格边框那样解决这个问题
其实只要margin-left: -1;便可以巧妙且优美的解决这个问题（原理就是边框压住了边框）
同样，在垂直方向上就写margin-top: -1;
❸ 这种“后边的盒子边框压住前一个盒子的边框”的方式最够美观，但我们想实现下面的效果：
当鼠标悬浮在该盒子上时，盒子的边框由灰色变橙色（淘宝 ）
此时因为后边的盒子边框，压住了前面的盒子边框，直接写hover会出现最右边的边框无法变色的情况
原因当然是它被压住了
解决方法很简单，关键是思路要想到：position: relative;
毕竟定位是层级最高的。
另一种思路是所有盒子都设置为相对定位(relative)，鼠标悬浮处的盒子设置：z-index: 1;
▊ CSS三角形之美
做一个CSS三角的方法：
- 宽、高为0
- 四个边框分开写全，需要的三角形部分保留颜色，不需要的部分改为
transparent透明（而不是省略） - 再加上：
font-size: 0; line-height: 0;
☀ 注
文章案例改编自《黑马程序员-web前端》
&Lolisaikou