哪些css属性可以设置百分比，其计算原则是什么？

大家好，我是IT修真院郑州分院王姣妍，一枚正直、纯洁、善良的web程序员。

今天给大家分享一下，修真院官网 CSS任务中可能会使用到的知识点：

哪些css属性可以设置百分比，其计算原则是什么？

一、背景介绍

CSS 的属性值中经常会出现百分比，并且百分比是实现页面自适应很重要的一种方法。但是有哪些属性可以用百分比来进行设置呢？设置的原则又是什么呢？

二、知识剖析

可以使用百分比的样式属性

定位属性：top, right, bottom, left;

盒模型属性：height, width, margin, padding;

背景属性：background-position;

文本属性：text-indent, line-height, vertical-align;

字体属性：font-size;

定位属性

box为父元素，box1为子元素

盒模型属性：height,width,margin,padding;

box为父元素，box1为子元素

背景属性：background-position;

图像中描述为50% 50% 的点（中心点）;如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角;如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为50%。

background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。

三、常见问题

怎么让字体设置进行自适应？

四、解决方案

利用媒体查询和字体的百分比设置。

参考一：css权威指南

参考二：css样式的设置

参考三：CSS 属性之中经常出现的百分比

参考四：W3School

视频链接：视频

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~