字体图标的用法和布局的原则与元素的理解

字体图标的用法

首先我们用到最多的就是阿里图标库

选择自己喜欢的图标加入购物车然后下载到本地，将下载的文件解压-放入源码中，需要在哪个页面让他显示，就引入进去
第二步:引用方式（首先引用CSS，iconfont.css是下载文件中的CSS，路径必须填对）

<link rel="stylesheet" href="./88/iconfont.css">

第二步：挑选相应图标并获取类名，(这里要选择Font class引用，icon-xxx是图标名，这里需要换成自己的)

<span class="iconfont icon-xxx"></span>
<span class="iconfont icon-hongbao-"></span>

第三步：如果不喜欢当前图标的颜色，可自行更改样式，他是一个字体图标，就用字体CSS属性更改

 .icon-hongbao- {
        font-size: 10em;
        color: aqua;
      }

布局的原则与元素的默认排列方式

一个页面只有两种方式排列【水平】【垂直】，宽存在受限，但是高是无限的，如果页面存在多个元素的时候它会水平排列，当第一排排满没有空间的时候会自动转入第二行，任何元素默认就是内元素：display: inline;如果页面存在块级元素，这个块级元素它会独占一行，存在多个块级元素它也不会水平排列，而是会第二排排列，块级元素通常是display: block;

盒模型常用属性

常用属性有：宽和高（width），（height），内边距（padding），外边距（margin），计算盒子大小（box-sizing）
box-sizingzhie这个属性是计算了这个盒子设置的总高度和总宽度，设置的宽高多大，它最终就是多大

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .top {
        width: 200px; /*宽度 */
        height: 200px; /*高度 */
        border: 1px solid rgb(252, 12, 12); /*边框 */
        padding: 30px; /*内边距 */
        margin: 30px; /*外边距 */
        background-color: rgb(66, 82, 82); /*内容背景 */
        box-sizing: border-box; /*计算盒子大小*/
      }
    </style>
  </head>
  <body>
    <div class="top">1111111</div>
    <div class="top">2222222</div>
  </body>
</html>

字体图标的用法和布局的原则与元素

字体图标的用法和布局的原则与元素的理解

相关文章