学习:CSS(7)[元素的显示与隐藏+精灵图]

本文基于学习b站上的黑马程序员,pink老师的前端入门教程学习,进行的总结

一.元素的显示与隐藏

1.本质

让一个元素在页面中隐藏或者显示出来

2.display属性

display-none:隐藏对象,内容隐藏了,位置也没有了

display-block:除了块级元素的意思,同时还有显示元素的意思

3.visibility属性(可见性)

visibility:visible;元素可见

visibility:hidden;元素隐藏,还占有原来的位置

4.overflow溢出

overflow:visible;溢出的部分可见

overflow:hidden;溢出的部分隐藏

overflow:stroll;滚动条显示,不溢出也显示滚动条

overflow:auto;在需要的时候添加滚动条,不溢出不显示滚动条

!定位的盒子慎用隐藏

二.精灵图(sprites)

1.目的

有效的减少服务器接收和发送请求的次数,提高页面的加载速度

2.精灵图的使用

使用background-position,移动目标图片的x和y坐标

要求测量的时候精准测量(一般情况下位置都是负值)

三.字体图标(icinfont)

1.展示的是图标,本质属于字体

2.优点

1. 轻量级:一个图标字体要比一系列的图像药效,减少了服务器的请求
2. 灵活性:本质是文字,可以随意改变颜色,产生阴影,透明效果,旋转
3. 兼容性:几乎支持所有的浏览器
4. 不能代替精灵图

3.使用方法

a.字体图标的下载

推荐网站

• icomoon字库,网址:http://icomoon.io
• 阿里iconfont字库,网址:http://www.iconfont.cn/

b.字体图标的引入

1. 把下载包里的fonts文件夹放入页面同一个根目录下
2. 在CSS样式中全局声明字体(在文件夹中的.CSS文件中复制复制到block)
3.  在html文件中中找到需要写入的文字图标,然后复制小框框
4. 给标签指定一个字体(全局声明字体的第一句),一般是:font-family:'iconmoon'

c.字体图标的追加

在网站上把压缩包里的selection.json重新上传

四.CSS的三角制作

1.方法

1. 盒子的宽高必须为0
2. 指定一个透明的边框
3. 给四个边框指定颜色,每个边框都是一个三角形

五.CSS用户界面样式 

1.更改用户的鼠标样式

a.鼠标样式:cursor

b.相关属性值

 2.表单的轮廓线

a.去除表单轮廓线

b.防止拖拽文本域

 

c.vertical-align属性应用

用于实现图片和文字垂直对齐方式

1)语法

 2)属性值

图例:

 3)解决图片底部默认空白缝隙问题

bug:图片地测会有一个空白缝隙,因为行内块元素会和文字的基线对齐

方法:

1. 给图片添加vertical-align:middle|top|bottom等
2. 将图片转换为块级元素