1 字体图标的用法
<!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="./zy.css"></head><body><div class="A"><span class="iconfont icon-Chart"></span><!-- 引用字体图标的代码 <span class="iconfont icon-图标名"></span> --></div><span class="iconfont icon-Loop"></span></body></html>
zy.css
@import url(./font_zy/iconfont.css);@import url(./font_1/iconfont.css);@import url(./font_2/iconfont.css);/* 引用下载好的字体图标文件样式 */.icon-Loop {color: blue;font-size: 3em;}.icon-Chart{color: blue;/* 改变图标颜色 */font-size: 5em;/* 改变图标大小 */}
2 按自己理解写一下布局的原则与元素的默认排列方式与元素类型?
布局原则
遵守从左到右，从上往下的布局原则元素默认的排列方式
html中的元素默认在浏览器中按照文档流的顺序排列，且排列顺序与html的书写顺序一致（写在前面的显示在前面）
水平排列的是内联元素 垂直排列的是块元素- 元素的类型
内联元素
任何元素默认的就是内联元素：display:inline
块级元素：默认就独占一行：display:block
盒模型常用属性有哪些,实例演示;
- width 宽度
- height 高度
- border 边框
- padding 内边距
- margin 外边距
<!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><style>.box{height: 150px;width: 150px;background-color: bisque;/* 让背景色不覆盖到内边距 */background-clip: content-box;/* border边框 的值 有solid 实线 dashed 虚线 */border:5px dashed red;/* 可以通过添加内边框，让内容与边框之间可以呼吸 */padding: 10px;/* 外边距 */margin: 15px;}/* 为了简化布局，计算方便，我们通常直观的认为盒子的width,height应该就是盒子的最终大小 */.box{/*border-box width/height = padding +border+ width/height */box-sizing: border-box;/* content-box:width/height=width/height 默认值 *//* box-sizing: content-box; */}/* box-sizing: border-box; 计算盒子大小时，将内边距与边框全部计算在内，所以，width,height就是最终大小，从而简化布局 *//* 实现所有元素样式的初始化 */*{padding: 0;margin: 0;box-sizing: border-box;}/* 盒模型常用属性1. width2. height3. border4. padding5. margin *//* box-sizing:改变盒子大小的计算方式 */</style></head><body><div class="box"></div><div class="box"></div></body></html>
4. 图示: box-sizing属性的解决了什么问题?
box-sizing:改变盒子大小的计算方式
border-box width/height = padding +border+ width/height
计算盒子大小时，将内边距与边框全部计算在内content-box:width/height=width/height 默认值为content-box
计算盒子大小时，将内边距与边框不计算在内