css高级技巧
-
- 1 元素隐藏与显示
-
- 1.1 display: none (重点)
- 1.2 visibility可见性 (了解)
- 1.3 overflow 溢出(重点)
- 1.4 显示与隐藏总结
- 1.5 案例:仿b站播放
- 2 CSS用户界面样式
-
- 2.1 鼠标样式cursor
- 2.2 轮廓 outline
- 2.3 防止拖拽文本域resize
- 3 vertical-align 垂直对齐
-
- 3.1 图片表单和文字对齐
- 3.2 去除图片底侧空白缝隙
- 4 溢出文字省略号显示
- 5 精灵技术
-
- 5.1 为什么要学习精灵技术
- 5.2使用精灵技术
- 6 margin负值之美
-
- 6.1 负边距+定位:水平垂直居中
- 6.2 压住盒子相邻边框
- 6.3 压住盒子相邻边框,并且浮动的盒子共用一条边框
1 元素隐藏与显示 1.1 display: none (重点)
display: none 元素隐藏 (隐藏之后不保留原来位置)特点:隐藏之后不再保留位置
display: block 除了转化为块级元素外,还有显示元素的意思
1.2 visibility可见性 (了解)
visibility: visible; 对象可见1.3 overflow 溢出(重点)
visibility: hidden; 对象隐藏 (隐藏之后继续保留原来位置)
可能的值
- visible 默认值。内容不会被修剪,会呈现在元素框之外。
- hidden 内容会被修剪,并且其余内容是不可见的。
- scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。不管内容超不超出都出滚动条(太丑了,一般不用)
- auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。(太丑了,一般不用)
文章图片
1.5 案例:仿b站播放
当鼠标悬浮出现阴影和播放按钮
文章图片
鼠标悬浮后
文章图片
思路:原来盒子里面装有一个黑色半透明盒子,刚开始看不见,当鼠标经过时,这个黑色半透明盒子就显示出来。
可以将有播放按钮的盒子作为子盒子,没有播放按钮的作为父盒子,用“父绝子相”定位,然后把子盒子隐藏。等鼠标悬浮父盒子时显示
"text/css">
/*原来盒子里面装有一个黑色半透明盒子,刚开始看不见,当鼠标经过时,这个黑色半透明盒子就显示出来*/
.box {
height: 177px;
width: 307px;
margin: 100px auto;
position: relative;
}
.mask {
height: 177px;
width: 307px;
background: rgba(0, 0, 0, 0.3) url("img/bo.png") no-repeat bottom right;
position: absolute;
top: 0;
left: 0;
display: none;
}/*鼠标经过的时候 a里面的黑色半透明盒子就显示出来了*/
.box a:hover .mask{
display: block;
}
2 CSS用户界面样式 所谓的界面样式, 就是更改一些用户操作样式, 比如
- 更改用户的鼠标样式(滚动条由于兼容性太差不研究)
- 表单轮廓等
- 防止表单域拖拽
cursor : default 小白 | pointer 小手 | move 移动 | text 文本 | not-allowed 禁止
不同li有不同的鼠标样式
- 默认的
- 默认的
- 默认的
- 默认的
- 默认的
2.2 轮廓 outline
是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
但是我们都不关心可以设置多少,我们平时都是去掉的。
最直接的写法是 : outline: 0; 或者 outline: none;
2.3 防止拖拽文本域resize
resize:none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。
默认右下角可以拖拽
3 vertical-align 垂直对齐 3.1 图片表单和文字对齐
让带有宽度的块级元素居中对齐,是margin: 0 auto;
让文字居中对齐,是 text-align: center;
让文字垂直居中 ,是 line-height: height;
vertical-align 不影响块级元素中的内容对齐,它只针对于 行内元素或者行内块元素,特别是行内块元素, 通常用来控制图片/表单与文字的对齐。
?
文章图片
文章图片
你要多读书
文章图片
你要多读书
文章图片
你要多读书
.one {
/*默认基线对其*/
vertical-align: baseline;
}.two {
/*居中对齐*/
vertical-align: middle;
}.three {
/*让图片的顶线对其文字的顶线*/
vertical-align: top;
}
文章图片
所以我们知道,我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。
3.2 去除图片底侧空白缝隙
有个很重要特性你要记住: 图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐。这样会造成一个问题,就是图片底侧会有一个空白缝隙。
文章图片
解决的方法就是:
- 给img vertical-align:middle | top等等。 让图片不要和基线对齐。 给img 添加
- display:block; 转换为块级元素就不会存在问题了。
/*强制一行显示*/
white-space: nowrap;
/*超出部分隐藏*/
overflow: hidden;
/*省略号提到超出隐藏部分*/
text-overflow: ellipsis;
文章图片
Title - 锐客网
type="text/css">
div {
width: 150px;
height: 25px;
border: 1px solid pink;
/*强制一行显示*/
white-space: nowrap;
/*超出部分隐藏*/
overflow: hidden;
/*省略号提到超出隐藏部分*/
text-overflow: ellipsis;
}
hi,来自星星的你,欢迎你登录京东
5 精灵技术 5.1 为什么要学习精灵技术
当一个用户访问一个网站时,需要网页向服务器发送请求,网页上的每张图片都要经过一次请求才能展现给用户。
然而,一个网页中往往会应用很多小的背景图当做修饰,当网页中图像过多时,服务器就会频繁的接受和发送请求,这将大大降低页面的加载速度。
为了有效减少服务器接受和发送请求的次数,提高页面加载速度,css精灵技术出现了。
精灵技术其实是将页面中的一些背景图整合到一张大图中,然而,各个网页元素通常只需要精灵图中不同位置的么某个小图,要精确定位到精灵图中的每个小图。就需要使用CSS的
background-image、background-repeat
和 background-position
属性进行背景定位在这里插入图片描述
文章图片
文章图片
5.2使用精灵技术
Title - 锐客网
type="text/css">
.icon1 {
height: 43px;
width: 36px;
background: url("img/index.png") no-repeat 0 -192px;
}
背景图片很少的情况,没有必要使用精灵技术,维护成本太高。 如果是背景图片比较多,可以建议使用精灵技术。
6 margin负值之美 6.1 负边距+定位:水平垂直居中
原理:一个绝对定位的盒子, 利用 父级盒子的 50%, 然后 往左(上) 走 自己宽度的一半 ,可以实现盒子水平垂直居中
文章图片
6.2 压住盒子相邻边框
原理:在盒子float浮动的同时,加上margin-left: -1px; 可以压住盒子相邻的边框。
文章图片
下面代码顺利解决
div {
height: 400px;
width: 400px;
border: 1px solid pink;
float: left;
margin-left: -1px;
margin-top: -1px;
}
margin-left: -1px; 最左边第一个盒子左移1px,由于浮动具有紧凑收缩的效果,后面的盒子会依次左移1px, 然后各自的margin再左移1px ,压住重复边框6.3 压住盒子相邻边框,并且浮动的盒子共用一条边框
【前端|css高级技巧】原理:基于6.2,再在鼠标经过时候的盒子层级提升到最高级
文章图片
div {
height: 400px;
width: 400px;
border: 1px solid #ccc;
float: left;
margin-left: -1px;
margin-top: -1px;
}
div:hover {
border: 1px solid #f40;
position: relative;
}
推荐阅读
- #|HTML5新特性
- 实现一个博客系统----基于前后端分离
- 前端|小程序内部引导关注公众号实现方法
- 前端|微信小程序如何实现转发/分享功能
- 对html中的图片进行深度实践,一个简单到爆的知识点,到底要不要看()
- vue|vue系列(三)——手把手教你搭建一个vue3管理后台基础模板
- 前端|Vue技能树使用情况测评及建议
- 程序人生|万木成林,我种了“Vue技能树”
- tomcat|ajax跨域的几种解决方案