字体图标 盒模型作业

作业标题：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>
  11. <body>
  12.   <span class="iconfont icon-weixin"></span>
  13. </body>
  14. </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">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>div</title>
  9.   <style>
  10.     .ddd{
  11.       width: 30vw;
  12.       height: 30vh;
  13.       border:1px solid red;
  14.       padding: 1px;
  15.       margin: 1px;
  16.     }
  17.   </style>
  18. </head>
  20. <body>  
  21.  <div class="ddd"></div>
  22. </body>
  23. </html>

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

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

更多相关文章

  1. 前端作业-在线QQ客服的固定定位&三行三列的定位布局
  2. flex容器以及属性
  3. flex容器与项目中常用的属性
  4. flex布局中容器及项目常用属性演示
  5. 2021.7.6表格作业，
  6. flex容器与项目的认识和常用属性
  7. flex初体验之常用属性练习
  8. 用户注册表单和上下文选择器
  9. web前端作业

随机推荐

  1. 你知道go程序的基本要素吗
  2. Go语言有没有优势？
  3. 如何使用golang的pprof包对程序进行性能
  4. 关于Golang 指针理解
  5. go语言导包时“.”和“_”的区别是什么？
  6. 详解Golang数组的传递
  7. 分享golang实现文件传输小demo
  8. go语言中run与build命令的区别是什么？
  9. 解决GO语言安装air框架时遇到go: inconsi
  10. 分享5种文件变更时自动重载Go程序的方法