CSS精灵、滑动门技术、 BFC、小箭头、文本溢出处理、阿里矢量图标

本文链接：https://blog.csdn.net/qq_41027812/article/details/108208505

CSS精灵、滑动门技术、 BFC、小箭头、文本溢出处理、阿里矢量图标

CSS精灵

什么是 CSS 精灵
英文叫法 CSS sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位“

 <style>
     .box {
         width: 50px;
         height: 50px;
         background-image: url(./images/jingling.jpg);
     }
     .box1 {
         background-position: 0 0;
     }
     .box2 {
         background-position: -200px -50px;
     }
     .box3 {
         background-position: -150px -100px;
     }
     </style>
 </head>
 <body>
 <div class="box box1"></div>
 <div class="box box2"></div>
 <div class="box box3"></div>
 </body>

CSS 精灵优缺点
- 优点：
  - 减少网页的 http 请求，从而大大的提高页面的性能；
  - 减少图片命名上的困扰；
  - 更换风格方便。
- 缺点：
  - 必须要限定容器大小符合背景图元素位置，计算麻烦

CSS滑动门技术

滑动门核心技术就是利用 CSS 精灵（主要是背景位置）和盒子 padding 撑开宽度 , 以便能适应不同字数的导航栏。
先给一个 a 标签，用来装背景图的左边圆角，a 不给宽度，由文字撑开宽度，再在 a 里面加一个 span 盒子， span 盒子还是用之前的背景图的，但是是装背景图的右边圆角，字写在 span 里面的，span 又是属于 a 的，里面装上字就会把它的宽度撑开。

    <style>
      * {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style-type: none;
            overflow: hidden;
        }
        li {
            float: left;
        }
        ul li a {
            background-image: url(./images/02.png);
            display: block;
            padding-left: 15px;
            height: 33px;
            line-height: 33px;
            color: #fff;
            text-decoration: none;
        }
        ul li a span {
            background: url(./images/02.png) right;
            display: block;
            height: 33px;
            padding-right: 15px;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#">
              <span>导航栏内容</span>
            </a>
          </li>
    </ul>
</body>

CSS小箭头

先设置一个盒子，并设置相对定位；
在盒子里面设置两个子盒子，宽高为0，设置盒子为绝对定位，设置四个边距，其中三个边距为无色，形成两个三角形，把上面的三角形的颜色设置和背景色一样的颜色，覆盖下面的三角形（有一定的错位，比如一个盒子是left:20px,另一个盒子是；left:22px;）。

    <style>
        body {
            background-color: blue;
        }
        * {
            padding: 0;
            margin: 0;
        }
        .box1 {
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent transparent transparent red;
            position: absolute;
            top: 0;
        }
        .box2 {
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent transparent transparent blue;
            position: absolute;
            top: 0;
            left: -10px;
        }
        .wrap {
            width: 100px;
            height: 200px;
            margin: 0 auto;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>

BFC (Block Formatting Context) 块级格式化上下文

什么是bfc？
- Formatting Context：指页面中的一个渣染区域，并且拥有一套渣染规则，他决定了其子标签如何定位，以及与其他标签的相互关系和作用。
  
  BFC块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

-生成BFC的方法

根标签
float的值不为none
overflow 的值不为 visible
display 的值为 inline-block
position 的值为 absolute 或 fixed
BFC的特性
- 内部的标签默认会在垂直方向上一个接一个的放置。
- 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠。
- 每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。
- BFC 的区域不会与 float 的标签区域重叠。
- 计算BFC的髙度时，浮动子标签也参与计算。
- BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然。

BFC解决的问题

外边距塌陷

  <style>
     * {
        padding: 0;
        margin: 0;
    }
    .wrap {
        width: 300px;
        height: 300px;
        background-color: red;
        /* float: left; */
        /* overflow: hidden; */
        /* display: inline-block; */
        position: absolute;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: blue;
        margin-top: 30px;
    }
  </style>
  </head>
  <body>
   <div class="wrap">
    <div class="box"></div>
  </div>
</body>

清浮动

    <style>
    * {
        padding: 0;
        margin: 0;
    }
    .wrap {
        border: 1px solid #000;
        /* 父标签生成BFC，可以解决父标签高度塌陷问题，也就是清浮动 */
        /* float: left; */
        /* overflow: hidden; */
        /* display: inline-block; */
        position: absolute;
    }
    .box1 {
        width: 300px;
        height: 300px;
        background-color: red;
        float: left;
    }
    .box2 {
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }
</style>
 </head>
<body>
  <div class="wrap">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
  </body>

两栏或者三栏自适应布局

  <style>
    * {
        padding: 0;
        margin: 0;
    }
    .left {
        width: 200px;
        height: 300px;
        background-color: red;
        float: left;
    }
    .right {
        height: 300px;
        background-color: blue;
        overflow: hidden;
    }
 </style>
 </head>
 <body>
 <div class="left"></div>
 <div class="right"></div>
 </body>

文本溢出处理

单行文本溢出显示省略号
- white-space
  - normal 默认。空白会被浏览器忽略。
  - pre 空白会被浏览器保留。
  - nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
  - pre-wrap 保留空白符序列，但是正常地进行换行。
  - pre-line 合并空白符序列，但是保留换行符。
- text-overflow
  - clip 修剪文本。
  - ellipsis 显示省略符号来代表被修剪的文本。
  - [string] 使用给定的字符串来代表被修剪的文本。目前只在Firefox下有效。
  - 单行文本溢出显示省略号
- ```
p {
    width:200px;	/*限定盒子的宽度*/
    overflow:hidden;	/*给元素设置溢出隐藏属性*/
    text-overflow: ellipsis;	/*文本溢出显示省略号*/
    white-space:nowrap; /* 文本不换行 */
}
```

多行文本溢出显示省略号

方法1:利用WebKit的CSS扩展属性（只有-webkit-内核才有作用）

p{
    width:200px;	/*限定盒子的宽度*/
    overflow: hidden; /*给元素设置溢出隐藏属性*/
    text-overflow: ellipsis; /*文本溢出显示省略号*/
    display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
    -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数，这是一个不规范的属性，它没有出现在CSS规范草案中。*/
    -webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式*/
}

方法2:利用伪元素模拟溢出显示省略号的效果（兼容性比较好）
- 将height设置为line-height的整数倍，防止超出的文字露出。
- 给.pl:after添加渐变背景可避免文字只显示一半

<style>
    .box {
        width: 200px;
        height: 120px;
        line-height: 30px;
        overflow: hidden;
        border: 1px solid #000;
        position: relative;
    }
    .box:after {
        content: '...';
        position: absolute;
        right: 0;
        bottom: 0;
        padding-left: 15px;
        background: linear-gradient(to right,transparent,#fff 60%);
    }
</style>
      </style>
  </head>
  <body>
      <div class="box">
     我我我我我我我哦  我我我我我我我哦  我我我我我我
     我哦  我我我我我我我哦  我我我我我我我哦  我我我
     我我我哦  我我我我我我我哦  我我我我我我我哦  我
     我我我我我我哦  我我我我我我我哦
      </div>
  </body>

阿里矢量图标

  <style>
 .icon {
     width: 1em;
     height: 1em;
     vertical-align: -0.15em;
     fill: currentColor;
     overflow: hidden;
 }

 .box {
     font-size: 100px;
     /* 颜色仅限于单色图标 */
     color: red;
     /* font-style: italic; */
     /* font-weight: bold; */
 }

 .box1 {
     font-size: 80px;
     color: gold;
 }

 .wrap {
     width: 300px;
     height: 300px;
     background-color: blue;
     text-align: center;
     line-height: 300px;
 }
 .box2 {
     font-size: 50px;
 }
 </style>
</head>
 <body>
 <!-- 矢量图标拥有一些文字的样式 -->
<!-- 第一种 -->
<span class="iconfont box">&#xe6ec;</span>
 <span class="iconfont box">&#xe60b;</span>
<!-- 第二种 -->
 <span class="iconfont icon-jingdong box1"></span>

<div class="wrap">
 <span class="iconfont icon-jingdong box1"></span>
</div>
<!-- 第三种 -->
<svg class="icon box2" aria-hidden="true">
 <use xlink:href="#icon-feiji1"></use>
</svg>
</body>