Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 0701作业
Blogger Information
Blog 5
fans 0
comment 0
visits 2267
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
0701作业
AlUN
Original
375 people have browsed it

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

1.字体图标的用法实例

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

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

  • 直接引入文档中
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>字体图标</title>
  8.     <link rel="stylesheet" href="./font_icon/iconfont.css">
  9.     <style>
  10.         .icon-kefu{
  11.             font-size: 2em;
  12.             color: skyblue;
  13.         }
  14.         .icon-gouwuche{
  15.             font-size: 3em ;
  16.             color: tomato;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <span class="iconfont icon-kefu"></span>
  22.     <span class="iconfont icon-shezhi"></span>
  23.     <span class="iconfont icon-gouwuche"></span>
  24. </body>
  25. </html>
  • 通过引入css文件来访问该图标（更推荐这种方式 ，在主文档中会更简洁，并且在后期的维护中也更方便的调整字体图标的样式）

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>字体图标，引用css样式表</title>
  8.     <link rel="stylesheet" href="./style1.css">
  9. </head>
  10. <body>
  11.     <span class="iconfont icon-kefu"></span>
  12.     <span class="iconfont icon-shezhi"></span>
  13.     <span class="iconfont icon-gouwuche"></span>
  14. </body>
  15. </html>

css文件：

  1. @import url("./font_icon/iconfont.css");
  3. /* 以下是用户自定义的字体图标样式 */
  4. .icon-kefu{
  5.     font-size: 2em;
  6.     color: skyblue;
  7. }
  8. .icon-gouwuche{
  9.     font-size: 3em ;
  10.     color: tomato;
  11. }

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. <div class="box">Hello World!</div>
  4. <style>
  5.         .box {
  6.             width: 150px;
  7.             height: 150px  ; 
  9.             border: 5px dashed red;
  11.             background-color: violet;
  12.             background-clip: content-box;
  14.             padding: 10px;
  15.             margin: 15px;
  16.             }
  18.             .box{
  19.             /* border-box : width / height = padding + border + width/height */
  20.             box-sizing: border-box;
  21.             /* border-box : width / height = width/height */
  22.             /* box-sizing: content-box; */
  23.         }
  25.         /* 实现所有元素样式的初始化 */
  26.         *{
  27.             padding: 0;
  28.             margin: 0;
  29.             box-sizing: border-box;
  30.         }
  31.     </style>

box-sizing属性图示说明

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

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

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