当前栏目: [前端开发基础]您现在的位置是:成都seo > 前端学习 > 前端开发基础 > 正文

前端基础学习第十七天

2020-04-18 01:27前端开发基础 人已围观文章来源:未知文章作者:admin

简介4.display 元素的显示与隐藏 display: block; //显示 display: none;//隐藏 //display 隐藏元素后,不在占有原来的位置 -----------...

4.display 元素的显示与隐藏
 
display: block; //显示
 
display: none;//隐藏
 
//display 隐藏元素后,不在占有原来的位置
 
----------------------------
 
visibility  元素的显示与隐藏
 
visibility:  visible; 元素可视
 
visibility: hidden;元素隐藏
 
注意: visibility 隐藏元素后,继续占有原来的位置
 
如果隐藏元素想要原来的位置 ; 用 visibility: hidden;
 
r如果隐藏元素不要原来的位置; 用 display none;
 
---------------------------------
元素显示隐藏
 
2.溢出隐藏
 
overflow 溢出隐藏
 
overflow :正常显示
 
overflow: hidden; 溢出隐藏
 
overflow: scroll; 滚动条
 
overflow: auto ; 在需要的时候添加滚动条
 
-----------------------------------
CSS 高级技巧
 
精灵图
 
目的:减轻服务器压力
 
---------------------------------
精灵图(sprites)的使用
 
1.精灵技术主要针对背景图片的使用 ,就是把多个小背景图片整合到一张大张图中
 
2.这个大图片也称为sprites
 
3.移动背景图片位置 可以使用background-position
 
4.移动的距离就是目标图片x和y坐标.
 
5.因为一般情况都是往上,往下移动,所以数值是负值
 
--------------------------------------
字体图标
 
字体图标的优点
 
轻量级:
 
灵活性:
 
兼容性:
 
总结:
1.如果遇到一些结构样式简单小图标,就用字体图标
 
2.如果遇到一些结构和样式复杂一点小图片,就用精灵图
 
 
 
 
 
 
 
 
 
 

Tags:

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

本栏推荐

标签云

站点信息

  • 文章统计96篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们