ps

今天这是html和css初级部分的最后一份文章了，下次发的就是HTML5和CSS3的一些基础知识。越学到后面，感觉越有意思。到后面可以自己去尝试做一些比较炫酷的动画了，还是蛮期待的。

CSS高级技巧

目标

理解
- 能说出元素显示隐藏最常见的写法
- 能说出精灵图产生的目的
- 能说出去除图片底侧空白缝隙的方法
应用
- 能写出最常见的鼠标样式
- 能使用精灵图技术
- 能用滑动门做导航栏案例

1. 元素的显示与隐藏

目的

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

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

1.1 display 显示（重点）

display 设置或检索对象是否及如何显示。

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

特点：隐藏之后，不再保留位置。

实际开发场景：

配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛

1.2 visibility 可见性 (了解)

设置或检索是否显示对象。

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

特点：隐藏之后，继续保留原有位置。（停职留薪）

1.3 overflow 溢出(重点)

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

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

实际开发场景：

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

1.4 显示与隐藏总结

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

2. CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
- 更改用户的鼠标样式 (滚动条因为兼容性非常差，我们不研究)
- 表单轮廓等。
- 防止表单域拖拽

2.1 鼠标样式cursor

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

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

鼠标放我身上查看效果哦：

<ul><li style="cursor:default">我是小白</li><li style="cursor:pointer">我是小手</li><li style="cursor:move">我是移动</li><li style="cursor:text">我是文本</li><li style="cursor:not-allowed">我是文本</li>
</ul>

2.2 轮廓线 outline

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

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

但是我们都不关心可以设置多少，我们平时都是去掉的。 li

最直接的写法是： outline: 0; 或者 outline: none;

 <input  type="text"  style="outline: 0;"/>

2.3 防止拖拽文本域resize

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

<textarea  style="resize: none;"></textarea>

2.4 用户界面样式总结

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

3. vertical-align 垂直对齐

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

但是我们从来没有讲过有垂直居中的属性。

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

vertical-align : baseline |top |middle |bottom

设置或检索对象内容的垂直对其方式。

注意：

vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，

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

3.1 图片、表单和文字对齐

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

3.2 去除图片底侧空白缝隙

原因：

图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。

就是图片底侧会有一个空白缝隙。
解决的方法就是：
- 给img vertical-align:middle | top| bottom等等。让图片不要和基线对齐。
- 给img 添加 display：block; 转换为块级元素就不会存在问题了。

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

4.1 white-space

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

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

4.2 text-overflow 文字溢出

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

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

注意：

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

4.3 总结三步曲

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

5. CSS精灵技术（sprite) 重点

5.1 为什么需要精灵技术

图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。

pink老师告诉你我们为什么需要精灵技术：

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

出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

5.2 精灵技术讲解

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

这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。

我们需要使用CSS的

background-image、
background-repeat
background-position属性进行背景定位，
其中最关键的是使用background-position 属性精确地定位。

5.3 精灵技术使用的核心总结

首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。

精确测量，每个小背景图片的大小和位置。
给盒子指定小背景图片时，背景定位基本都是负值。

5.4 制作精灵图(了解)

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。

大部分情况下，精灵图都是网页美工做。

我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
我们可以横向摆放也可以纵向摆放，但是每个图片之间留有适当的空隙
在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。

结束语：小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。如果是背景图片比较多，可以建议使用精灵技术。

6. 滑动门

先来体会下现实中的滑动门,或者你可以叫做推拉门：

滑动门出现的背景

制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。

http://weixin.qq.com/

核心技术

核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局都是这样的：

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

css样式

* {padding:0;margin:0;}body{background: url(images/wx.jpg) repeat-x;}.father {padding-top:20px;}li {padding-left: 16px;height: 33px;float: left;line-height: 33px;margin:0  10px;background: url(./images/to.png) no-repeat left ;}a {padding-right: 16px;height: 33px;display: inline-block;color:#fff;background: url(./images/to.png) no-repeat right ;text-decoration: none;}li:hover,li:hover a {background-image:url(./images/ao.png);}

总结：

a 设置背景左侧，padding撑开合适宽度。
span 设置背景右侧， padding撑开合适宽度剩下由文字继续撑开宽度。
之所以a包含span就是因为整个导航都是可以点击的。

7. 拓展@

7.1 margin负值之美

1). 负边距+定位：水平垂直居中

咱们前面讲过，一个绝对定位的盒子，利用父级盒子的 50%，然后往左(上) 走自己宽度的一半，可以实现盒子水平垂直居中。

2). 压住盒子相邻边框

7.2 CSS三角形之美

 div {width: 0; height: 0;line-height:0；font-size: 0;border-top: 10px solid red;border-right: 10px solid green;border-bottom: 10px solid blue;border-left: 10px solid #000; }

一张图，你就知道 css 三角是怎么来的了, 做法如下：

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

讲在后面的一些话

：这里面是我自己自学的一些课件，上传的主要目的是有两点，第一是给刚入门的兄弟们分享一下，这些比较基础的东西，因为前端这里有很多标签之类的，比较容易忘，所以给大家提供查询下；第二因为自己也是刚开始学这块，有时候一些比较基础的东西时间久了也记不住，也不想去翻文件慢慢找，索性就传到博客上来，以后自己查的时候也方便。其中有些案例和素材，我都有，如果有需要的话，可以留言，我看到的话可以发给你。总而言之，学无止境，每天坚持学下去，总有一天可以成为大佬的，加油！

CSS第六天-高级技巧（元素隐藏、精灵图、CSS用户界面样式、margi负值作用、CSS三角形）相关推荐

小白css基础学习记之精灵图
CSS精灵技术一个网页中往往会应用很多小的背景图像作为装饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这样将大大降低页面的加载速度. 因此,为了有效的减少服 ...
css补充（1）：css实现小三角，精灵图，字体图标
文章目录一.css实现小三角 1.1 三角形实现二.精灵图的使用三.字体图标一.css实现小三角 1.1 三角形实现 html: <div class="sanjiao&quo ...
css中实现元素隐藏的几种方法
1.display:none; display翻译成中文是显示.展览的意思:将display的属性改为none可以实现元素的隐藏,元素和盒子模型也不生成,被隐藏的元素不占位置,看不见摸不着,它会导致浏 ...
CSS中的元素隐藏方式
前段时间,在写一个注册框时,先将该注册框隐藏,当点击按钮后显示.谁知隐藏后会遮挡住其他按钮,使其失效.后来查找资料,才发现是因为我选择隐藏方式的问题.该注册框隐藏后,仍然占有内存,点击时,可以运行. ...
CSS学习笔记七---定位精灵图
一:知识点 1:定位属性用法总结 2:绝对定位---参照物是浏览器的第一屏 a:没有父盒子,或者父盒子没有定位相对于浏览器左上角位置来定位 b:父盒子有定位相对于父盒子来定位,子绝父相以下为注: ...
CSS实现某元素hover时所有兄弟节点样式改变
2019独角兽企业重金招聘Python工程师标准>>> css 提供的兄弟节点选择器有两种第一种:+ 相邻兄弟选择器( li + li )只能选择与自己紧紧相连的身后的一个兄弟, ...
html中伪类的兼容性,css,ie8兼容性_CSS 伪类在IE8中样式无法生效，css,ie8兼容性,伪类 - phpStudy...
CSS 伪类在IE8中样式无法生效写了一个纯CSS的竖版流程样式,效果如下起始 1 2 结束使用:before生成左侧圆,首尾两头的li用:after生成竖条,其余都用border-left填补 ...
html css背景图片精灵技术,HTML入门学习笔记--CSS背景和精灵图(5)
33-背景色彩 1.如何设置标签的背景色彩? 在CSS中有1个background-color:属性, 就是专门用来设置标签的背景色彩的取值: 具体单词 rgb rgba 106进制快捷键: bc ...
css 选父元素,CSS中模拟父元素选择器
很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...

CSS第六天-高级技巧（元素隐藏、精灵图、CSS用户界面样式、margi负值作用、CSS三角形）

ps