css样式表/层叠样式表（7）
元素的隐藏与显示（1）dispaly显示（2）visibility可见性（3）overflow溢出css用户界面样式鼠标样式cursor轮廓线outline防止拖拽文本域resizevertical-align垂直对齐图片、表单和文字对齐去除图片底侧空白缝隙溢出的文字省略号显示white-spacetext-overflow 文字溢出css精灵技术（sprite）滑动门margin负值过渡获得焦点元素元素的隐藏与显示
（1）dispaly显示
设置或检索对象是否及如何显示
display: none隐藏对象
display：block除了转换为块级元素之外，同时还有显示元素的意思
特点
隐藏之后，不再保留位置
（2）visibility可见性
设置或检索是否显示对象
visibility：visible ;对象可视
visibility：hidden;对象隐藏
特点
隐藏之后，继续保留原有位置
（3）overflow溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容
css用户界面样式
• 更改用户的鼠标样式 (滚动条因为兼容性非常差，我们不研究)
• 表单轮廓等
• 防止表单域拖拽
鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
<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>
轮廓线outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
outline : outline-color ||outline-style || outline-width
取消轮廓线
outline: 0;或者outline: none;
防止拖拽文本域resize
<textarea style="resize: none;"></textarea>
vertical-align垂直对齐
• 有宽度的块级元素居中对齐，是margin: 0 auto;
• 让文字居中对齐，是text-align: center;
它只针对于行内元素或者行内块元素
vertical-align : baseline |top |middle |bottom
通常用来控制图片/表单与文字的对齐
图片、表单和文字对齐
默认的图片会和文字基线对齐
去除图片底侧空白缝隙
原因
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐
就是图片底侧会有一个空白缝隙
解决
• 给imgvertical-align:middle | top| bottom等等； 让图片不要和基线对齐
• 给img 添加display：block;转换为块级元素就不会存在问题了
溢出的文字省略号显示
white-space
设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
white-space:normal ；默认处理方式white-space:nowrap ；强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行
text-overflow 文字溢出
设置或检索是否使用一个省略标记（…）标示对象内文本的溢出
text-overflow : clip ；不显示省略标记（...），而是简单的裁切text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）
css精灵技术（sprite）
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图
•background-image
•background-repeat
•background-position属性进行背景定位
• 其中最关键的是使用background-position属性精确地定位
css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。
精确测量，每个小背景图片的大小和 位置
给盒子指定小背景图片时， 背景定位基本都是负值
div{background:url(../images/abcd.jpg)no-repeat;float:left;}.h{width:101px;height:106px;background-position:-220px-141px;}.z{width:115px;height:97px;background-position:-485px-560px;}
png格式为透明背景 72px为网页显示像素
滑动门
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术
核心技术
利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏
总结
1.a设置 背景左侧，padding撑开合适宽度
2.span设置背景右侧，padding撑开合适宽度 剩下由文字继续撑开宽度
3. 之所以a包含span就是因为 整个导航都是可以点击的
<body><div class="nav"><ul><li><a href="#"><span>首页</span></a></li><li><a href="#"><span>帮助与反馈</span></a></li><li><a href="#"><span>公众平台</span></a></li><li><a href="#"><span>开发平台</span></a></li></ul></div></body>
* {padding: 0;margin: 0;}li {list-style: none;margin: 5px;float: left;}li a {text-decoration: none;font-size: 14px;color: #fff;line-height: 33px;}body {background: url(../images/wx.jpg) repeat-x;}.nav {margin-top: 20px;}.nav a {display: inline-block;height: 33px;background: url(../images/to.png) no-repeat;padding-left: 15px;}.nav a span {display: inline-block;height: 33px;background: url(../images/to.png) no-repeat top right;padding-right: 15px;}.nav a:hover {background-image: url(../images/ao.png);}.nav a:hover span {background-image: url(../images/ao.png);}
margin负值
负边距+定位：水平垂直居中
压住盒子相邻边框
margin-left:-1px;margin-top:-1px;
使用div盒子鼠标经过样式会出现问题
div:hover {border:1px solid #f40;}
使用相对定位-保留位置
div:hover {border:1px solid #f40;position: relative;}
如果已经存在相对定位，使用z-index: 1
CSS三角形
width:0;height:0;border-top: 10px solid red;border-right: 10px solid green;border-bottom: 10px solid blue;border-left: 10px solid pink;
我们用css 边框可以模拟三角效果宽度高度为0我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为transparent透明就好了为了照顾兼容性 低版本的浏览器，加上font-size: 0;line-height: 0;
过渡
过渡（transition)
是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果
过渡动画：是从一个状态 渐渐的过渡到另外一个状态
经常和:hover一起 搭配使用
语法格式:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
属性
属性就是你想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以
如果想要所有的属性都变化过渡， 写一个all就可以
花费时间
transition-duration花费时间 单位是 秒（必须写单位） s ms 比如 0.5s 这个s单位必须写 ms 毫秒
运动曲线
默认是ease
何时开始
默认是0s鼠标触发就立即开始 可以设置 延迟触发时间
div {width: 200px;height: 100px;background-color: pink;/* transition: 要过渡的属性 花费时间 运动曲线 何时开始; *//*如果有多组属性，使用逗号隔开*/transition: width 0.6s ease 0s, height 0.3s ease-in 1s;/* transtion 过渡的意思 这句话写到div里面而不是 hover里面 */}div:hover {/* 鼠标经过盒子，我们的宽度变为400 */width: 600px;height: 300px}transition: all 0.6s; /* 所有属性都变化用all 就可以了 后面俩个属性可以省略 */
获得焦点元素
:focus伪类 选择器用于选取获得焦点的元素。 我们这里主要针对的是表单元素
:hover
语法：
.total input {border: 1px solid #ccc;height: 30px;width: 40px;transition: all .5s;}/*这个input 获得了焦点*/.total input:focus {width: 80px;border: 1px solid skyblue;}
前端笔记（9）元素的隐藏与显示 css用户界面样式 vertical-align垂直对齐 溢出文字省略号显示 css精灵技术 过渡 焦点 滑动门 margin负值
