css学习4：css高级技巧

css高级技巧：元素的显示与隐藏、css用户界面样式、垂直居中的应用、溢出的文字省略号显示、css精灵技术（重要、常用）、滑动门技术、margin负值的应用、css三角形

一、元素的显示与隐藏

（1）display

     【隐藏】display:none;（隐藏元素、不保留位置）
     【显示】display:block;

（2）visibility（可见性）

     【隐藏】visibility:hidden;（隐藏元素、保留位置）
     【显示】visibility:visible;

（3）overflow（溢出）:隐藏和显示溢出的部分

     【隐藏】overflow:hidden;
     【显示】overflow:visible;

拓展：
【1】overflow:scroll;(显示滚动条，不会超出盒子大小，内容可以全部显示，但是太丑，不常用)
【2】overflow:auto;(有溢出就显示滚动条，没有溢出就不显示，不常用)

二、css用户界面样式

1、鼠标样式 cursor

（1）默认：cursor:default;
（2）小手：cursor:pointer;
（3）移动：cursor:move;
（4）文本：cursor:text;
（5）禁止：cursor:not-allowed;

2、轮廓线 outline

一般是要去掉的： outline:0; 或 outline:none;
3、防止用户拖拽文本域 resize:none;

三、垂直居中：vertical-align:middle;

【只针对行内元素和行内块元素，实现顶线（top）、中线（middle）、基线（baseline）、底线（bottom）对齐】

1、图片对齐文字：

【例】

<img src="images/images/学成网user_06.png" style="vertical-align: middle;">qq-chenying

2、去除图片底部空白缝隙：

图片底部空白缝隙产生原因：默认基线对齐（vertical:baseline;）

【解决方案一】：（最常用）
(只要不是基线对齐就可以，随便top、middle、bottom都可)
【例】

<div>
         <img src="images/images/学成网user_06.png" style="vertical-align:top;">
</div>

【解决方案二】：
（将img转换为块级元素，基线对齐对块级元素无效。）
【例】

<div>
         <img src="images/images/学成网user_06.png" style="display:block;">
</div>

四、溢出的文字省略号显示

1、white-space

（1）white-space:normal; 当文字在一行内显示不开时，自动换行
（2）white-space:nowrap; 强制在同一行内显示所有文本，直到文本结束或遇到
标签对象才换行。

2、text-overflow 文字溢出

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

3、总结三部曲

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

五、css精灵技术（重要、常用）

1、为什么需要精灵技术？

为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。

2、精灵技术讲解：

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。

3、 精灵技术实施

（1）精确测量所需背景小图的大小
（2）将背景大图设为盒子的背景图片
（3）设置background-position为小图的x，y坐标

六、滑动门技术

1、什么是滑动门技术？

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。

2、核心技术：

核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。
（1）一般的经典布局都是这样的：

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

（2）css样式：
1） a 设置 背景左侧，padding撑开合适宽度。
2）span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
3） 之所以a包含span就是因为 整个导航都是可以点击的。
4） 因为是滑动门，左右推拉，跟文字内容多少有关系，此时需要用文字撑开盒子，就要用到行内块。

七、拓展

1、margin负值：

（1）负边距+定位：水平垂直居中
咱们前面讲过， 一个绝对定位的盒子， 利用 父级盒子的 50%， 然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。
（2）压住盒子相邻边框：margin-left: -1px; 和 margin-top: -1px;
注：
1）盒子要浮动才能紧挨在一起
2）鼠标经过，想要改变颜色，突出效果是，会发现边框有被压住
解决方法：1、要让鼠标经过的盒子div升到最高处就可以
2、定位的盒子是最高层的
3、只能用相对定位，因为需要保留盒子位置

【例】

.margin:hover {
	border: #0000EE 1px solid;
	position: relative;	
	}

3）如果盒子都已经是相对定位了，用z-index来实现层级关系，突出显示。

【例】

.margin:hover {
	border: #0000EE 1px solid;
	z-index:1;
	}

2、css三角形

实施步骤：
（1）我们用css 边框可以模拟三角效果
【2】 宽度高度为0： width: 0; height: 0;
（3）我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
（4）为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;