字体图标 盒模型作业

作业标题: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应该就是盒子最终的大小

更多相关文章

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

随机推荐

  1. 如何将每个单词都包含在一个span中,同时保
  2. 长征火箭残骸坠落湖南 砸坏民宅和高压线
  3. 为什么从HTML的select控件中获得的值为空
  4. android 中的线性布局与相对布局
  5. 如何将这些Twitter bootstrap 3导航栏链
  6. Ubuntu的FireFox无法使用HTML5播放器的解
  7. 使用HTML5 canvas做地图(3)图片加载平移放
  8. html——ul、li导航栏居中的两种办法
  9. 如何使用CSS精灵重复背景图像?
  10. 前端html数组去重的方法