fuchencong

The way I am

0%

HTML 与 CSS 基础（6）：精灵图、字体图标、布局技巧

发表于 分类于

这篇文章继续学习 CSS 的基础知识，主要包含一些 CSS 的高级使用技巧，例如 CSS 精灵图、字体图标等知识，同时介绍一些 CSS 布局技巧。

精灵图

精灵图（Sprite）是指将多个小图片拼接到一个图片文件中，通过指定背景图片的位置，来显示不同的图片。精灵图最大的优点是可以减少服务器请求次数，从而提高页面的加载速度。

精灵图使用的核心要点：

  • 精灵技术主要针对背景图片使用，就是将多个小的背景图片整合到一张大图片中，大图片也就称为精灵图（sprite）
  • 移动背景图片的位置，可以使用 backgroud-position 属性
  • 移动的距离是以这个图片的左上角为原点计算的, 往上和往左移动为负值
  • 因为一般情况下都是往上、往左移动，因此 bacgroud-position 属性值一般都是负值

background-position 的属性值也可以直接写到 background 属性中，例如：

1
2
3
4
5
.spirit {
    background: url(sprites.png) no-repeat -182px 0px;
    width: 60px;
    height: 60px;
}

字体图标

字体图标主要用于显示网页中通用的、常用的一些小图标。精灵图虽然有很多优点，但是有一些缺陷：

  • 图片文件本身大
  • 图片放大或缩小会失真
  • 一旦图片制作完毕，想要更换非常复杂

字体图标（iconfont）可以解决以上问题，字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质上是字体。它的优点：

  • 轻量级：字体图标比一系列的图像要小，一旦字体加载，图标就会马上渲染出来，减少了服务器请求
  • 灵活性：本质上是文字，可以修改大小、颜色等
  • 兼容性：几乎支持所有浏览器

注意，字体图标不能代替精灵技术，只是对图标部分的提升和优化。如果遇到结构和样式比较简单的小图标，可以使用字体图标。但是结构样式更复杂的小图片，还是需要使用精灵图。

字体图标的使用可以分为以下步骤：

1：字体图标的下载：例如可以在 icomoon、阿里 iconfont等网站下载

2：在 html 文件中引入字体图标

  • 2.1：将下载包里面的 fonts 文件夹放入到页面的根目录下
  • 2.2：在 CSS 样式中全局声明字体，即把这些字体文件通过 css 引入到页面中。对应的 CSS 代码可以直接从下载包中的 style.css 文件中复制，例如：
1
2
3
4
5
6
7
8
9
10
11
  @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?eunog4');
  src:  url('fonts/icomoon.eot?eunog4#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?eunog4') format('truetype'),
    url('fonts/icomoon.woff?eunog4') format('woff'),
    url('fonts/icomoon.svg?eunog4#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
  • 2.3：为了在 HTML 文件中引入字体图标，可以添加 span 标签，标签内容为该字体图标专门的字符。为了获取该字符，可以从下载包中的 demo.html 文件中复制。同时在 CSS 样式将 span 标签的字体设置为 icomoon。例如：
1
2
<span></span>
<span></span>
1
2
3
4
5
span {
    font-family: 'icomoon';
    font-size: 50px;
    color: blue;
}
  • 2.4：这样浏览器中就可以显示这些已经在 HTML 文件中引入的字体图标了

3：如果需要添加新的字体图标，则需要从 icomoon 网站中使用其 Importe icons 功能，将现有图标进行上传（即上传原有字体图标包中的 selection.json 文件），然后继续添加新的图标即可，然后再重新下载新的字体图标包，并替换旧的即可

字体图标的加载原理和精灵图是类似的，只需要向服务器请求一次字体文件，服务器返回该字体文件后就可以直接使用其中的图标了，且后续使用其中的任何图标都不需要再次请求服务器。

CSS 用户界面样式

所谓界面样式，就是指更改一些用户操作样式，以提高更好的用户体验。这里我们介绍几种界面样式：

  • 更改用户的鼠标样式
  • 表单轮廓
  • 防止文本域拖曳

通过如果如下 cursor 属性，可以更改用户的鼠标样式：

1
cursor: 属性值；

如下是常见的 cursor 属性值：

  • default：默认光标（通常是箭头）
  • pointer：小手
  • move：移动
  • text：文本
  • not-allowed：禁止

表单的轮廓线是指当光标焦点在表单元素上时，默认会出现一个蓝色的轮廓线，可以通过 outline 属性来设置该轮廓线的样式。通过将 outline 属性设置为 0 或者 none，可以去除该轮廓线：

1
outline: none;

文本域默认是可以通过鼠标拖拽来改变大小的，可以通过 resize 属性设置为 none 来禁止文本域的拖拽，例如：

1
resize: none;

有时候文字太长，超过了容器宽度，就需要使用省略号显示。对于单行文本溢出显示省略号，需要满足如下 3 个条件：

  • white-space: nowrap;：让文字在一行显示，不换行。默认值为 normal，表示自动换行
  • overflow: hidden;：溢出隐藏
  • text-overflow: ellipsis;：文字用省略号替代超出部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
  <style>
      div {
          width: 100px;
          height: 100px;
          background-color:pink;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }
  </style>
</head>
<body>
    <div>
        啥也不说了，此处省略1万字
    </div>
</body>

多行文本溢出显示省略号，有一些兼容性问题，适合于 webkit 内核的浏览器或移动端：

1
2
3
4
5
6
7
8
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在块内显示的文本行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

网页布局技巧

导航栏处理

实际开发中，对于导航栏，我们不会直接使用链接 a，而是用 li 包含链接 a 的做法。

  • li + a 语义更加清晰，方便我们理解这是有条理的列表型内容
  • 如果直接使用 a，可能被搜索引擎判别为堆砌关键字，进而被搜索引擎降低权重，影响网站排名

margin 负值的技巧

有时候可以通过 margin 负值来实现边框的重叠，避免盒子边框由于合并导致边框变粗的问题。通过将盒子的 margin 设置为 对应边框值的负值，可以实现边框的重叠：

1
2
3
4
5
6
7
8
ul li {
    float: left;
    list-style-type: none;
    width: 100px;
    height: 200px;
    border: 1px solid black;
    margin-left: -1px;
}

使用这一点需要注意，由于盒子边框被重叠，这样在实现 hover 效果时，需要增加额外处理，即提高当前盒子的层级：

  • 如果没有定位，增加相对定位即可。因为相对定位会压住标准流或者其他浮动的盒子
  • 如果有定位，则增加 z-index 值

文字围绕浮动元素

我们可以利用浮动元素不会压住文字的特性，实现文字围绕浮动元素的效果。例如如下 box 内的文字可以自动围绕 box 内的 pic 盒子，不需要为文字额外设置浮动。

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
    width: 300px;
    height: 70px;
    background-color: pink;
    padding: 5px;
}
.box .pic {
    float: left;
    width: 120px;
    height: 60px;
    background-color: blue;
    margin-right: 5px;
}

行内块的巧妙应用

有时候我们可以利用行内块元素可设置宽度、高度，且他们之间有缝隙的特点，可以快速实现在一行内布局多个盒子，避免使用浮动。并且行内块元素最大的特点是：如果给父盒子添加 text-align: center;，则其中所有的行内块元素可以自动水平居中对齐。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<head>
    <style>
        .box {
            text-align: center;
        }
        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            background-color: gray;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
    </div>
</body>

vertical-align 属性

vertical-align 属性用于设置元素的垂直对齐方式，它只对行内元素或行内块元素有效。它经常用于设置图片或表单（行内块元素）和文字的对齐方式。语法为：

1
vertical-align: 属性值;

常见的属性值有：

  • baseline：基线对齐，元素放置在的基线上。默认值
  • top：顶线对齐，把元素的顶端与行中最高元素的顶端对齐
  • middle：中线对齐，把此元素放置在父元素的中线上
  • bottom：底线对齐，把元素的底端与行中最低的元素的底部对齐

有时候我们会看到图片底层会有一个空白空隙，这是因为行内块元素默认会和文字的基线对齐。主要解决办法有两种：

  • 给图片添加 vertical-align: middle | top | bottom;（只要不是基线对齐，提倡使用）
  • 把图片转换为块级元素，因为只有行内元素和行内块元素才有 vertical-align 属性，转换为块级元素就没有这个问题了

CSS 三角

网页中常见的一些三角形，使用 CSS 就可以直接画出来，不需要做成图片或字体图标。它用到了一个小技巧，即盒子的宽度、高度为 0，但是存在边框，如果四个边框的颜色不同，就可以构成 4 个三角形。一般我们只需要特定方向的三角形，则只需要将另外三个边框设置为透明即可。

例如如下得到一个指向右方的三角形：

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
    <style>
        .box1 {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left: 10px solid blue;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>

如下 CSS 代码可以实现一个直角三角形：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
    <style>
        .box {
            width: 0;
            height: 0;
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-width: 22px 8px 0 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

CSS 初始化

不同浏览器对某些标签的默认样式是不同的，为了消除不同浏览器对 HTML 文本呈现的差异，照顾浏览器的兼容，需要对 CSS 进行初始化。简单理解，CSS 初始化是指重设浏览器的样式（也称为 CSS reset）。每个网页一般都需要进行 CSS 初始化。

在一些 CSS 初始化代码中，会把中文的字体名称用其 Unicode 编码来代替，可以避免浏览器解释 CSS 代码时出现乱码问题，例如黑体用 \9ED1\4F53 来表示。