CSS(精灵图、外边距塌陷与合并)

小杨码记

已于 2024-07-18 13:29:55 修改

阅读量189

点赞数 6

分类专栏： CSS 文章标签： css 前端

于 2024-07-18 13:26:40 首次发布

本文链接：https://blog.csdn.net/m0_71805861/article/details/140520570

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、精灵图

1.精灵图：把许多小图标集中在一张背景透明的图片上。

2,.在线工具：Sprite Cow - Generate CSS for sprite sheets

3.通过工具可以快速找到图标在精灵图上的坐标位置

4.案例：

<body>
    <!-- 
      使用精灵图可以减少文件的请求次数。减少http请求
    -->
    <style>
      /* 基础类名 */
      .icon {
        /* 设置成行内块显示方式 */
        display: inline-block;
        /* 设置行内块元素垂直居中对齐 */
        vertical-align: middle;
        /* 设置背景图路径 */
        background-image: url(./assets/iconall.png);
        /* 设置背景图不平铺 */
        background-repeat: no-repeat;
      }

      /* 不同图片的类名 */
      .icon-1 {
        width: 106px;
        height: 106px;
        /* 设置背景图的位置（主要找到图标的位置） */
        background-position: -2px -387px;
      }

      .icon-2 {
        width: 87px;
        height: 87px;
        background-position: -2px -912px;
      }

      .icon-3 {
        width: 22px;
        height: 22px;
        background-position: -90px -160px;
      }

      .icon-4 {
        width: 76px;
        height: 32px;
        background-position: 0px -735px;
      }

      .icon-5 {
        width: 76px;
        height: 32px;
        background-position: 0px -781px;
      }
    </style>


    <i class="icon icon-1"></i>
    <i class="icon icon-2"></i>
    <i class="icon icon-3"></i>


    <div>
      <i class="icon icon-4"></i>
      <i class="icon icon-5"></i>
    </div>

  </body>

二、外边距塌陷与合并

1.外边距塌陷：防止外边距塌陷的写法：主要是把这个元素设置成BFC(块级格式化上下文、独立的渲染区域)

（1）设置溢出隐藏：overflow:hidden

（2）设置边框：border: 1px solid white;

（3）可以让这个元素脱离正常文档流：float: left;

2.外边距合并：垂直方向，并列关系的两个元素，上边元素设置margin-bottom：值；下边元素设置margin-top：值；这两个元素的间距不会相加，而是取属性值较大一个间距。解决方案如下：

（1）并列关系的两个元素，要么统一设置margin-top或者统一设置margin-bottom。

（2）给并列关系的两个元素嵌套一个父元素，设置overflow:hidden (形成BFC)。

.wrap {
      overflow: hidden;
    }
  </style>

  <div class="wrap">
    <div class="item box-1"></div>
  </div>
  <div class="wrap">
    <div class="item box-2"></div>
  </div>

三、构建前端项目

项目结构

index.html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <!-- 设置网页图标 -->
    <link rel="shortcut icon" href="./images/Rectangle 22.png">
    <!-- 初始化标签的默认样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 主要样式文件 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 描述这个网页(提高搜索引擎优化) -->
    <meta name="description" content="">
    <!-- <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！"> -->
    <meta name="keywords" content="">
    <!-- <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺"> -->
</head>

<body>
     <!-- 明天在这里开始编写网页...... -->

</body>

</html>

小杨码记

关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS(精灵图、外边距塌陷与合并)

2.外边距合并：垂直方向，并列关系的两个元素，上边元素设置margin-bottom：值；下边元素设置margin-top：值；（1）并列关系的两个元素，要么统一设置margin-top或者统一设置margin-bottom。（2）给并列关系的两个元素嵌套一个父元素，设置overflow:hidden (形成BFC)。1.外边距塌陷：防止外边距塌陷的写法：主要是把这个元素设置成BFC(块级格式化上下文、独立的渲染区域)（2）设置边框：border: 1px solid white;
复制链接

扫一扫