html之盒模型，及字体图标的使用

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

  1. 答：下方实例代码

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

  1. 答：从左到右，依次排列，块级元素，默认占用一整行，如div

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

  1. 答：下方实例代码

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

  1. 答：box-sizing属性可固定宽度不往外扩张，常用box-sizing:border-box,无论如何调整，其总大小不会改变
  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="./font_icon/iconfont.css">
  9. </head>
  10. <body>
  11.     <style>
  12.         *{
  13.             margin: 0px;
  14.             padding: 0px;
  15.             box-sizing: border-box;
  16.         }
  17.         .font-div{
  18.             width: 100px;
  19.             height: 100px;
  20.             padding: 15px;
  21.             text-align: center;
  22.         }
  23.         .box-div{
  24.             width: 300px;
  25.             height: 300px;
  26.             text-align: center;
  27.             padding: 50px;
  28.             margin-left: 50px;
  29.         }
  30.     </style>
  31.     <!-- 字体图标的使用 -->
  32.     <div class="font-div">
  33.         <!-- 1. 引入图标字体<link rel="stylesheet" href="./font_icon/iconfont.css"> -->
  34.         <!-- 2. 根据使用文档只用即可，一般采用class 方式 -->
  35.         <div>
  36.             字体图标
  37.         </div>
  38.         <span class="iconfont icon-huanbaopingtai-biangengguanli"></span>
  39.         <span class="iconfont icon-huanbaopingtai-EHSQshequ"></span>
  40.     </div>
  41.     <!-- 常用盒模型属性 -->
  42.     <div class="box-div">
  43.         <div>盒模型常用属性</div>
  44.         <div>width   宽</div>
  45.         <div>height  高</div>
  46.         <div>padding 内边距</div>
  47.         <div>margin  外边距</div>
  48.     </div>
  49. </body>
  50. </html>

更多相关文章

  1. 字体图标的用法和布局的原则与元素
  2. html字体图标及盒模型练习
  3. 字体图标，布局与盒模型
  4. 图标使用、盒模型、box-sizing、百分比布局vm vh
  5. 第二天 HTML标签与属性
  6. css语法介绍
  7. 条件渲染v-if v-show、计算属性和监听器
  8. JS 对象基本用法
  9. ThinkPHP 时间戳，写错了，好尴尬

随机推荐

  1. Android(安卓)修改系统时区导致SimpleDat
  2. Android Jetpack让Android一飞冲天
  3. [数据图表]Android军团超级黑马亚马逊平
  4. 定时任务方案
  5. Android实现电池管理系统
  6. 【Android的从零单排开发日记】之入门篇（
  7. Android（四）数据存储之四网络
  8. android 结合源码深入剖析AsyncTask机制
  9. 播放器适配经验总结――Android
  10. 饺子播放器、IjkVideoView播放器的简单使