盒模型与字体图标使用

字体图标使用

首先登录https://www.iconfont.cn/ 平台，选择我们要用的图片
图片示例：

html代码实现：

<!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>
    <link rel="stylesheet" href="./icon/iconfont.css" />
  </head>
  <body>
    <span class="iconfont icon-zaixiankefu">在线客服</span>
    <span class="iconfont icon-mendianliebiao">门店管理</span>
    <span class="iconfont icon-woyaofaquan">优惠券</span>
    <span class="iconfont icon-shouruguanli">收入金额</span>
  </body>
</html>

css代码：

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf?t=1625204533062') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-zaixiankefu:before {
  content: "\e76e";
}
.icon-mendianliebiao:before {
  content: "\e76f";
}
.icon-woyaofaquan:before {
  content: "\e771";
}
.icon-shouruguanli:before {
  content: "\e770";
}

理解布局的原则与元素的默认排列方式与元素类型.理解布局的原则与元素的默认排列方式与元素类型.

布局的原则:

我们的可视化窗口是一个二维空间，所以我们的布局要么是横着要么就是竖着的。

元素的默认排列方式：

元素默认的排列方式都是以文档流为主由左至右由上之下

元素类型：

1.块状元素
块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域。
默认情况下，块状元素都会占据一行，按顺序自上而下排列。
通俗地说，两个相临的块状元素不会出现并列显示的现象。
块状元素，还可以定义自己的宽度和高度。
块状元素，一般都作为其他元素的容器。
他可以容纳其他内联元素和块状元素。我们可以把这个容器比喻成一个盒子。
2.内联元素
内联元素（行内元素）。
内联元素的表示方式，始终以行内逐个进行显示。
内联元素没有自己的形状，不能定义自己的宽高。他的宽高要以里面的内容决定。
内联元素也会遵循盒模型基本原则，但个别属性不能正确显示

盒模型常用属性有哪些

margin外边距
border边框
padding内边距
width宽
height高
图示：

代码实现：

<!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>盒子模型常用属性</title>
  </head>
  <style>
    body {
      margin: auto;
    }
    body [class="div"] {
      width: 100px;
      height: 100px;
      margin: 100px;
      border: solid;
      border-color: red;
      padding: 50px;
    }
  </style>
  <body>
    <div class="div">这里是内容</div>
  </body>
</html>

图示: box-sizing属性的解决了什么问题?

box-sizing属性的解决了什么问题?解决了布局的简化和计算的方便
图示（没有使用box-sizing前）：

图示（使用box-sizing后）：

代码：

<!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>盒子模型常用属性</title>
  </head>
  <style>
    .box {
      width: 150px;
      height: 150px;
      margin: 15px;
      padding: 10px;
      border: red solid 5px;
    }
    .box {
      box-sizing: border-box;
    }
  </style>
  <body>
    <div class="box">这里是内容</div>
    <div class="box">这里是内容2</div>
  </body>
</html>

盒模型与字体图标使用

盒模型与字体图标使用

字体图标使用

理解布局的原则与元素的默认排列方式与元素类型.理解布局的原则与元素的默认排列方式与元素类型.

布局的原则:

元素的默认排列方式：

元素类型：

盒模型常用属性有哪些

图示: box-sizing属性的解决了什么问题?

更多相关文章

随机推荐