課程作業(yè)：

1. 實(shí)例演示字體圖標(biāo)的用法;

2. 按自己理解寫(xiě)一下布局的原則與元素的默認(rèn)排列方式與元素類型?

3. 盒模型常用屬性有哪些,實(shí)例演示;

4. 圖示: box-sizing屬性的解決了什么問(wèn)題?

作業(yè)內(nèi)容：

1、實(shí)例演示字體圖標(biāo)的用法;

1.1 方法1：下載字體圖標(biāo)項(xiàng)目文件到本地部署

第01步：在阿里圖標(biāo)Iconfont中添加需要的圖標(biāo)到項(xiàng)目中，并下載解壓到網(wǎng)站根目錄

第02步：html文件中引用css文件并關(guān)聯(lián)圖標(biāo)

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

第01步：獲取iconfont在線圖標(biāo)的專屬css鏈接

第02步：html文件中引用iconfot的css鏈接并關(guān)聯(lián)圖標(biāo)

2、按自己理解寫(xiě)一下布局的原則與元素的默認(rèn)排列方式與元素類型?

布局原則：

布局的一個(gè)大前提是：寬度受限，高度無(wú)限

元素的默認(rèn)排列方式：

在HTML中文檔元素在瀏覽器中默認(rèn)是按照文檔書(shū)寫(xiě)順序進(jìn)行排列，也就是寫(xiě)到前面的就是顯示在前面而不會(huì)打亂；而它的排列方式只有垂直和水平，默認(rèn)是先水平，如果排列不下再換行按照垂直方向進(jìn)行排列

元素類型：

元素分為兩類：

內(nèi)聯(lián)元素和塊元素，對(duì)應(yīng)的排列方式與頁(yè)面元素的排列方式是一致的；

• 概念1：任何元素默認(rèn)的就是內(nèi)聯(lián)元素（由左到右）：display：inline （水平排列），當(dāng)?shù)谝慌艣](méi)有空間的時(shí)候就會(huì)換行顯示

• 概念2：不是所有的元素都是內(nèi)聯(lián)元素，有些元素會(huì)獨(dú)占一行，比如塊元素 / display:block 塊元素（垂直排列）會(huì)自動(dòng)添加換行

所以，頁(yè)面中的所有元素，都是以一個(gè)可視的矩形塊進(jìn)行排列布局（矩形塊就是盒子）

總結(jié)來(lái)說(shuō)就是：所有頁(yè)面是一個(gè)二維空間，只有寬和高！

3、盒模型常用屬性有哪些,實(shí)例演示;

首先，盒模型用類比的方式可把它看做是一個(gè)快遞包裹！兩個(gè)快遞包裹間的距離就是margin(外邊距)，快遞包裹的紙皮就是border(邊框)，打開(kāi)快遞包裹，填充物料就是padding(內(nèi)邊距)，把填充物料打開(kāi)看到了你的物品，那就是content（寬度×高度組成）

• 盒模型常用屬性：width(寬度) | height(高度) | border(邊框） | padding(內(nèi)邊距) | margin(外邊距)

4、圖示: box-sizing屬性的解決了什么問(wèn)題?

解決了布局中盒子大小的計(jì)算方式，從而簡(jiǎn)化了布局。在計(jì)算盒子大小時(shí)，可以將內(nèi)邊距與邊框全部計(jì)算在內(nèi)，所以width和height就是最終大小。

在下圖右側(cè)中的實(shí)際效果來(lái)看，左邊運(yùn)用了box-sizing：border-box；來(lái)計(jì)算我所需要盒模型大小（150×150），最終得出的盒模型和我需要的是一樣的，就不需要再去通過(guò)加減計(jì)算來(lái)得出所需要的padding、margin、border；

批改老師：PHPz

批改狀態(tài)：合格

老師批語(yǔ)：