大家好，我是IT修真院郑州分院第四期的学员董瑞，一枚正直纯洁善良的web程序员
今天给大家分享一下，修真院官网CSS任务8，深度思考中的知识点——哪些css属性可以设置百分比，其计算原则是什么
1.背景介绍
CSS 的属性值中经常会出现百分比，并且百分比是实现页面自适应很重要的一种方法。但是有哪些属性可以用百分比来进行设置呢？设置的原则又是什么呢？
2.知识剖析
可以使用百分比的样式属性
定位属性：top,right,bottom,left;
盒模型属性：height,width,margin,padding;
背景属性：background-position;
文本属性：text-indent,line-height,vertical-align;
字体属性：font-size.
2.1定位属性
box为父元素，box1为子元素
body {width: 1000px;height:800px;} .box {width: 500px;height: 300px;border: 2px solid yellow;position: relative;} .box1 {width: 100px;height: 60px;border: 2px solid red;position: absolute;top:20%;right:20%;}
2.2盒模型属性：height,width,margin,padding;
box为父元素，box1为子元素
body {width: 1000px;height:800px;} .box {width: 500px;height: 300px;border: 2px solid yellow;padding-top:10%;} .box1 {width: 100px;height: 60px;border: 2px solid red;}
height：基于包含它的块级对象的百分比高度。width：基于包含它的块级对象的百分比宽度。
margin,padding：百分数是相对于父元素的 width 计算的。
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;
text-indent 定义基于父元素宽度的百分比的缩进。当外层不指定宽度时，ie下会基于浏览器宽度。line-height 定义基于元素的字体大小。vertical-align 定义基于元素的行高。
div { width: 500px; height: 300px;border: 2px solid yellow;} p{text-indent: 20%; font-size: 20px; line-height:200%;} span { vertical-align: 50%;}
2.4文本属性：text-indent,line-height,vertical-align;
text-indent 定义基于父元素宽度的百分比的缩进。当外层不指定宽度时，ie下会基于浏览器宽度。
line-height 定义基于元素的字体大小。
vertical-align 定义基于元素的行高。
2.5字体属性：font-size.
浏览器默认字体大小为16px,我们一般默认font-size=62.5%，但也可以根据浏览器窗口大小利用媒体查询进行适当调整。
em有继承特性，存在重复声明的情况，所以我们一般不建议采用。
rem根据html中font-size的声明进行使用，不存在重复声明，建议使用。
3.常见问题
怎么让字体设置进行自适应？
4.解决方案
利用媒体查询和字体的百分比设置。
@media screen and (max-width:1280px){ html{font-size:62.5%;} } @media screen and (max-width:800px){ html{font-size:39%; } } @media screen and (max-width:640px){ html{font-size:31.25%; } }
5.代码实战
6.拓展思考
定位属性的包含块一定是父元素吗？
绝对定位的包含块
body {width: 1000px;height:800px;} .box {width: 500px;height: 300px;border: 2px solid yellow;} .box1 {width: 100px;height: 60px;border: 2px solid red;position: absolute;top:20%;right:20%;}
定位属性的百分比的参考系是包含块。关于包含块（containing block）的概念，不能简单地理解成是父元素。如果是静态定位和相对定位，包含块一般就是其父元素。但是对于绝对定位的元素，包含块应该是离它最近的 position 为 absolute、relative、或者 fixed 的祖先元素。
固定定位的包含块
box为父元素，box1为子元素，box2为子元素
body {width: 1000px;height:800px;} .box {width: 500px;height: 300px;border: 2px solid yellow;position: relative;} .box1 {width: 100px;height: 60px;border: 2px solid red;position: absolute;top:20%;right:20%;} .box2 {width: 100px;height: 60px;border: 2px solid blue;position: fixed;top:20%;right:20%;}
对固定定位的元素，它的包含块是视口（viewport）。
7.参考文献
参考一：css样式的设置
参考二：CSS 属性之中经常出现的百分比
参考三：W3School
8.更多讨论
为什么margin和padding的包含块都是width呢？
PPT链接
视频链接：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
--------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
填写我的邀请码可以获得未知优惠哟：93881593
或者你可以直接点击此链接：邀请码链接