字体图标 盒模型作业

字体图标 盒模型作业

作业标题:0701作业
作业内容:

  1. 实例演示字体图标的用法;
  2. 按自己理解写一下布局的原则与元素的默认排列方式与元素类型?
  3. 盒模型常用属性有哪些,实例演示;
  4. 图示: box-sizing属性的解决了什么问题?

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

1.打开网址https://www.iconfont.cn

2.添加入库

3.右上角找到放进库的图,点击添加到项目

4.点击下载到本地

5.部署好了之后,代码如下
html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <link rel="stylesheet" href="style.css">
  9. </head>
  10. <body>
  11. <span class="iconfont icon-weixin"></span>
  12. </body>
  13. </html>

css:

  1. @import url('z/font_f/iconfont.css');


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

布局原则默认的是行满换行,
元素类型是 宽高,内边距外边距 边框线


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

  1. 盒子模型常用属性
  2. width
  3. height
  4. border
  5. padding
  6. margin
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>div</title>
  8. <style>
  9. .ddd{
  10. width: 30vw;
  11. height: 30vh;
  12. border:1px solid red;
  13. padding: 1px;
  14. margin: 1px;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div class="ddd"></div>
  20. </body>
  21. </html>

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

简化布局,计算方便,可以直接的认为盒子的width,heigth应该就是盒子最终的大小