Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 图标，布局，元素类型，盒子模型
Blogger Information
Blog 4
fans 0
comment 0
visits 3057
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
图标，布局，元素类型，盒子模型
worldexecuteme
Original
495 people have browsed it

图标使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         /*字体代码引入*/
  11.         @font-face {
  12.             font-family: 'iconfont';
  13.             src: url('./icon/iconfont.ttf?t=1625494972187') format('truetype');
  14.         }
  16.         .iconfont {
  17.             font-family: "iconfont" !important;
  18.             font-size: 16px;
  19.             font-style: normal;
  20.             -webkit-font-smoothing: antialiased;
  21.             -moz-osx-font-smoothing: grayscale;
  22.         }
  23.         /********************************************/
  25.        li:nth-of-type(n) {
  26.            list-style-type: none;
  27.        }
  28.     </style>
  29. </head>
  30.     <body>
  31.         <ul>
  32.             <li><span class="iconfont">&#xe685; Rust</span></li>
  33.             <li><span class="iconfont">&#xe60f; PHP</span></li>
  34.             <li><span class="iconfont">&#xe636; User</li>
  35.         </ul>
  36.     </body>
  37. </html>

效果

布局与元素属性

html 文档的元素默认在浏览器的文档流中，一般从左向右。
元素可分为两类， 行内元素， 和块内元素。对应的排列方式与页面元素的排列方式是一致 所有页面是一个二维的空间, 只有宽和高二维空间中的元素排列只有二种方式: 水平, 垂直 默认先水平, 排列不下,再换行按垂直方向排列，只要这个元素的类型确定,例如是一个内联元素 display: inline,则这个元素 就水平排列, 一行显示不行就换行显示，如果这个元素的display:block, 就是一个块级元素，块元素二边默认会自动添加换行, 二边不允许存在其它元素,总是独占一行。

盒子模型

盒子模型常用属性有：width height border padding margin

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         .box {
  11.             /**
  12.             *margin是盒子的外边距，本事不在盒子大小的计算内。简写模式按顺时针。
  13.             */
  14.             margin: 10px 10px 10px 10px;
  15.             /**
  16.             *border是盒子的边框，改变他的值会改变真个盒子的大小。
  17.             */
  18.             border: solid 1px  red;
  19.             /**
  20.             *padding是盒子的内边距，改变他的值会改变真个盒子的大小。简写模式按顺时针。
  21.             */
  22.             padding: 10px 10px 10px 10px;
  23.             /**
  24.             *width&height是元素的宽高，改变他的值会改变真个盒子的大小。
  25.             */
  26.             width: 300px;
  27.             height: 300px;
  28.             background-color: blueviolet;
  30.         }
  31.         .box1 {
  32.             /*
  33.                 box-sizing: 会更改width, height 的计算方式
  34.                 将值设置为border-box, width的计算讲包括：border, padding
  35.             */
  36.             box-sizing: border-box;
  37.             width: 300px;
  38.             height: 300px;
  39.             padding: 10px;
  40.             border: 10px solid red;
  41.             background-color: blueviolet;
  42.         }
  43.     </style>
  44. </head>
  45.     <body>
  46.         <div class="box"></div>
  47.         <div class="box1"></div>
  48.     </body>
  49. </html>

box-sizing：border计算结果展示：

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