字体图标
进入iconfont选择字体图片加入购物车下载使用
代码
<!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="./font_r22oh21fsy/iconfont.css"></head><body><style>.icon-fenlei{color: blueviolet;}</style><i class=" iconfont icon-fenlei"></i></body></html>
布局原则
文档流是网页中的一个位置，默认情况下页面的所有元素都在文档流中排列，分为块元素和行内元素
- 块元素在文档流中的特点
自上向下排列(独占一行)
默认宽度和元素一样
默认高度被内容撑开 - 行内元素在文档流中的特点
自左向右水平排列，如果一行中不足以容纳所有则切换到下一行继续自左向右水平排列
默认高度和宽度都被内容撑开
行内元素不支持设置宽度和高度
行内元素可以设置padding，但是垂直方向的padding不会影响页面的布局
行内元素支持水平方向外边距，不支持垂直方向的外边距盒子模型的理解
浏览器在渲染页面时，它会将页面中的每一个元素都看作成一个矩形盒子，想象成盒子以后，对于页面的布局就变成了如何摆放盒子
每一个从内到外都有以下几个部分组成 - 内容区(content)
- 内容区界定这个盒子能装多少东西
- 内边距(padding)
- 内容区和边框之间的距离
- 外边距
可选值：
content-box：默认值：内容盒子(width和height指定的是内容区的大小，如果设置了border和padding，那么会被增加到这个元素的宽高中)
border-box：width和height指定的是整个盒子的大小(如果设置了边框和外边距，也不回增加到这个元素中，内容的实际宽度是width减去(border+padding)的值)
