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");
  2. .icon-aichegujiabeifen7{
  3. font-size: 2em;
  4. color: skyblue;
  5. }
  6. .icon-zhuanjiadayibeifen{
  7. font-size: 2em;
  8. color: coral;
  9. }

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. }
  9. .box2 {
  10. width: 150px;
  11. height: 150px;
  12. border: 5px solid rgb(200, 255, 0);
  13. background-color: rgb(130, 141, 238);
  14. padding: 10px;
  15. margin: 15px;
  16. }

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

更多相关文章

  1. 图标以及盒模型
  2. html之盒模型,及字体图标的使用
  3. 字体图标的用法和布局的原则与元素
  4. 0701作业
  5. php学习第四天
  6. html字体图标及盒模型练习
  7. 字体图标,布局与盒模型
  8. 图标使用、盒模型、box-sizing、百分比布局vm vh
  9. 前端作业-CSS1

随机推荐

  1. 混合内容下的浏览器行为 [每日前端夜话(0
  2. 偷学Python第五天|循环结构,附练习案例
  3. 我在北京前端面试那些事!
  4. 聊聊 Array 中的一个小坑 [每日前端夜话(
  5. 手把手教你使用Pygame制作飞机大战小游戏
  6. 理解Redis单线程运行模式
  7. 容易被忽略的CSS安全性 [每日前端夜话(0x
  8. 那个三本的自学的家伙转前端这五个月经历
  9. Chrome将内置原生的懒加载功能
  10. 有了这个VSCode神器,从此爱上调试代码