简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > html之盒模型，及字体图标的使用
Blogger Information
Blog 34
fans 0
comment 0
visits 20275
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html之盒模型，及字体图标的使用
小庄
Original
727 people have browsed it

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>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！