Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 字体图标用法与盒模型页面布局
Blogger Information
Blog 9
fans 0
comment 0
visits 6872
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
字体图标用法与盒模型页面布局
guyuqing
Original
623 people have browsed it

1.字体图标的用法

图表来源

  • 可以从阿里巴巴矢量图标库下载
  • https://www.iconfont.cn/
  • 需要创建GitHub登录
  • 所需图标库下载至本地修改文件名称
  • 下载后内容与下图代码结构中carIcons文件相同

页面显示

代码结构

代码

car.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>字体图标</title>
  8.     <link rel="stylesheet" href="./icons.css" />
  9. </head>
  10. <body>
  11.     <span class="iconfont icon-aichegujiabeifen7"></span>
  12.     <span class="iconfont icon-zhuanjiadayibeifen"></span>
  13. </body>
  14. </html>

icons.css

  1. @import url("./carIcons/iconfont.css");
  3. .icon-aichegujiabeifen7{
  4.     font-size: 2em;
  5.     color: skyblue;
  6.   }
  7.   .icon-zhuanjiadayibeifen{
  8.     font-size: 2em;
  9.     color: coral;
  10.   }

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

网页布局原则

  • 先将大体框架写好，再完善细节
  • 尽可能不把样式直接写到元素的标签里，建立css文件统一管理样式，通过
    <link rel="stylesheet" href="./style1.css" />导入html中

元素的默认排列方式

  • html文档的元素默认在浏览器中按照文档流的顺序排列
    即写到前面的就显示在前面
  • 排列方式为默认先水平, 排列不下,再换行按垂直方向排列

元素类型

元素类型 默认样式 特点
内联元素 display: inline 水平排列, 一行显示不行就换行显示
块元素 display:block 块元素二边默认会自动添加换行, 二边不允许存在其它元素,总是独占一行

3.盒模型常用属性及实例

  • 页面中的所有元素,都是以一个可视的矩形块进行排列布局的。这个矩形块就是盒子,它的描述方式就是:”盒模型”。
  • 盒模型常用属性
    1.width 宽度
    2.height 高度
    3.border 边框
    4.padding 内边距
    5.margin 外边距
  • 盒模型结构
    外边距（margin）+ border（边框） + 内边距（padding）+ content（内容）

页面显示

代码

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>盒模型</title>
  8.     <link rel="stylesheet" href="./box.css">
  9. </head>
  10. <body>
  11.     <div class="box1">这是第一个盒模型</div>
  12.     <div class="box2">这是第二个盒模型</div>
  13. </body>
  14. </html>

css

  1. .box1 {
  2.     width: 150px;
  3.     height: 150px;
  4.     border: 5px solid red;
  5.     background-color: violet;
  6.     padding: 10px;
  7.     margin: 15px;
  8.   }
  10. .box2 {
  11.     width: 150px;
  12.     height: 150px;
  13.     border: 5px solid rgb(200, 255, 0);
  14.     background-color: rgb(130, 141, 238);
  15.     padding: 10px;
  16.     margin: 15px;
  17.   }

4.盒模型中box-sizing属性的解决了什么问题

在3.盒模型常用属性及实例的css属性中加入
box-sizing: border-box;
页面显示如下

追加box-sizing属性前，设置盒子宽度为150px,此时默认box-sizing:content-box;我们设置了content为150px，但是由于还设置了border:5px，padding:10px，margin:15px，因此盒子最终大小为
border+padding+margin+content=
15 + 5 + 10 + 150 + 15 + 5 + 10 = 210px
为了简化布局,计算方便, 我们通常直观的认为盒子的width,heigth应该就是盒子最终的大小
因此加入box-sizing: border-box;后
盒子宽度变为
5 + 10 + 120 + 5 + 10 = 150px

  • border-box: width/height = padding + border + width/height
  • content-box: width/height = width/height 默认值
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