简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 字体图标的用法 盒模型的演示 box-sizing的用法
Blogger Information
Blog 12
fans 0
comment 0
visits 6516
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
字体图标的用法 盒模型的演示 box-sizing的用法
Giesen?
Original
484 people have browsed it

1 字体图标的用法

  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="./zy.css">
  9. </head>
  10. <body>
  11.     <div class="A">
  12.     <span class="iconfont icon-Chart"></span>
  13.     <!-- 引用字体图标的代码 <span class="iconfont icon-图标名"></span> -->
  14.     </div>
  15.     <span class="iconfont icon-Loop"></span>
  16. </body>
  17. </html>

zy.css

  1. @import url(./font_zy/iconfont.css);
  2. @import url(./font_1/iconfont.css);
  3. @import url(./font_2/iconfont.css);
  4. /* 引用下载好的字体图标文件样式 */
  5. .icon-Loop {
  6.     color: blue;
  7.     font-size: 3em;
  8. }
  9. .icon-Chart{
  10.     color: blue;
  11.     /* 改变图标颜色 */
  12.     font-size: 5em;
  13.     /* 改变图标大小 */
  15. }

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

  1. 布局原则
    遵守从左到右，从上往下的布局原则

  2. 元素默认的排列方式
    html中的元素默认在浏览器中按照文档流的顺序排列，且排列顺序与html的书写顺序一致（写在前面的显示在前面）
    水平排列的是内联元素 垂直排列的是块元素

  3. 元素的类型
    内联元素
    任何元素默认的就是内联元素：display:inline

块级元素：默认就独占一行：display:block

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

  1. width 宽度
  2. height 高度
  3. border 边框
  4. padding 内边距
  5. 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>Document</title>
  8.     <style>
  9.         .box{
  10.             height: 150px;
  11.             width: 150px;
  12.             background-color: bisque;
  13.             /* 让背景色不覆盖到内边距 */
  14.             background-clip: content-box;
  15.            /* border边框 的值 有solid 实线  dashed 虚线 */
  16.             border:5px dashed red;
  17.             /* 可以通过添加内边框，让内容与边框之间可以呼吸 */
  18.             padding: 10px;
  19.             /* 外边距 */
  20.             margin: 15px;
  21.         }
  22.         /* 为了简化布局，计算方便，我们通常直观的认为盒子的width,height应该就是盒子的最终大小 */
  23.       .box{
  24.            /*border-box width/height = padding +border+ width/height */
  25.           box-sizing: border-box;
  26.           /* content-box:width/height=width/height 默认值 */
  27.             /* box-sizing: content-box;  */
  28.       }
  29.       /* box-sizing: border-box; 计算盒子大小时，将内边距与边框全部计算在内，
  30.       所以，width,height就是最终大小，从而简化布局 */
  31.        /* 实现所有元素样式的初始化 */
  32.       *{
  33.           padding: 0;
  34.           margin: 0;
  35.           box-sizing: border-box;
  36.       }
  37.         /* 盒模型常用属性
  38.         1. width
  39.         2. height
  40.         3. border
  41.         4. padding
  42.         5. margin */
  43.         /* box-sizing:改变盒子大小的计算方式 */
  44.     </style>
  45. </head>
  46. <body>
  47.     <div class="box">
  48.     </div>
  49.     <div class="box">
  50.     </div>
  51. </body>
  52. </html>

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

box-sizing:改变盒子大小的计算方式

  • border-box width/height = padding +border+ width/height
    计算盒子大小时，将内边距与边框全部计算在内

  • content-box:width/height=width/height 默认值为content-box
    计算盒子大小时，将内边距与边框不计算在内

Correcting teacher：天蓬老师天蓬老师

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！