HTML：雪碧图、高度塌陷和序号选择器

1. 雪碧图(精灵图片、CSS Sprites)

基本概念
雪碧图被运用在众多使用很小图标的网站上.
相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和宽带更好.
优点
① 将多张图片合并成一张图片中,可以减小图片的总大小
② 将多张图片合并成一张图片后,下载全部所需资源,只需要一次请求,可以减小建立连接的消耗.
注意
在HTTP2中,已经不需要考虑减少请求数,故雪碧图在HTTP2中优化性能的意义已经不大.
软件
Macromedia Fireworks 8
使用
①我们知道,png格式的图像是支持透明的,透明区域不会显示任何内容.

②对于上面这张图片,如果我们想获取活动进行中这部分图片,我们直接引入
```
#box1{width: 120px;height: 55px;background-image: url(images/toolbars.png);}
```
效果是这样的:

③我们可以通过fireworks,选择这部分内容,查看其宽高以及对应X、Y

同时,在代码中使用background 的position属性对其进行设置
```
#box2{width: 120px;height: 55px;background: url(images/toolbars.png) -220px 0;margin: 50px;}
```
这样运行的效果图为:

即可获得想要的图片.

也就是说,所谓雪碧图其实就是很多图标集中在一张大的png图片上,我们根据位置调整显示的样式

2. 高度塌陷

产生原因
父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流后,将无法撑起父元素的高度,也就会导致父元素的高度塌陷

造成后果
父元素的高度一旦塌陷,所有标准流中元素的位置将会上移,导致整个页面的布局混乱
例如 : 将box2浮动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>#box1{border: 1px solid red;}#box2{width: 100px;height: 200px;background-color: royalblue;float: right;}#box3{height: 100px;background-color: green;}</style>
</head>
<body><div id="box1"><div id="box2"></div></div><div id="box3"></div>
</body>
</html>

运行效果:

解决方案
①开启父元素的BFC
1. Block Formatting Context 块级格式化环境
2. BFC是元素的隐藏属性,默认是在关闭状态的
3. 可以通过一些特殊的样式,来开启BFC
4. 开启BFC以后元素将会具有以下特性:
  ① 父元素的垂直外边距不会和子元素重叠
  ② 开启BFC的元素不会被浮动元素所覆盖
  ③ 开启BFC的元素可以包含浮动子元素
5. 开启BFC的方式
  ① 设置元素浮动
  ② 设置元素绝对定位
  ③ 设置元素类型为inline-block
  ④
  
  HTML：雪碧图、高度塌陷和序号选择器相关推荐
  1. 深入浅出CSS（二）：关于雪碧图、background-position与steps函数的三角恋情
    [测试代码] HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta cha ...
  2. 【夯实基础--CSS】=＞高级技巧（雪碧图/滑动门/CSS三角形/字体图标(iconfont)等）
    CSS高级技巧 CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...
  3. css雪碧图如何调整大小
    1.通过transform: scale(0.5);来缩放,但在本身有过渡或动画时,刷新页面会有卡顿拉伸现象!不建议这样做! 2.直接调整雪碧图background-size大小例如,雪碧图规格14 ...
  4. Web前端之背景、雪碧图
    目录一.背景二.雪碧图一.背景 background-color 设置背景颜色 background-image 设置背景图片如果背景图片大小小于元素,则背景图片会自动在元素中平铺将元素铺满 ...
  5. 【前端小实战】百度新闻雪碧图及动画（CSS sprites）
    文章目录前言 ~ 雪碧图一.页面效果展示二.代码实现解析三.完整代码前言 ~ 雪碧图雪碧图,英文原名叫 CSS sprites,其实就是融合了各种资源的图片,图片里面可能会有一个角色的 ...
  6. 背景的样式（雪碧图）
    目录一.背景的基础设置 1.background-color : 设置背景颜色 2.background-image:来设置背景图片 3:background-repeat:用于设置背景图片的重复方 ...
  7. 前端性能优化总结/懒加载、函数节流、优化dom操作、雪碧图、合并文件
    1.减少 HTTP 请求数量在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信.浏览器与服务器需要经过三次握手,每次握手需要花费大量时间.而且不同浏览器对资源文件并发请求数量有限(不同浏览器 ...
  8. H5 雪碧图移动的机器猫
    精灵图(英语:Sprite),又被称为雪碧图或拼合图.在计算机图形学中,当一张二维图像集成进场景中,成为整个显示图像的一部分时,这张图就称为精灵图. 本文中用的就是这张,来自爱给网. 效果操作键 ...
  9. html雪碧图怎么设置,HTML 5开发的在线雪碧图片合成工具
    Css Sprite,有时也称为雪碧图.精灵图,是每一个前端开都会遇到的问题,也是常见的小图片加载优化手段.相信各位同学都清楚其原理,具体就不赘述了. 之前一直有动机利用html5实现一个合成雪碧图的 ...
  10. 雪碧图 css 使用方式与 Js使用方式
    效果链接示例雪碧图如下,雪碧图图片资源来源于力扣官网中头像悬浮Dark Side功能. 雪碧图分析:该雪碧图横向为12等分,高度32px 1. JavaScript方式使用雪碧图(猜测力扣使用的方式 ...
  最新文章
  热门文章

HTML：雪碧图、高度塌陷和序号选择器

1. 雪碧图(精灵图片、CSS Sprites)

2. 高度塌陷

HTML：雪碧图、高度塌陷和序号选择器相关推荐

最新文章

热门文章