字体图标、布局原理以及盒模型实例操作及思考
课程作业：
实例演示字体图标的用法;
按自己理解写一下布局的原则与元素的默认排列方式与元素类型?
盒模型常用属性有哪些,实例演示;
图示: 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；
更多相关文章
- CSS-作业
- 字体图标的使用和盒模型的理解与box-sizing解决了什么问题以及布
- 伪类选择器+盒模型+icon的使用方法+百分比设置元素大小
- 盒模型与字体图标使用
- 字体图标用法与盒模型页面布局
- 图标以及盒模型
- 字体图标的用法和布局的原则与元素
- PHP Redis函数查询
- 0701作业