字体图标，特殊字体，等高布局，z-index（元素显示规则）

特殊字体（在ui设计师特定要求下显示字体–一般不会用，会影响加载速度）

css@规则：

<style>
	@import '路径' /* 导入别的样式*/
</style>

在别人打开网页的时候会自动下载该字体，所以不管用户有没有该字体都会显示该字体样式

<style>
	@font-face{
		font-family:'自定义字体名字'；
		src:'字体文件的路径';
		font-disable:swap;/*字体未下载好的时候用浏览器默认的字体*/
	 }
	 p{ 
	 
		font-family:'自定义字体的名字'；
	}
 </style>

行盒对齐方式：vertical-align: top;//基线对齐方式设置，一般可以调图片和文字没有居中对齐

两栏式布局对齐（在一边的内容多，另一边内容少，但两边内容不一定的时候想要对齐等高，主要是设置短的那个高度大一点，然后利用margin-bottom：-大一点，他的实际高度只有高度+margin-bottom，看起来和另一边等高）

<style>
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
        .container {
            width: 90%;
            margin: 0 auto;
            overflow: hidden;
        }
        .aside{
            float: left;
            background: #008c8c;
            color: #fff;
            width: 300px;
            margin-right: 30px;
            height: 10000px;
            margin-bottom: -9990px;
        }

        .main{
            overflow: hidden;
            background: gray;
            vertical-align: top;
        }
    </style>
<div class="container clearfix">
        <aside class="aside">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
        </aside>
        <div class="main">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe aliquid sapiente quo corporis ipsa nesciunt voluptatum architecto debitis amet odio quos laborum, non dolorem suscipit dignissimos voluptatibus veniam ad expedita quis culpa nostrum maiores assumenda earum. Commodi illo odio soluta! Obcaecati consectetur, et rem ratione atque quos amet iure debitis repellendus accusantium hic id impedit temporibus? Omnis voluptatem possimus numquam repudiandae similique doloremque voluptates inventore, labore porro dolor quos, incidunt est perferendis ipsam culpa, nostrum officiis repellat dolore sit pariatur quam autem optio impedit? Fugit, velit? Nobis recusandae ex possimus enim animi autem dolores nam natus, blanditiis at velit sed rem impedit error laboriosam voluptatem similique maxime doloremque adipisci illo minima obcaecati? Ea earum ad dicta. Saepe, accusantium minima. Eligendi mollitia architecto quis reprehenderit, dolorem maxime dignissimos iusto? Maiores ratione reiciendis, facilis unde quis velit minima praesentium similique adipisci eos, neque quia facere quibusdam natus error voluptatem dolorum a. Voluptates recusandae perspiciatis quasi ab asperiores cum iure dignissimos. Laborum temporibus ducimus vitae soluta a dignissimos qui? Eius, minima consequuntur praesentium recusandae illo fugit quibusdam provident laborum optio asperiores libero, eligendi repellat aliquam esse ipsa nesciunt doloremque nemo qui maiores eaque rerum?
        </div>
    </div>

常见显示规则（标题序号越大越靠近用户）

z-index
当给元素设置了z-index(只有设置position的才有效除开默认值)就相当于创建了堆叠上下文，就有以下的规则（不管怎么设置，html永远是在最下面）

1.创建元素的背景和边框

2.堆叠级别为负值的元素

3.常规流非定位块盒

4.非定位的浮动盒子

5.常规流非定位的行盒

6.任何设置了z-index为auto的定位子元素以及z-index是0的堆叠上下文

7.堆叠级别为正值得堆叠上下文

      html{
      background-color: black;
    }
    /* 1.创建元素的背景和边框,所以在最下面，但是当z-index设置为auto时就会被被设置z-index子元素覆盖 */
    .content{
      margin: 300px;
      position: relative;
      width: 400px;
      height: 400px;
      background-color: pink;
      z-index: 1;
    }

    /* 2.堆叠级别为负值的元素 */
    .content .box{
      margin: -50px;
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: skyblue;
      z-index: -1;
    }
    /* 3.常规流非定位块盒 */
    .box2{
      width: 100px;
      height: 100px;
      background-color: rgb(160, 222, 135);
    }
    /* 4.非定位的浮动盒子 */
    .box3{
      margin: -100px 20px;
      float: left;
      width: 100px;
      height: 200px;
      background-color: burlywood;
    }
    /* 5.常规流非定位的行盒 */
    span{
      background-color: red;
    }
    /* 6.任何设置了z-index为auto的定位子元素以及z-index是0的堆叠上下文 */
    .box4{
      margin: -90px -90px;
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: rgb(123, 115, 168);
      z-index: auto;  /* 或者为0 */
    }
    /* 7.堆叠级别为正值得堆叠上下文 */
    .box5{
      margin: -50px;
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: rgb(138, 78, 98);
      z-index:1; 
    }
  </style>
    <!-- 1.创建元素的背景和边框 -->
  <div class="content">
    <!-- 2.堆叠级别为负值的元素 -->
    <div class="box"></div>
    <!-- 3.常规流非定位块盒 -->
    <div class="box2"></div>
    <!-- 4.非定位的浮动盒子 -->
    <div class="box3"></div>
    <!-- 5.常规流非定位的行盒 -->
    <span>非定位行盒</span>
    <!-- 6.任何设置了z-index为auto的定位子元素以及z-index是0的堆叠上下文 -->
    <div class="box4"></div>
    <!-- 7.堆叠级别为正值得堆叠上下文 -->
    <div class="box5"></div>
  </div>

html怎么设置都会在最下面