字体图标、布局原理以及盒模型实例操作及思考

课程作业：

1. 实例演示字体图标的用法;

2. 按自己理解写一下布局的原则与元素的默认排列方式与元素类型?

3. 盒模型常用属性有哪些,实例演示;

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

作业内容：

1、实例演示字体图标的用法;

1.1 方法1：下载字体图标项目文件到本地部署

第01步：在阿里图标Iconfont中添加需要的图标到项目中，并下载解压到网站根目录

第02步：html文件中引用css文件并关联图标

1.2 方法2：在线引入iconfont的CSS文件

第01步：获取iconfont在线图标的专属css链接

第02步：html文件中引用iconfot的css链接并关联图标

2、按自己理解写一下布局的原则与元素的默认排列方式与元素类型?

布局原则：

布局的一个大前提是：宽度受限，高度无限

元素的默认排列方式：

在HTML中文档元素在浏览器中默认是按照文档书写顺序进行排列，也就是写到前面的就是显示在前面而不会打乱；而它的排列方式只有垂直和水平，默认是先水平，如果排列不下再换行按照垂直方向进行排列

元素类型：

元素分为两类：

内联元素和块元素，对应的排列方式与页面元素的排列方式是一致的；

• 概念1：任何元素默认的就是内联元素（由左到右）：display：inline （水平排列），当第一排没有空间的时候就会换行显示

• 概念2：不是所有的元素都是内联元素，有些元素会独占一行，比如块元素 / display:block 块元素（垂直排列）会自动添加换行

所以，页面中的所有元素，都是以一个可视的矩形块进行排列布局（矩形块就是盒子）

总结来说就是：所有页面是一个二维空间，只有宽和高！

3、盒模型常用属性有哪些,实例演示;

首先，盒模型用类比的方式可把它看做是一个快递包裹！两个快递包裹间的距离就是margin(外边距)，快递包裹的纸皮就是border(边框)，打开快递包裹，填充物料就是padding(内边距)，把填充物料打开看到了你的物品，那就是content（宽度×高度组成）

• 盒模型常用属性：width(宽度) | height(高度) | border(边框） | padding(内边距) | margin(外边距)

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

解决了布局中盒子大小的计算方式，从而简化了布局。在计算盒子大小时，可以将内边距与边框全部计算在内，所以width和height就是最终大小。

在下图右侧中的实际效果来看，左边运用了box-sizing：border-box；来计算我所需要盒模型大小（150×150），最终得出的盒模型和我需要的是一样的，就不需要再去通过加减计算来得出所需要的padding、margin、border；