哪些CSS属性可以设置百分比，其计算原则是什么？
2017-07-15 本文已影响85人
长天_
大家好，我是IT修真院深圳分院第01期学员，一枚正直善良的web程序员。
今天给大家分享一下，修真院官网 CSS任务中CSS部分可能会使用到的知识点：
哪些CSS属性可以设置百分比，其计算原则是什么？
1.背景介绍
CSS 的属性值中经常会出现百分比，并且百分比是实现页面自适应很重要的一种方法。
但是有哪些属性可以用百分比来进行设置呢？设置的原则又是什么呢？
2.知识剖析
常见的可以使用百分比的样式属性
定位属性：top, right, bottom, left;
盒模型属性：height, width, margin, padding;
背景属性：background-position;
文本属性：text-indent, line-height, vertical-align;
字体属性：font-size;
2.1 定位属性
position：fixed relative absolute
box为父元素，box1为子元素
2.2盒模型属性：height,width,margin,padding;
box为父元素，box1为子元素
2.3背景属性：background-position;
图像中描述为 50% 50% 的点（中心点）;如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角;如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。
如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。
background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。
2.4文本属性：text-indent,line-height,vertical-align;
2.5字体属性：font-size.
浏览器默认字体大小为16px,我们一般默认font-size=62.5%，但也可以根据浏览器窗口大小利用媒体查询进行适当调整。
em有继承特性，存在重复声明的情况，所以我们一般不建议采用。
rem根据html中font-size的声明进行使用，不存在重复声明，建议使用。
3.常见问题
怎么让字体设置进行自适应？
4.解决方案
利用媒体查询和字体的百分比设置。
5.扩展思考
给元素设置定位后，它的包含块一定是父元素吗？
定位元素使用百分比单位后，它的参考目标是包含块。关于包含块（containing[kən'teɪnɪŋ] block）的概念，不能简单地理解成是父元素。如果是静态定位（static）和相对定位（relative），包含块一般就是其父元素。但是对于绝对定位（absolute）的元素，包含块应该是离它最近的 position 为 absolute、relative、或者 fixed 的祖先元素。
固定定位(FIXED)的包含块，box为父元素，box1为子元素，box2为子元素
对固定定位的元素，它的包含块是视区（viewport：用户网页的可视区域）。
6.参考文献
参考一：css权威指南
参考二：W3School
参考三：CSS 属性之中经常出现的百分比
参考四：css样式的设置
7.更多讨论
1、对一个元素的margin/padding的设置使用百分比，它的值是如何计算的呢？
2、设置百分比单位有什么好处、用在哪里比较好,哪里不太好？
3、你还能想到什么地方可以使用百分比单位?
隋大佬问：不使用媒体查询的情况下如何让字体自适应？
众人：可以通过给font-size设置vw单位；
覃大佬问：IT修真院的官网任务中，CSS任务一的盒子，怎么设置自适应？
众人：可以通过给padding属性设置百分比单位将盒子撑开，并且自适应；
萌新问：用百分比高度给CSS任务一的盒子设置自适应可以吗？
众人：当然可以，但是非常不建议这样做，因为高度设置百分比不确定的因素太大，只要不小心给页面随便再嵌套一下而不给这个新嵌套进来的元素设置高度的话，那么整个嵌套关系就会乱掉；
详见视频：
_腾讯视频
