单位em和rem区别，box-sizing定义边界，VW和VH，字体图标，定位原理
16lz
2021-03-29
em 和 rem
em 单位
.CSS { font-size:16px; }
- 上下文定义 font-size rem 就会按这个值定义
- em: 根据元素的上下文来确定它的值 1em = 16px
rem 单位
html{ font-size:16px; }
根元素定义 font-size rem 就会按这个值定义
rem: 根据根元素的字号来设置 1rem = 10px;
box-sizing
盒模型, 定义边界是否包含 padding 和 border 的值box-sizing:border-box
- 包含 padding 和 border 的值
box-sizing:content-box
- 转为标准盒子，不含 padding 和 border 的值（默认）
CSS 初始化
一般我们写 CSS 样式都会先写初始化
<style>* {margin: 0;padding: 0;box-sizing: border-box;}</style>
- 推荐 CSS 样式初始化写法
vh 和 vw 视口 单位
浏览器用于显示文档的界面就是视口
手机端为了显示全 PC 界面，默认为 980px
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- width=device-width 宽度对于当前设备宽度
浏览器设备当前界面默认被等分为 100
- vh: 1vh = 视口高度的 1/100 ， vh(view hgight)
- vw: 1vw = 视口宽度的 1/100 ， vw(viem width)
<!-- 例：定义宽为 50%，高为 25% --><style>.box {background-color: lightgreen;width: 50vw;height: 25vh;}</style>
字体图标
参考网址：https://www.iconfont.cn/
方法一：Unicode 方式
<style>/* 自定义字体 */@font-face {font-family: "my_iconfont";src: url("font_ico/iconfont.eot");src: url("font_ico/iconfont.eot?#iefix") format("embedded-opentype"), url("font_ico/iconfont.woff2")format("woff2"), url("font_ico/iconfont.woff") format("woff"), url("font_ico/iconfont.ttf")format("truetype"), url("font_ico/iconfont.svg#iconfont") format("svg");}/* 定义一个类来引用自定义的字体my_iconfont */.iconfont2 {font-family: "my_iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}</style>
引入到 html 中<span class="iconfont2"></span>
方法二：Font class 方式
- 第一步：引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="./iconfont.css">
- 第二步：挑选相应图标并获取类名，应用于页面：
" class="reference-link"><span class="iconfont icon-xxx">
定位原理与应用
https://www.php.cn/code/36264.htmlposition:statkic 默认定位
控制偏移：
top: 5em;left: 4em;right: 3em;bottom: 2em;
相对定位
position:relative
相对于他在的文档流中的父级或上级进行定位<style>.box {position: relative;top: 5em;left: 4em;}</style>
绝对定位
position:absolute;
绝对定位元素脱离了文档流
文档流：显示顺序与书写顺序一致
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。<style>.box {position: absolute;top: 5em;left: 4em;}</style>
- 固定定位
position:fixed;
生成固定定位的元素，相对于浏览器窗口进行定位。例如：浮窗客服功能<style>.box {position: fixed;top: 5em;left: 4em;}</style>
- 粘性定位
position: sticky;
基于用户的滚动位置来定位。
例如导航条，在拉到窗口边界时，固定显示。<style>.box {position: sticky;top: 5em;left: 4em;}</style>
更多相关文章
- 第四课 box-sizing功能示例、相对定位与绝对定位的区别与联系
- box-sizing功能、相对定位与绝对定位
- 选择器优先级、模块化样式组件、伪类选择器
- 1. 实例演示box-sizing属性; 2. 实例演示常用的元素居中方式
- CSS：box-sizing理解与相对定位与绝对定位理解
- css基础：box-sizing功能与定位功能的应用
- em,rem的原理与应用场景,分析 rem / em /vh/ vw的区别与联系
- 盒模型box-sizing功能及相对定位、绝对定位应用
- CSS盒模型以及CSS定位