绝对单位 px,就是说5px放在哪里都一样大。
1em=16px
但是em rem是相对单位，相对单位的值会根据外部因素发生变化。比如2em会根据它作用到的元素而变化。
因为网页响应式得特点，我们只能去学习css带来的抽象行
响应式
在css中指的是样式能根据浏览器窗口的大小有不同的响应
相对单位就是css用来解决这种抽象的工具。我们可以基于窗口大小来等比例的缩放字号，或者将网页山海关的任何元素都相对于基础字号来设置，然后只用更改一行代码就能缩放整个网页。
css长度单位
css支持几种绝对长度单位，最常见、最基础的是像素px.
不常见的绝对单位有mm毫米，cm厘米，in英寸，pt点（1/72英寸），pc(派卡，12点) 1in=25.4mm=2.54cm=6pc=72pt=96px 也就是说16px=12pt(16/96*72)
em是最常见的相对长度单位，适合基于特定的字号进行排版。在css中，1em等于当前元素的字号，其准确值为1em的div元素。
1em=16px
计算值
浏览器会根据相对单位的值计算出绝对值，称为计算值。
eg:这里设置内边距的值为1em,浏览器将其乘以字号，最终渲染为16px.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.padded{
font-size:16px;
padding:1em;
border:1px solid orange;
}
</style>
<body>
<div class="padded">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis natus!</div>
</body>
</html>em定义一个元素的大小，然后只要改变字号就能整体缩放大小
练习2
当定义盒子的样式时，可以用em指定内边距和圆角。在指定字号，那么属性会随着字体一起缩放。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.box{
padding:1em;
border-radius: 1em;
background-color: lightblue;
/* 设成行内块 */
display: inline-block;
}
.box-small{
font-size: 12px;
}
.box-large{
font-size: 18px;
}
</style>
<body>
<!-- 注意：因为行内元素，所以设置宽高无效，margin设置左右有效，上下无效 -->
<!-- 所以思路是把它变成块级元素，但是如果设成display:block ，那么它的样式会变 -->
<!-- 所一设为行内块元素，既保持了原本的模样，又能让margin上下有效 -->
<span class="box box-small">small</span>
<span class="box box-large">large</span>
</body>
</html>
font-size根据继承的字号来计算大小
em和font-size的大小转换
当两个大小要一致时，可以用x px/16=x em了
大多数浏览器默认字号为16px,准确的说，medium的关键字的值为16px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
body{
font-size: 20px;
}
.slogan{
/* 计算方法 20/16=1.25em */
font-size: 1.25em;
}
</style>
<body>
we love coffee
<!-- 目标：slogan继承了body的字号 -->
<p class="slogan">we love coffee</p>
</body>
</html>em的复杂之处：em同时用于字号和其他属性
这时，浏览器必须先计算字号，然后使用这个计算值去算出其余的属性值。这两类属性可以拥有一样的声明值，但是计算值不一样
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
body{
font-size: 16px;
}
.slogan{
/* 它的字体大小为19.2px ---计算值*/
font-size:1.2em;
/* 它的字体大小为23.04px */
/* 注意：这里的声明值算法是 1.2em=1.2*19.2=23.04px-----计算值 */
padding:1.2em;
background-color: #CCC;
}
</style>
<body>
we love coffee
<!-- 目标：slogan继承了body的字号 -->
<p class="slogan">we love coffee</p>
</body>
</html>字体缩小的问题
当em来指定多重嵌套的元素的字号时，就会产生意外的结果。
为了算出每个元素的准确值，需要知道继承的字号，如果这个值是在父元素上用em定义的，就需要知道父元素的继承值。以此内推，，就会沿着dom树一直往上查找。
当列表多级嵌套并且给每一级使用em定义字号时，就会发生文字缩小的现象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
body{
/* 字体基础大小32px */
font-size: 32px;
}
ul{
/* 注意.8为0.8 */
/* 它的值应该是0.8乘以父元素的字号 */
font-size: .8em;
}
</style>
<body>
<ul>
<!-- 他的字号为25.6px -----32*0.8-->
<li>Top Level</li>
<ul>
<!-- 他的字号为20.48px -----25.6*0.8 -->
<li>Second level</li>
<!-- 他的字号 16.384px---- 20.48*0.8 -->
<ul>Third level</ul>
<ul>
<!-- 他的字号 16.384px---- 20.48*0.8 -->
<li>Fourth level</li>
</ul>
</ul>
</ul>
</body>
</html>如果指定一个大于1em的字号，文字会逐渐增大。
如果指定一个等于1em的字号，这样顶部字号指定了，子级的字号时一样的
我们想要的是指定顶部的字号，然后保持子级的字号一致
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
body{
font-size: 32px;
}
ul{
font-size: .8em;
}
ul ul{
font-size: 1em;
}
</style>
<body>
<ul>
<!-- 25.6px 32*0.8-->
<li>Top Level</li>
<ul>
<!-- 25.6px 32*0.8 -->
<li>Second level</li>
<!--25.6px 32*0.8 -->
<ul>Third level</ul>
<ul>
<!-- 25.6px 32*0.8 -->
<li>Fourth level</li>
</ul>
</ul>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
body{
font-size: 32px;
}
ul{
font-size: .8em;
}
ul ul{
font-size: 2em;
}
</style>
<body>
<ul>
<!-- 25.6px 32*0.8-->
<li>Top Level</li>
<ul>
<!--51.2px 25.6*2-->
<li>Second level</li>
<!--102.4px 51.2*2 -->
<ul>Third level</ul>
<ul>
<!-- 102.4px 51.2*2 -->
<li>Fourth level</li>
</ul>
</ul>
</ul>
</body>
</html>rem设置字号
当浏览器解析html文档时，会在内存中将页面的所有元素表示为Dom(文档对象模型)。它是一个树结构，其中每个元素都由一个节点表示。
元素是顶级（根）节点。它下面是子节点，
和再下面是逐渐嵌套的后代节点
在文档中，根节点是所有其他元素的祖先节点。根节点有一个伪类选择器（：root）,可以用来选中它自己。这个等价于类选择器html,但是html的优先级相当于一个类名，而不是一个标签。
rem是root em的缩写。rem不是相对于当前元素，而是相对于根元素的单位。不管在文档的什么位置使用rem,1.2rem都会有相同的计算值：1.2乘以根元素的字号。
因为相对根元素，所以所有字号始终一致，就算是嵌套列表也一样
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
:root{
/* :root伪类等价于类型选择器html */
/* 根元素的字号为浏览器默认的字号16px */
/* 根元素上的em是相对于浏览器默认值的 */
font-size:1em;
}
ul{
font-size: .8rem;
}
</style>
<body>
<ul>
<!-- 因为相对于根元素，所以所有字号始终一致，嵌套列表页也一样 -->
<!-- 12.8px 0.8*16 -->
<li>Top Level</li>
<ul>
<!-- 12.8px 0.8*16 -->
<li>Second level</li>
<!-- 12.8px 0.8*16 -->
<ul>Third level</ul>
<ul>
<!-- 12.8px 0.8*16 -->
<li>Fourth level</li>
</ul>
</ul>
</ul>
</body>
</html>可访问性：对字号使用相对单位
有些浏览器给用户提供了两种方式来设置文字大小：缩放操作和设置默认字号。
按住ctrl+或ctrl-,用户可以缩放网页。
这种操作会缩放所有的字和图片，让网页整体放大或者缩小
在某些浏览器中，这种改变只会临时对当前标签页生效，不会将缩放设置带到新的标签页。
设置默认字号则不一样。不仅很难找到设置默认字号的地方（通常在浏览器的设置页），而且用这种方式改变字号会永久生效，除非用户再次修改默认值。
这种方式的缺点是，它不会影响用px或者其他绝对单位设置的字号。由于默认的字号对某些用户而言很重要，尤其是对视力受损的人，所以应该始终用相对单位或者百分比设置字号。
rem结合了px和em的优点，保存了相对单位的优势，又简单易用。
一般用rem设置字号，px设置边框，em设置其他大部分属性，尤其是内边距、外边距和圆角（不过我有时用百分比设置容器宽度）。
这样字号是可以预测的，同时还能在其他因素改变元素字号时，借助em缩放内外边距。
来自深入解析css
8528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
