微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 字体图标用法与盒模型页面布局

博主信息

博文 9

粉丝 0

访问量 11121

专题推荐

更多>

1.字体图标的用法

图表来源

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

页面显示

代码结构

代码

car.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标</title>
    <link rel="stylesheet" href="./icons.css" />
</head>
<body>
    <span class="iconfont icon-aichegujiabeifen7"></span>
    <span class="iconfont icon-zhuanjiadayibeifen"></span>
</body>
</html>

icons.css

@import url("./carIcons/iconfont.css");
.icon-aichegujiabeifen7{
    font-size: 2em;
    color: skyblue;
  }
  .icon-zhuanjiadayibeifen{
    font-size: 2em;
    color: coral;
  }

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型</title>
    <link rel="stylesheet" href="./box.css">
</head>
<body>
    <div class="box1">这是第一个盒模型</div>
    <div class="box2">这是第二个盒模型</div>
</body>
</html>

css

.box1 {
    width: 150px;
    height: 150px;
    border: 5px solid red;
    background-color: violet;
    padding: 10px;
    margin: 15px;
  }
.box2 {
    width: 150px;
    height: 150px;
    border: 5px solid rgb(200, 255, 0);
    background-color: rgb(130, 141, 238);
    padding: 10px;
    margin: 15px;
  }

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 默认值

批改老师：