图标以及盒模型
16lz
2021-07-03
1. 实例演示字体图标的用法;
<!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>Document</title>
<link rel="stylesheet" href="./sysle2.css" />
</head>
<body>
<h1>图标</h1>
<span class="iconfont icon-wahaha"></span>
<span class="iconfont icon-banana"></span>
<span class="iconfont icon-pingguo"></span>
</body>
</html>
@import url(iconfont.css);
.icon-wahaha {
font-size: 2em;
color: skyblue;
}
.icon-banana {
font-size: 8em;
color: rgb(162, 135, 235);
}
.icon-pingguo {
font-size: 100px;
color: rgb(235, 135, 177);
}
2. 按自己理解写一下布局的原则与元素的默认排列方式与元素类型?
布局按照默认从左到右,从上到下的结构。内联元素根据规定的size从左到右排列,右边排列满时自动切换到下一行。块元素独自占一行。
3. 盒模型常用属性有哪些,实例演示;
- width 宽
- height 高
- padding 填充(边框和内盒子之间)
- border 边框
- maring 边框外面的东西
图示: box-sizing属性的解决了什么问题?
重新定义了盒子以及其他元素计算的方式,更加方便吧。
更多相关文章
- 运营级在线客服/来客客服/带非常完整的搭建教程/带评价管理
- 字体图标的用法和布局的原则与元素
- php学习第四天
- html字体图标及盒模型练习
- 图标使用、盒模型、box-sizing、百分比布局vm vh
- 前端作业-CSS1
- 简述事件委托(事件代理)
- html元素table练习
- PHP算法