这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【哪些css属性可以设置百分比，其计算原则是什么？ 】
大家好，我是IT修真院西安分院第5期的学员柳桐，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网css任务四，深度思考中的知识点——哪些css属性可以设置百分比，其计算原则是什么？
1.背景介绍
CSS 的属性值中经常会出现百分比，并且百分比是实现页面自适应很重要的一种方法。但是有哪些属性可以用百分比来进行设置呢？设置的原则又是什么呢？
2.知识剖析
可以使用百分比的样式属性:
定位：top,right,bottom,left;
盒模型：height,width,margin,padding,
背景：background-position,background-size(css3),
文本：text-indent，
字体：font-size;
各个属性使用详细：
top,right,bottom,left:全兼容,
height：基于包含它的块级对象的百分比高度。
width：基于包含它的块级对象的百分比宽度。
margin：百分数是相对于父元素的 width 计算的。
padding：百分数是相对于父元素的 width 计算的。
3.常见问题
1.怎么让字体设置进行自适应？
2.宽度设置为百分比是怎么使用的?
3.使用百分比要注意什么？
4.解决方案
1.利用媒体查询和字体的百分比设置。
2.div外层的父标签如果没有定义高度或宽度(用px或者其它单位定义，而非百分比)，div用百分比是无效的。如果坚持要用百分比，请换成table标签。
3.认清子元素的父元素
5.编码实战
6.扩展思考
定位属性的包含块一定是父元素吗？
绝对定位的包含块
定位属性的百分比的参考系是包含块。关于包含块（containing block）的概念，不能简单地理解成是父元素。如果是静态定位和相对定位，包含块一般就是其父元素。但是对于绝对定位的元素，包含块应该是离它最近的 position 为 absolute、relative、或者 fixed 的祖先元素。
7.参考文献
8.更多讨论
9.结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地