前言：
如今看官们对“css中的box”都比较关怀，各位老铁们都想要知道一些“css中的box”的相关知识。那么小编同时在网络上搜集了一些有关“css中的box””的相关文章，希望小伙伴们能喜欢，同学们一起来学习一下吧！em 单位
.CSS { font-size:16px; }上下文定义 font-size rem 就会按这个值定义em: 根据元素的上下文来确定它的值 1em = 16pxrem 单位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>字体图标参考网址：
方法一：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">
第二步：挑选相应图标并获取类名，应用于页面：<span class="iconfont icon-xxx">定位原理与应用
position: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>标签： #css中的box
