CSS summary (four)

Use the sprite

Sprite: a lot of small images made of a large map integration

background-position: The first represents the horizontal direction, the vertical direction indicates the second

.box {
   width: 28px;
   height: 28px;
   border: 1px solid #000;
   background: url('./images/[email protected]') no-repeat;
 }
 .box:nth-child(2) {
   background-position: -46px 0;
 }

Font icons

Ali Mama Vector

Select the appropriate icon:

Then click on the top right corner cart Download Code:

The first use:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="./fonts/iconfont.css">
  <style>
    .iconfont {
      font-size: 100px;
      font-weight: 600;
      color: pink;
    }

    /*这种使用方式作为了解 ，一般不用*/
  </style>
</head>
<body>
  <i class="iconfont icon-all"></i>
  <i class="iconfont icon-back"></i>
  <i class="iconfont icon-delete"></i>
</body>
</html>

The second use:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="fonts/iconfont.js"></script>
  <style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
       color: pink;
    }
    /*注意：这种方式不推荐使用*/
  </style>
</head>
<body>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-all"></use>
    <!-- <use xlink:href="#icon-back"></use> -->
  </svg>
  <svg class="icon" aria-hidden="true">
    <!-- <use xlink:href="#icon-all"></use> -->
    <use xlink:href="#icon-back"></use>
  </svg>
</body>
</html>

A third use:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /*第一步：先自定义字体图标的类型   特别注意文件路径*/
    @font-face {
      font-family: 'iconfont';
      src: url('./fonts/iconfont.eot');
      src: url('./fonts/iconfont.eot?#iefix') format('embedded-opentype'),
      url('./fonts/iconfont.woff') format('woff'),
      url('./fonts/iconfont.ttf') format('truetype'),
      url('./fonts/iconfont.svg#iconfont') format('svg');
  }
  /*第三步：将自定义的字体图标类型应用到引入的字体图标上*/
  .iconfont {
    font-family: 'iconfont';
    font-style: normal;
    color: pink;
    font-weight: 600;
  }
  </style>
</head>
<body>
  <!-- 第二步：挑选相对的字体图标的Unicode编码 -->
  <i class="iconfont">&#xe696;</i>
  <i class="iconfont">&#xe866;</i>
</body>
</html>

Locate

Composition:
1. positioning mode
1) static position
2) located opposite
3) Absolute positioning
4) fixed positioning

2. The offset elements moving distance in the page (in the horizontal direction, the vertical direction)

偏移量的表示：
      top:  定位的元素距离参考的元素的上面的距离
      left: 定位的元素距离参考元素左边的距离
      bottom: 定位元素距离参考元素下面的距离
      right:定位元素距离参考元素右边的距离

Static positioning:

The default position elements of the HTML standard stream is static positioning

Static positioning features:

1. Static positioned elements follow the HTML specification

2. Static positioning elements can not be provided effectively offset

Relative positioning:

.box {
   width: 200px;
   height: 200px;
   background: blue;
   /*设置一个相对定位*/
   position: relative;
  /* top: 200px;
   left: 200px;*/
   /*right: 50px;*/
   left: -50px;
}

The relative positioning of features:

1. The relative positioning element is not marked off, it continues to occupy the position of the standard stream

2. The relative positioning of the display element can not be changed

3. The relative positioning element is moved to its original position with reference to the element itself

Absolute positioning:

.one {
  width: 200px;
  height: 200px;
  background: pink;
  /*设置一个绝对定位、   absolute:绝对的，决定的*/
  position: absolute;
  top: 100px;
  left: 100px;
}

Absolute positioning features:

1. marked off, does not occupy the position

2. Absolute positioning to change the display elements (elements for in-line)

3. If there are elements nested relations, sub-elements absolute positioning, and fathers elements are static position, then the absolute positioning of child elements with reference to body movement position;

If there are elements that are not static positioning fathers element, then the absolute positioning of child elements reference the non-static positioning element to move the position of parents

If there are multiple non-static positioning element fathers element, then the absolute positioning of child elements reference from their parents recently moved element position (principle of proximity)

Parent with child must:

Daily usage location: sub-element absolute positioning, relative positioning of elements fathers

This parent element off the page layout marked causing confusion

Fixed positioning:

.box {
  width: 100%;
  height: 100px;
  background: pink;
  /*设置固定定位*/
  position: fixed;
  top: 10px;
}

Fixed positioning characteristics: