1 .显示和隐藏元素的目的
从页面上擦除或显示一个元素
场景
像网站广告一样，点击关闭后会消失，但重新刷新页面后会再次显示！
1.1显示显示(重点)显示设置或搜索对象的有无和显示方法。
display: none隐藏对象display:block除了可以转换为块级元素外，还可以显示元素。 特征：隐藏后不再保持位置。
实际开发场景：
配合后面的js制作特效，如下拉菜单，原本没有，鼠标经过，显示下拉菜单，应用极为广泛
1.2设置或搜索是否显示可见性(确定)对象。
可视：可视； 可见性：隐藏； 对象隐藏特征：隐藏后继续保持原始位置。 ((停职津贴) ) ) )。
1.3当溢出(重点)对象的内容超过指定的高度和宽度时，搜索或设置如何管理内容。
属性值说明visible不剪切内容，不添加滚动条，hidden不显示超过对象大小的，超过的部分隐藏http://www.Sina.com 滚动条不能修改样式) 3389； ) ) )
实际开发场景：
清除浮动
隐藏或隐藏超过内容，不允许内容超过母箱。
1.4用于区分隐藏总结属性scroll显示隐藏对象，与后面的js进行特效而不保留位置。 例如，下拉菜单原本没有，但鼠标经过，显示下拉菜单，应用非常广泛的auto隐藏对象，保留位置使用较少的http://ww.Sina.Sina.com
鼠标经过时间：
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title document/title style.box { position : relative； width: 222px； height: 220px； margin : 100 px自动； (/)1.原本箱子里有黑色半透明的箱子，最初看不见的隐藏(/.mask ) display:none； 位置： absolute； top: 0； left: 0； width: 222px； height: 220px； 背景3360 rgba (0，0，0，3) URL ) images/ARR.png ) no-repeat center中心； (/)2.我们的鼠标经过时，会显示a中这个黑色半透明的箱子。 (/.boxa:hover.mask ) display:block； }/style/headbodydivclass=' box ' a href=' # ' divclass=' mask '/div img src=' images/3.jpg ' alt=' '/a/div
2. CSS用户界面样式所谓的界面样式是指更改用户交互样式，以提高用户体验。
更改用户的鼠标样式(滚动条兼容性非常差，因此不考虑)。
表单轮廓等。
防止拖动表单域
2.1鼠标样式设置或搜索在cursor对象上移动的鼠标指针将采用什么样的预定义光标形状。
属性值说明display集中星月默认visibility支票overflow移动default文本http://www
ul li style='cursor:default '我专注的星月/li li style='cursor:pointer '我是小手/li li style='cursor:move '我是桃子
lt;/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轮廓线表单默认outlineoutline 轮廓线，我们一般直接去掉，border是边框，我们会经常用防止拖拽主要针对文本域resize防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none3. 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-spacewhite-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 是不需要这个技术的。
精确测量，每个小背景图片的大小和 位置。
给盒子指定小背景图片时， 背景定位基本都是 负值。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>体会css精灵技术</title><style>.icon1 {width: 23px;height: 23px;background: url(images/index.png) no-repeat 0 -107px;/*background-position: 0 -107px;*/}.icon2 {width: 23px;height: 23px;/*index,png向上移动157,向左一移动107，方向与正向相反，为负数*/background: url(images/index.png) no-repeat -157px -107px;margin: 100px;}</style></head><body><div class="icon1"></div><div class="icon2"></div></body></html> 5.4 制作精灵图(了解)CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。
大部分情况下，精灵图都是网页美工做。
我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。我们可以横向摆放也可以纵向摆放，但是每个图片之间留有适当的空隙在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。结束语： 小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。 如果是背景图片比较多，可以建议使用精灵技术。
6. 滑动门先来体会下现实中的滑动门,或者你可以叫做推拉门：
滑动门出现的背景
制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。
http://weixin.qq.com/
核心技术核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。
一般的经典布局都是这样的：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>/*1. a 是 设置 左侧 背景 （左门）*/a { /*因为我们是滑动门，左右推拉 跟文字内容多少有关系，此时需要用文字撑开盒子， 就要用到行内块*/display: inline-block;height: 33px;background: url(images/to.png) no-repeat;margin: 100px;padding-left: 15px;color: #fff;line-height: 33px;text-decoration: none;}/*2. span 是设置 右侧 背景 （右门）*/a span {display: inline-block;height: 33px;/*一定注意 span 需要背景图片 右对齐*/background: url(images/to.png) no-repeat right top;padding-right: 15px;}/*3 因为整个导航栏都是 链接 所以 a 要包含 span */</style></head><body><a rel="external nofollow" rel="external nofollow" href="#"><span>首页</span></a><a rel="external nofollow" rel="external nofollow" href="#"><span>公司新闻</span></a></body></html>总结：
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;