css样式表/层叠样式表（7）

元素的隐藏与显示
- （1）dispaly显示
- （2）visibility可见性
- （3）overflow溢出
css用户界面样式
- 鼠标样式cursor
- 轮廓线outline
- 防止拖拽文本域resize
vertical-align垂直对齐
- 图片、表单和文字对齐
- 去除图片底侧空白缝隙
溢出的文字省略号显示
- white-space
- text-overflow 文字溢出
css精灵技术（sprite）
滑动门
margin负值
过渡
获得焦点元素

元素的隐藏与显示

（1）dispaly显示

设置或检索对象是否及如何显示
display: none 隐藏对象

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

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

（2）visibility可见性

设置或检索是否显示对象
visibility：visible ;　对象可视

visibility：hidden;　对象隐藏

特点
隐藏之后，继续保留原有位置

（3）overflow溢出

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

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

css用户界面样式

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

鼠标样式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>

轮廓线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

通常用来控制图片/表单与文字的对齐

图片、表单和文字对齐

默认的图片会和文字基线对齐

去除图片底侧空白缝隙

原因
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐
就是图片底侧会有一个空白缝隙

解决
• 给img vertical-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
transition	简写属性，用于在一个属性中设置四个过渡属性	3
transition-property	规定应用过渡的 CSS 属性的名称	3
transition-duration	定义过渡效果花费的时间，默认是 0	3
transition-timing-function	规定过渡效果的时间曲线，默认是 “ease”	3
transition-delay	规定过渡效果何时开始，默认是 0	3

属性
属性就是你想要变化的 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负值相关推荐

CSS常用技巧（元素显示隐藏、用户界面样式、垂直对齐、溢出文字省略号显示、精灵技术、滑动门、margin负值之美和css三角之美）
CSS常用技巧 CSS常用技巧(元素显示隐藏.用户界面样式.垂直对齐.溢出文字省略号显示.精灵技术.滑动门.margin负值之美和css三角之美) 1.元素显示隐藏 1.1display 显示(重点) ...
多行溢出文字省略号显示（HTML、CSS）
多行溢出文字省略号显示(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta cha ...
单行溢出文字省略号显示（HTML、CSS）
单行溢出文字省略号显示(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta cha ...
CSS第六天-高级技巧（元素隐藏、精灵图、CSS用户界面样式、margi负值作用、CSS三角形）
ps 今天这是html和css初级部分的最后一份文章了,下次发的就是HTML5和CSS3的一些基础知识.越学到后面,感觉越有意思.到后面可以自己去尝试做一些比较炫酷的动画了,还是蛮期待的. CSS高级 ...
web前端入门学习 css（7）css高级技巧（精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录精灵图为什么需要精灵图? 精灵图的使用精灵图课堂案例用精灵图拼出自己的名字字体图标字体图标的下载字体图标的引入字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
【web前端】CSS高级技巧（精灵图，字体图标，CSS三角，CSS用户界面样式，文字与图片垂直对齐，溢出的文字省略号显示，常见布局技巧，CSS初始化）
使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...
CSS基础(part18)--溢出的文字省略号显示
学习笔记,仅供参考,有错必纠参考自:pink老师课堂笔记文章目录溢出的文字省略号显示 white-space text-overflow 溢出的文字省略号显示三部曲举个例子溢出的文字省略号显 ...
十、CSS三行代码实现溢出的文字省略号显示（white-space: nowrap;overflow: hidden;text-overflow: ellipsis;）
4. 溢出的文字省略号显示 4.1 white-space white-space设置或检索对象内文本显示方式.通常我们使用于强制一行显示内容 white-space:normal :默认处理方式wh ...
html不换行溢出省略号代替,css控制不溢出,不换行,溢出部分省略号显示
css控制不溢出,不换行,溢出部分省略号显示:white-space:nowrap;text-overflow:ellipsis;overflow:hidden; ext-overflow 取值: c ...

前端笔记（9）元素的隐藏与显示，css用户界面样式，vertical-align垂直对齐，溢出文字省略号显示，css精灵技术，过渡，焦点，滑动门，margin负值