css 单位 和 css 尺寸 [第六天]

菜鸟前面，只讲了em和px，但其实css的单位远不止如此，所以今天菜鸟就为大家所说单位，还有就是尺寸属性！（这里尺寸属性不包括margin、padding、font-size、white-spacing、border-width…但这些又确实都可以用到单位！ ）

单位

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

长度由一个数字和单位组成，如： 10px, 2em…。

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

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

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

相对长度

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

em

主要是根据父元素的font-size大小，来进行相对长度的设定！

如当前文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。（注意：任意浏览器的默认字体都是16px，所有未经调整的浏览器都符合: 1em=16px）

另一点干货：

重学前端 概括元素（行内元素,块元素,行内块元素）和属性 / 大小写不敏感 / 详解标题标签 [em和px、源css] / 详解分割线hr标签 / 初见border / 详解auto（第二天）

ex

依赖于小写字母x的高度，不常用，因为小写字母x的高度确实不好确定。

ex和 字体大小 和 字体(font-family) 有关，毕竟和小写x的高度有关，所以如果 字体大小 或 字体 改变，小写x的高度会变化，那么子元素的ex也会改变！（注意：有些字体是会影响字的宽高的）

实例：

<div>
    <span style="display:inline-block;height: 8.65px;line-height: 8.65px;">xspan>
    <div style="width: 20ex;height: 20ex;background-color: blue;">div>
    <div style="width: 320px;height: 320px;background-color: green;">div>
div>
<div style="font-size: 32px;">
    <span style="display:inline-block;height: 17.3px;line-height: 17.3px;">xspan>
    <div style="width: 20ex;height: 20ex;background-color: blueviolet;">div>
div>

运行结果：
第二个div中的div的宽高，正好是第一个div中的第一个div的两倍！不管哪一个，宽高都是该字体大小下小写x的高度的20倍！

注意：
这里菜鸟尝试用span来判断小写x的高度，但事实证明，很难确定！菜鸟这里的span，goole上看着好像基本上和小写的x差不多，读者简单理解就好！

ch

依赖于数字0的宽度，不常用！

ch和 字体大小 和 字体有关，毕竟和数字0的宽度有关，所以如果 字体大小 或 字体 改变，数字0的宽度会变化，那么子元素的ch也会改变！（注意：有些字体是会影响字的宽高的）

实例：

<div>
    <spa>0spa>
    <div style="width: 20ch;height: 20ch;background-color: blue;">div>
    <div style="width: 320px;height: 320px;background-color: green;">div>
div>
<div style="font-size: 32px;">
    <span>0span>
    <div style="width: 20ch;height: 20ch;background-color: blueviolet;">div>
div>

运行结果：
第二个div中的div的宽高，正好是第一个div中的第一个div的两倍！不管哪一个，宽高都是该字体大小下数字0的宽度的20倍！（注意：在Firefox中更加好看，因为正好0的宽度是整数）

rem / 根元素

rem和em的区别在于，em是基于父元素的字体而确定，而rem是根据根元素字体而确定，不常用！

首先得和大家说一下，什么是根元素：

根元素指没有父元素的元素 或者 指 :root 选择器匹配到的元素，也就是文档树中最顶层结构的元素。


在网页中，一般的根元素是html，当然也有例外！（比如在 svg 中，根元素是指 svg）

注意：

当rem作用于根元素，是相对于其出初始字体大小，这里只能是16px，因为你不可能同时设置两个，eg：

html {
	font-size:32px;
	font-size:0.5rem;
}

此时只有后设置的有效！

如果作用于非根元素，那就看你是否设置了根元素字体大小，不受父元素影响，如果没有，那就是按16px来（1rem=16px），否则按你设置的来！

实例：

<div>
    <div style="width: 20rem;height: 20rem;background-color: blue;">div>
    <div style="width: 320px;height: 320px;background-color: green;">div>
div>
<div style="font-size: 32px;">
    <div style="width: 20rem;height: 20rem;background-color: blueviolet;">div>
div>

运行结果：
三个 子div 都一样大！

vw 和 vm

vw 和 vh 会随屏幕的变化，自动适应为你设置的大小！

实例：

<div style="width: 50vw;height:50vh;background-color: aqua;">div>

vmin 和 vmax

vmin 和 vmax 就是当你设置了一个值之后，将值代入vh 和 vw ，根据屏幕，看谁大谁小，然后根据你是vmin还是vmax来决定以谁为值！

实例：

<div style="width: 50vmin;height:50vmax;background-color: aqua;">div>

运行结果：
正好和上面 vw和vh 相反的宽高！

%

百分号就是将父元素均分为100份，然后根据你的百分比设置其大小，字体也一样！

实例：

<div style="width: 300px;height: 200px;background-color: greenyellow;font-size: 64px;">
    <div style="width: 50%;height: 50%;background-color: brown;font-size: 50%;">
        A
    div>
    A
div>

运行结果：

绝对长度

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

cm

就是现实当中的cm

实例：

<div style="width: 10cm;height: 5cm;background-color: aqua;">div>

运行结果：

mm

就是现实中的mm

实例：

<div style="width: 100mm;height: 50mm;background-color: aqua;">div>

运行结果：
和上面一模一样

in

就是现实的英寸

实例：

<div style="width: 5in;height: 1in;background-color: greenyellow;">div>
<div style="width:480px;height: 96px;background-color: aquamarine;">div>

运行结果：

（尺测量有点误差很正常 ,ԾㅂԾ, ）

计算电脑多少寸

菜鸟找到了英寸和px的对应关系，再加上知道了电脑屏幕说的多少寸都是对角线，那岂不是我们自己可以计算自己的电脑是多少寸的？

菜鸟的电脑，分辨率1366X768，换算成英寸14.223X8，按照勾股定律，得出自己电脑的寸：16.4寸。但是菜鸟记得自己的电脑是14寸的 (?__ ?)

pt / pc

这些都直接用in推出来就好！

实例：

<div style="width: 5in;height: 1in;background-color: greenyellow;">div>
<div style="width: 360pt;height: 72pt;background-color: green;">div>
<div style="width: 30pc;height: 6pc;background-color: purple;">div>
<div style="width:480px;height: 96px;background-color: aquamarine;">div>

运行结果：

注意

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

尺寸

尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

height / width

height属性设置元素的高度；width属性设置元素的宽度。

注意：

height属性 和 width属性 不包括填充，边框，或页边距 ！

不知道auto的，详见：

重学前端 概括元素（行内元素,块元素,行内块元素）和属性 / 大小写不敏感 / 详解标题标签 [em和px、源css] / 详解分割线hr标签 / 初见border / 详解auto（第二天）

line-height

详见：
详解文本格式（Text）[第二天]

max-height / max-width

max-height 属性设置元素的最大高度；max-width属性设置元素的最大宽度。

注意：

max-height属性 和 max-width属性 不包括填充，边框，或页边距！

min-height / min-width

min-height 属性设置元素的最低高度；min-width属性设置元素的最小宽度。

注意：

min-height属性 和 min-width属性 不包括填充，边框，或页边距！

min-height：

min-width：

注意

这里的max-width、min-height…可能与响应式布局有关，等菜鸟复习到了，再来补充！