html之盒模型，及字体图标的使用
1. 实例演示字体图标的用法
答：下方实例代码
2. 按自己理解写一下布局的原则与元素的默认排列方式与元素类型?
答：从左到右，依次排列，块级元素，默认占用一整行，如div
3. 盒模型常用属性有哪些,实例演示
答：下方实例代码
4. 图示: box-sizing属性的解决了什么问题?
答：box-sizing属性可固定宽度不往外扩张，常用box-sizing:border-box,无论如何调整，其总大小不会改变
<!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_icon/iconfont.css"></head><body> <style> *{ margin: 0px; padding: 0px; box-sizing: border-box; } .font-div{ width: 100px; height: 100px; padding: 15px; text-align: center; } .box-div{ width: 300px; height: 300px; text-align: center; padding: 50px; margin-left: 50px; } </style> <!-- 字体图标的使用 --> <div class="font-div"> <!-- 1. 引入图标字体<link rel="stylesheet" href="./font_icon/iconfont.css"> --> <!-- 2. 根据使用文档只用即可，一般采用class 方式 --> <div> 字体图标 </div> <span class="iconfont icon-huanbaopingtai-biangengguanli"></span> <span class="iconfont icon-huanbaopingtai-EHSQshequ"></span> </div> <!-- 常用盒模型属性 --> <div class="box-div"> <div>盒模型常用属性</div> <div>width 宽</div> <div>height 高</div> <div>padding 内边距</div> <div>margin 外边距</div> </div></body></html>
