CSS高级技巧

一、初步认知:

说出元素显示隐藏最常见的写法
说出精灵图的产生目的
说出去除图片底测空白缝隙的方法

元素显示隐藏最常见的写法（9种思路）：

display

对于元素显隐来说，最常见就是display:none | display:block，但是使用这种方法有个问题，元素的display属性在隐藏前并不都是block，还有可能是inline、inline-block等

[注意]如果要适用于任何元素需要提前储存元素的display值

visibility

visibility:hidden与display:none作为隐藏元素的两种方式，常常被人们拿来比较。其实区别很简单，前者不脱离文档流，保留隐藏之前元素占据的物理区域；而后者则脱离文档流，如果重新显示则需要页面的重新绘制。还有一点区别却很少人提到，如果父级设置display:none;子级设置display:block也不会显示；而如果父级设置visibility:hidden;子级设置visibility:visible时子级会显示出来

[注意]visilibity可应用transition属性。因为visibility是离散步骤，在0到1数字范围之内，0表示隐藏，1表示显示。visibility:hidden可以看成visibility:0；visibility:visible可以看成visibility:1。于是，visibility应用transition等同于0~1之间的过渡效果。实际上，只要visibility的值大于0就是显示的。由于这个现象，我们可以利用transition实现元素的延时显示隐藏

hidden

可能有些人不太熟悉，HTML有个hidden全局属性，专门用于显示隐藏元素，与display:none的作用类似，元素隐藏时脱离文档流，无法接受javascript事件

[注意]IE10-不支持test.hidden='hidden’写法，只支持test.setAttribute(‘hidden’,‘hidden’)写法

opacity

对于元素显隐，opacity的使用频率也挺多。opacity的好处是，即使opacity为0的元素，仍然可以接受javascript事件，这是display:none和visiblity:hidden所不具备的。

overflow

CSS中有一个属性是overflow，overflow:hidden代表着溢出隐藏。我们可以利用父级的overflow:hidden配合父级的height:0或width:0来实现元素的显隐

[注意]当设置overflow的元素在绝对定位元素和其包含块之间的时候，overflow属性会失效

clip

CSS裁剪clip这个属性平时用的不多，当clip:rect(top,right,bottom,left)中的top>=bottom，或者left>=right时，可实现元素的隐藏效果，效果类似于visibility:hidden

扫描二维码关注公众号，回复： 12904779 查看本文章

[注意]clip属性只能应用在绝对定位元素上

transform

CSS变形transform是一些效果的集合，主要是移动、旋转、缩放和倾斜这四种基本操作，还可以通过设置matrix矩阵来实现更复杂的效果。通过不同的变形函数可以实现元素显隐效果

[注意]IE9-浏览器不支持，safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前缀

覆盖

利用定位元素可以覆盖普通流元素的特性。为元素的before伪元素设置相同的尺寸，通过控制伪元素的定位属性，实现显隐效果

偏移

元素显示隐藏的另一种常见思路是偏移，将元素移动到视窗范围外，也可以实现等价的显隐效果

精灵图的产生目的

1、精灵图技术产生的目的：很多大型网页在首次加载的时候都需要加载很多的小图片，而考虑到在同一时间，服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。

2、精灵图技术的本质：所谓精灵图就是把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。

去除图片底测空白缝隙的方法

1.display:block; 转换为块级元素

2.vertical-align:top;middle; 因为默认是baseline（ div内的img 和 div 的基线对齐），所以会有缝隙

二、元素的显示与隐藏

目的：

让一个元素在页面中消失或者显示出来
场景：

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

2.1display显示（重点）

display 设置或检索对象是否及如何显示
特点：隐藏之后，不再保留位置

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

2.2visibility 可见性 (了解)

设置或检索是否显示对象
特点：隐藏之后，继续保留原有位置

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

2.3overflow 溢出(重点)

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容

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

实际运用场景：

清除浮动
隐藏超出内容，隐藏掉, 不允许内容超过父盒子。

2.4CSS显示与隐藏总结

属性	区别	用途
display	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛
visibility	隐藏对象，保留位置	使用较少
overflow	只是隐藏超出大小的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

三、CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验

更改用户的鼠标样式 (滚动条因为兼容性非常差，我们不研究)
表单轮廓等。
防止表单域拖拽

3.1鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

3.2轮廓线 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

outline : outline-color ||outline-style || outline-width

但是我们都不关心可以设置多少，我们平时都是去掉的。 li
最直接的写法是： outline: 0; 或者 outline: none;

3.3 用户界面样式总结

属性	用途	用途
鼠标样式	更改鼠标样式cursor	样式很多，重点记住 pointer
轮廓线	表单默认outline	outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用
防止拖拽	主要针对文本域resize	防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none

四、 vertical-align 垂直对齐

有宽度的块级元素水平居中对齐，是margin: 0 auto;
让元素中的文字居中对齐，是 text-align: center;

vertical-align 垂直对齐，它只针对于行内元素或者行内块元素，

vertical-align : baseline |top |middle |bottom

注意：
vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，
特别是行内块元素， 通常用来控制图片/表单与文字的对齐

图片、表单和文字对齐

所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。默认的图片会和文字基线
对齐。

模式	单词
基线对齐：默认的是文字和图片基线对齐	vertical-align:baseline;
垂直居中：默认的是文字和图片基线对齐	vertical-align:middle;
顶部对齐：默认的是文字和图片基线对齐	vertical-align:top;

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

5.1 white-space

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

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

5.2text-overflow 文字溢出

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

text-overflow : clip ；不显示省略标记（…），而是简单的裁切
text-overflow：ellipsis ；当对象内文本溢出时显示省略标记（…）

注意：

      一定要首先强制一行内显示，再次和overflow属性 搭配使用

CSS的高级技巧