![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
字体图标的用法
选择自己喜欢的图标加入购物车然后下载到本地，将下载的文件解压-放入源码中，需要在哪个页面让他显示，就引入进去
第二步:引用方式（首先引用CSS，iconfont.css是下载文件中的CSS，路径必须填对）
<link rel="stylesheet" href="./88/iconfont.css">
<span class="iconfont icon-xxx"></span><span class="iconfont icon-hongbao-"></span>
.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>