欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

0701作业

程序员文章站 2024-01-04 10:50:28
...

字体图标、布局原理、盒模型

1.字体图标的用法实例

字体图标使用阿里图标[https://www.iconfont.cn/]

登录后下载所需图标文件，将font_icon文件夹中的iconfont.css文件引入文档中即可使用。

  • 直接引入文档中
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.     <title>字体图标</title>
    8. 

  8.     <link rel="stylesheet" href="./font_icon/iconfont.css">
    9. 

  9.     <style>
    10. 

  10.         .icon-kefu{
    11. 

  11.             font-size: 2em;
    12. 

  12.             color: skyblue;
    13. 

  13.         }
    14. 

  14.         .icon-gouwuche{
    15. 

  15.             font-size: 3em ;
    16. 

  16.             color: tomato;
    17. 

  17.         }
    18. 

  18.     </style>
    19. 

  19. </head>
    20. 

  20. <body>
    21. 

  21.     <span class="iconfont icon-kefu"></span>
    22. 

  22.     <span class="iconfont icon-shezhi"></span>
    23. 

  23.     <span class="iconfont icon-gouwuche"></span>
    24. 

  24. </body>
    25. 

  25. </html>
    26.
  • 通过引入css文件来访问该图标（更推荐这种方式 ，在主文档中会更简洁，并且在后期的维护中也更方便的调整字体图标的样式）

html文件：

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.     <title>字体图标，引用css样式表</title>
    8. 

  8.     <link rel="stylesheet" href="./style1.css">
    9. 

  9. </head>
    10. 

  10. <body>
    11. 

  11.     <span class="iconfont icon-kefu"></span>
    12. 

  12.     <span class="iconfont icon-shezhi"></span>
    13. 

  13.     <span class="iconfont icon-gouwuche"></span>
    14. 

  14. </body>
    15. 

  15. </html>
    16.

css文件：

    

  1. @import url("./font_icon/iconfont.css");
    2. 

    3. 

  3. /* 以下是用户自定义的字体图标样式 */
    4. 

  4. .icon-kefu{
    5. 

  5.     font-size: 2em;
    6. 

  6.     color: skyblue;
    7. 

  7. }
    8. 

  8. .icon-gouwuche{
    9. 

  9.     font-size: 3em ;
    10. 

  10.     color: tomato;
    11. 

  11. }
    12.

2.布局的原则与元素的默认排列方式与元素类型

  • 布局的原则与元素的默认排列方式

布局的前提 宽度受限，高度不受限

排列方式有两种 水平布局和垂直布局

默认的内联元素布局是按照html文档的元素顺序从左向右依次排列（文档流），当前行没有空间之后，自动将元素转入下一行

块元素独占一行

  • 元素类型：

内联元素：display:inline
块元素：display:block

3.盒模型的常用属性

  1. width
  2. height
  3. border
  4. padding
  5. margin
  6. box-sizing: 改变了盒子大小的计算方式

演示代码：

    

  1. <div class="box">Hello World!</div>
    2. 

  2. <div class="box">Hello World!</div>
    3. 

    4. 

  4. <style>
    5. 

  5.         .box {
    6. 

  6.             width: 150px;
    7. 

  7.             height: 150px  ; 
    8. 

    9. 

  9.             border: 5px dashed red;
    10. 

    11. 

  11.             background-color: violet;
    12. 

  12.             background-clip: content-box;
    13. 

    14. 

  14.             padding: 10px;
    15. 

  15.             margin: 15px;
    16. 

  16.             }
    17. 

    18. 

  18.             .box{
    19. 

  19.             /* border-box : width / height = padding + border + width/height */
    20. 

  20.             box-sizing: border-box;
    21. 

  21.             /* border-box : width / height = width/height */
    22. 

  22.             /* box-sizing: content-box; */
    23. 

  23.         }
    24. 

    25. 

  25.         /* 实现所有元素样式的初始化 */
    26. 

  26.         *{
    27. 

  27.             padding: 0;
    28. 

  28.             margin: 0;
    29. 

  29.             box-sizing: border-box;
    30. 

  30.         }
    31. 

  31.     </style>
    32.

box-sizing属性图示说明

border-box : width / height = padding + border + width/height */
box-sizing: border-box;
0701作业

默认计算：
border-box : width / height = width/height
box-sizing: content-box;
0701作业

上一篇：

下一篇：

推荐阅读