「CSS」常用单位，box-sizing，字体图标，定位原理

m 单位

.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 代码：

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx">

定位原理与应用

https://www.php.cn/code/36264.html
position:statkic 默认定位
控制偏移：

top: 5em;
left: 4em;
right: 3em;
bottom: 2em;

相对定位
position:relative
相对于他在的文档流中的父级或上级进行定位
<style> .box { position: relative; top: 5em; left: 4em; } </style>

SS 单位

1. 相对长度单位

相对长度单位指的是这个单位没有一个固定的值, 它的值受到其它元素属性(例如浏览器窗口的大小、父级元素的大小)的影响, 在响应式布局方面相对长度单位非常适用。下表中列举了 CSS 中支持的相对长度单位:

单位描述示例

em 相对于自身 font-size(字体大小)属性的值, 如果自身没有设置, 则继承父元素 font-size 属性的值, 1em 等同于 font-size 属性值, 例如 font-size 的值为 16px, 那么 1em 就等于 16px, 2em 就等于 32px p{line-height:2em;}

rem 相对于根元素<html>的 font-size 属性的大小, 比如根元素的 font-size 是 100px, 那么 1.2rem 就相当于 120px p{font-size: 1.2rem;}

ex 相对于所用字体中小写英文字母 x 的高度, 若无法确定 x 的高度则使用 0.5em 计算 p{font-size: 1ex;}

ch 相对于所用字体中数字 0 的高度, 若无法确定 0 的高度则使用 0.5em 计算 p{line-height: 3ch}

vw 相对于浏览器窗口的宽度, 1vw = 窗口宽度的 1% p{font-size: 5vw;}

vh 相对于浏览器窗口的高度, 1vh = 窗口高度的 1% p{font-size: 5vh;}

vmin vw 与 vh 中较小的值 p{font-size: 5vmin;}

vmax vw 与 vh 中较大的值 p{font-size: 5vmax;}

% 相对于父元素宽度或字体大小的百分比 div{width: 55%}

常用的单位: em、vw、vh、%

使用案例:

SS 有几个不同的单位用于表示长度。

一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。

长度有一个数字和单位组成如 10px, 2em, 等。

数字与单位之间不能出现空格。如果长度值为 0，则可以省略单位。

对于一些 CSS 属性，长度可以是负数。

有两种类型的长度单位：相对和绝对。

浏览器支持

下表中的数字表示支持该长度单位的最低浏览器版本。

长度单位
em, ex, %, px, cm, mm, in, pt, pc	1.0	3.0	1.0	1.0	3.5
ch	27.0	9.0	1.0	7.0	20.0
rem	4.0	9.0	3.6	4.1	11.6
vh, vw	20.0	9.0	19.0	6.0	20.0
vmin	20.0	9.0*	19.0	6.0	20.0
vmax	26.0	不支持	19.0	不支持	20.0

注意: Internet Explorer 9 通过不标准的名称 vm 来支持 vmin 。

相对长度

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。

单位	描述	在线实例
em	它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；	尝试一下
ex	依赖于英文子母小 x 的高度	尝试一下
ch	数字 0 的宽度
rem	根元素（html）的 font-size
vw	viewpoint width，视窗宽度，1vw=视窗宽度的1%	尝试一下
vh	viewpoint height，视窗高度，1vh=视窗高度的1%	尝试一下
vmin	vw和vh中较小的那个。	尝试一下
vmax	vw和vh中较大的那个。	尝试一下
%

绝对长度

绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

提示:

rem与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

单位	描述	在线实例
cm	厘米	尝试一下
mm	毫米	尝试一下
in	英寸 (1in = 96px = 2.54cm)	尝试一下
px *	像素 (1px = 1/96th of 1in)	尝试一下
pt	point，大约1/72英寸； (1pt = 1/72in)	尝试一下
pc	pica，大约6pt，1/6英寸； (1pc = 12 pt)	尝试一下

像素或许被认为是最好的"设备像素"，而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：笔记篇-如何灵活地使用HTML标签？
下一篇：“图片滑动样式”修改HTML教程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商