前端中雪碧图、高度塌陷和序号选择器

程序员文章站 2022-04-24 15:15:21

...

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
  ④ ????????设置overflow为一个非默认值,一般都是使用overflow:hidden来开启BFC
②在塌陷的父元素的最后添加一个空白的div,然后对该div进行清除浮动
1. 代码
```
<div id="box1">
	<div id="box2"></div>
	<div style="clear:both"></div>
</div>
```
2. 存在问题 : 使用这种方式会在页面添加多余的结构
3. ???? 知识点: 清除浮动
  ①概念 : 有时希望清除掉其他元素浮动对当前元素产生的影响,可以使用clear来完成该功能.clear可以用来清除其他浮动元素对当前元素产生的影响
  ②可选值:
  none : 默认值,不清除浮动
  left : 清除左侧浮动元素对当前元素的影响
  right : 清除右侧浮动元素对当前元素的影响
  both : 清除两侧浮动元素对当前元素的影响
③????????使用after伪类,向父元素后添加一个块元素,并对其清除浮动
该种方式的原理和方法二原理相同,但是不需要向页面中添加额外的结构

也就是说,在塌陷的父元素的后面,追加一个伪类,没有任何文字(空的),并且将其设置为块级元素(div),设置其clear:both.跟第二种方式是相同的,只不过不需要增加额外的结构.

3. 高度塌陷完善

子标签浮动,父标签高度崩塌

子元素和父元素相邻的垂直外边距会发生重叠,子元素的外边距会传递给父元素
例如:我们想要box4有100px的外边距

<div id="box4" class="clearfix">
       <!-- <table></table>-->
        <div id="box5"></div>
    </div>

 #box4{
            width: 400px;
            height: 400px;
            background-color: purple;
        }

       /* #box4::before{
            content: '';
            display: table;
        }*/

        #box5{
            width: 100px;
            height: 100px;
            background-color: yellow;
            /*子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素*/
            margin-top: 100px;
        }

运行效果 : 子元素的外边距传递给父元素
前端中雪碧图、高度塌陷和序号选择器

解决方案 : 使用空的table标签可以隔离父子元素的外边距,阻止外边距的重叠

显然这样也会和之前增加div标签一样增加额外结构.因此使用伪类为元素.
```
.clearfix::before{
            content: '';
            display: table;
        }
```
结合起来:
```
.clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }
```
经过修改后的clearfix是一个多功能的,既可以解决高度崩塌,又可以确保父元素和子元素的垂直外边距不会重叠.
因此,当后续开发的时候,直接把这个作为样式文件引入,需要解决崩塌和重叠问题的时候,增加一个类clearfix即可.

3. 序号选择器

不区分类型
① :first-child 选中同级别中第一个标签
② :last-child 选中同级别中最后一个标签
③ :nth-last-child(n) 选中同级别中倒数第n个标签
④ :nth-child(n) 选中同级别中第n个标签
⑤ :only-child 选中同级别中唯一子元素标签
区分类型
① :first-of-type 选中同级别中同类型中第一个标签
② :last-of-type 选中同级别中同类型中最后一个标签
③ :nth-of-type 选中同级别中同类型第n个标签
④ :nth-last-of-type 选中同级别中同类型中倒数第n个标签
⑤ :only-of-type 选中同级别中唯一同类型子元素标签
奇偶选择
① :nth-child(odd) 选中同级别中所有奇数
② :nth-child(even) 选中同级别中所有偶数
③ :nth-child(xn+y) x,y是用户自定义的 n为计数器,从0开始递增选择,到元素的总个数停止