摘要：绝对单位英寸磅相对单位与元素字号挂钩与元素字体的高度挂钩与根元素字号挂钩与像素挂钩另一属性值的百分比。定义基于父元素宽度的百分比的缩进。参考权威教程节样式可以使用百分比的属性总结浅析属性之中经常出现的百分比
起源：一道面试题（猫眼电影） 问题：css中的单位都有哪些？可以取百分数的单位有哪些？其中margin-top取百分数时是相对于谁来计算的？ 回答：
（1）css中的单位：CSS规定了两种类型的单位，一种是绝对单位，另一种是与其他属性挂钩的相对单位。
绝对单位：in-英寸；cm；mm；pt-磅；pc-pica
相对单位：em-与元素字号挂钩；ex-与元素字体的“x高度”挂钩；rem-与根元素字号挂钩；px-与CSS像素挂钩；%-另一属性值的百分比。
（2）CSS中可以取百分比的样式单位
定位：top,right,bottom,left;
盒模型：width,height,margin,padding;
背景：backgroud-position,background-size;
文本：text-indent;
字体：font-size;
（3）margin-top是相对于父级元素的width属性（不是height属性）来计算的。
总结：CSS中属性取值百分比 1.百分比单位基于包含块的宽度来计算的属性：margin，padding，width，max-width，min-width，left，right，text-indent.
注意
1.margin-top，margin-bottom，padding-top和padding-bottom都是基于包含块的width属性来计算的。
2.text-indent：定义基于父元素宽度的百分比的缩进。当外层不指定宽度时，ie下会基于浏览器宽度。
基于包含块的高度来计算的属性：top，bottom，height，max-height，min-height
注意
关于包含块（containing block）的概念，不能简单地理解成是父元素。如果是静态定位和相对定位，包含块一般就是其父元素。但是对于绝对定位的元素，包含块应该是离它最近的 position 为 absolute、relative、或者 fixed 的祖先元素。对固定定位的元素，它的包含块是视口（viewport）。
基于当前字体大小来计算的属性：line-height
关于line-heigt的详细解释，请移步这里css行高line-height的用法与计算原理
基于line-height来计算的属性：vertical-align
background-position：背景图像的位置，分别设置水平方向和垂直方向上的两个值，如果使用百分比，那么百分比值会同时应用于元素和图像。例如 50% 50% 会把图片的（50%, 50%）这一点与框的（50%, 50%）处对齐，相当于设置了 center center。同理 0% 0% 相当于 left top，100% 100% 相当于 right bottom。
backgroud-size:设置背景图像的大小。兼容IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
注意
2.百分比继承background-size还可以取预定义的值：contain，cover，auto。
如果某个元素设置了百分比的属性，则后代元素继承的是计算后的值。例如：
p { font-size: 10px } p { line-height: 120% } / 120% of "font-size" / 那么p的子元素继承到的值是 line-height: 12px，而不是 line-height: 120%。
补充：
参考关于css中的继承：
样式层叠与继承是样式表中两个关键概念，浏览器会根据层叠和继承规则确定显示一个元素时各种样式属性采用的值。
并非所有的CSS属性都可以继承，这这方面有条经验可以参考：与元素外观（文字，颜色，字体等）相关的样式会被继承；与元素在页面上的布局相关的样式不会继承。此外，还可以使用inherit强行实施继承。
1.HTML5权威教程（4.2.3节）
2.css样式可以使用百分比的属性--总结
3.浅析CSS 属性之中经常出现的百分比
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111479.html
摘要：我们会在组合选择器中来了解为什么权重值要加连字符。组合选择器中的权重值会分别对不同类型的选择器进行计数。对比两组选择器，第二组选择器有两个选择器，拥有更高的权重值。 CSS是一门复杂的语言，拥有相当的大能力。 它我们允许为页面添加布局和设计，允许多个元素甚至多个页面共享样式。在我们有能力解锁所有功能之前，我们必须先充分理解它的基础点。 首先，我们要明确的了解样式是怎么被渲染的。 具体的...
摘要：我们会在组合选择器中来了解为什么权重值要加连字符。组合选择器中的权重值会分别对不同类型的选择器进行计数。对比两组选择器，第二组选择器有两个选择器，拥有更高的权重值。 CSS是一门复杂的语言，拥有相当的大能力。 它我们允许为页面添加布局和设计，允许多个元素甚至多个页面共享样式。在我们有能力解锁所有功能之前，我们必须先充分理解它的基础点。 首先，我们要明确的了解样式是怎么被渲染的。 具体的...
摘要：元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。这些相对于布局来说是基础的，同时也是非常重要的。可以看到，浮动元素，其实对于布局来说，是特别危险的。 前言 现在，我们被称为前端工程师。然而，早年给我们的称呼却是页面仔。或许是职责越来越大，整体的前端井喷式的发展，使我们只关注了js，而疏远了css和html。 其实，我们可能经常在聊组件化，咋地咋地。但是，回过头来思...
摘要：简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验下面我介绍哪些或许你不知道小技巧。默认为，此时阴影与元素同样大。如果没有指定，则由浏览器决定通常是的值，不过目前取透明。首先，我们要明白这里的最小宽度值是什么意思。 暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。...
摘要：简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验下面我介绍哪些或许你不知道小技巧。默认为，此时阴影与元素同样大。如果没有指定，则由浏览器决定通常是的值，不过目前取透明。首先，我们要明白这里的最小宽度值是什么意思。 暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。...
阅读 1398·2021-09-02 09:53
阅读 2666·2021-07-29 13:50
阅读 1713·2019-08-30 11:07
阅读 1569·2019-08-30 11:00
阅读 1448·2019-08-29 14:00
阅读 1842·2019-08-29 12:52
阅读 2559·2019-08-29 11:11
阅读 3414·2019-08-26 12:23
