CSS中共享调试经验的一些百分比

本文主要介绍了CSS中一些与百分比相关的调试经验，CSS中最常用的元素布局和定位方法是使用百分比。朋友需要参考。
许多的CSS属性的值可以是一个百分比值。虽然形式上的百分比都是以数字的形式依次为（注意，数字和百分比之间的空间要注意），有不同的使用场合，在许多不同的意义。因此，比例可以说是很多内容。
百分比为相对值。

要了解百分比，如100%的百分比，关键是要知道百分比必须有其相应的参考价值，也就是说，百分比是一个相对值，任何时候要分析它的效果，就需要正确地找到它的参考。

一个CSS属性值有一个过程，从定义到最后的实际使用。这涉及到指定的值，计算值（规定值）（计算），使用价值，实际价值（使用价值）（实际值）的概念，可以想见，在这个过程中，实际的比例，根据其参考计算为绝对值（如100像素）。然后，根据应用程序，这是百分比值的意思。

有关CSS属性值的过程的更多信息可以在值处理中看到。
百分点的效果如何

简单地说，它是变异性的，可以从适应、响应等看起来有用的东西派生出来。

例如，一个有固定宽度和高度的盒子，然后希望有一个完全固定的宽盒子，盒子的宽度和盒子一样宽。

CSS代码将内容复制到剪贴板。
。箱{位置：相对；宽度：100px；身高：100px；}
。box_cover {位置：绝对；宽度：100%；高度：100%；左：0；最高：0；}

使用比例比的好处是，如果我们需要修改盒子的大小，我们只需要修改盒子的宽度，盖子会自动保持和盒子一样大小。

另一个例子是自举网格系统：
正如你所看到的，在网格系统中使用一个百分比值来确定空间的精确划分，百分比比例是相对的和自适应的，因此网格系统可以很好地应用于响应设计。
百分之一比值的常用CSS属性
宽度和高度

在使用百分比值的宽度和高度时，引用是元素的包含块（包含块、细节）。宽度引用包含块的宽度，高度指块的高度。在大多数情况下，包含块是父元素的内容区域（框模型中的内容）。

我在宽度之前写了：100%，高度：100%，这个代码和父元素的大小是一样的，但是我发现有时候宽度是有意义的（100%），但是高度没有作用，请看下面的例子：
你可以看到，无论是直接父元素（鲍汉快）有一个明确的高度定义会影响身高的结果作为一个百分比值。

这个详细的解释是，当一个元素的高度作为一个百分比值，如果纳入并没有一个明确的高度定义（即，取决于内容的高度），和元素不是绝对位置，百分比等于汽车。汽车是初始默认值，所以它看起来像无效；

如果元素是根元素，其包含块（）是视图（视图）提供了最初的包含块（初始包含块），最初包含在任何时间块被认为是高度的定义，等于视的高度。因此，标签的高清晰度的百分比总是有效的，如果你想使用它的比例很高，你必须首先定义一个明确的高度。这就是为什么，在以前的固定页脚有HTML、体{高度：100%；}。
边缘填充

这2个属性是混合属性，并通过一个示例加以说明。
可以分析，对于边距和填充，每个方向的百分比的比例是块的宽度。

为什么把块的宽度作为多个方向的参考在我看来，块的宽度在排版的排版中最有用。（想象文本输入到单词后面的宽度边缘的场景）。相应的，水平和外边距必须由块的宽度参考。考虑了垂直方向上的内部和外部的空间，如果他们不采取相同的参考为水平方向，他们将很难使用，因为不一致。所以，总的来说，团结是一个与块宽度的参考，它有一个相对最佳的可用性。

严格地说，当样式属性写入模式是默认值时，引用是包含块的宽度。但是这个属性很少使用，所以我们不在这里考虑它。
边界半径

你可能见过有人用下面的代码把一个矩形正好圈起来（见这个，）：

CSS代码将内容复制到剪贴板。
圆{边框半径：50%；}

对此的解释是，指的是对一个元素定义的边界半径之比元素本身的大小。也就是说，如果该元素的宽度和高度60px 50px（边界框的大小），然后边界半径的结果：50%是平等的边界半径：30px / 20px。

如果你还在担心带圆角，看MDN的指令边界半径。
背景位置

背景位置的初始值为0% 0%的百分比值：
背景位置的参考值是一个减法值。从背景图的大小和背景图的大小可以是负的，与上面的例子相比，我们应该能够感觉到减法计算值可以匹配我们对背景地图位置的感官理解。

该属性包括水平和垂直位置，分别表示宽度减和计算高度相减的值。

您可能注意到，上面的示例中的最后一个已经编写了4个值（通常只有2个值）。
字体大小

引用的直接父元素的字体大小。例如，一个元素的直接父字体大小为14px，无论是直接定义或继承。当元素定义了字体大小：100%，字体大小：14px效果。
线高度

引用元素本身的字体大小。例如，一个元素的字体大小为12px，那么线高度：150%；影响线高度：18px；
垂直排列

引用元素本身的线高度（这与前面相关的所以我在这里）。例如，一个元素的行高是30px，然后垂直对齐：10%；效果是垂直对齐：3px；

对于这个属性，我想说的是，虽然垂直对齐可以使用数字和百分比比例，但是浏览器兼容性是完全不同的。在实现浏览器时可能需要更多的攻击，因此，我个人倾向于使用关键字类型的值，如中间值，在兼容性方面相对较小。
底部，左边，右边，顶部用于定位

引用是元素的块，左边和右边是被引用块的宽度，底部和顶部是引用块的高度。
变换：平移

平移变换也可以在水平和垂直方向上使用百分比，指的是将包围盒的大小（等于该元素的边界框的大小）。例如，一个宽度和高度150px 100px的一个元素，定义变换的影响：将（50%，50%）转化：翻译（75px，50px）；

您还可以添加translate3d对应第三个维度，但经过测试，最后的第三个值不能用百分比（否则风格的定义是无效的）。至于为什么你不能提及它，是因为它是一个神秘的第三维度。
其他

如果你想知道更多关于可用性和在CSS属性比参考值，指MDN CSS百分比值。
继承的百分比

注意当比例用于遗传特性，只有绝对值与参考值计算将继承，不是百分比值本身。例如，一个元素的字体大小为14px，和线的高度：150%定义。然后对元素的下一个元素的行高为21px代替的子元素本身的字体大小。
后记

我终于完成了这么多新用法，有兴趣使用吗（*）

我自己的观点是，百分比，CSS提供了建立元素与元素的不同属性之间的关系的一个有效途径。只要是成立一个协会，百分比值可以适当的考虑。另外，你不需要做任何动态事件处理和更新，并在任何时候，你可以依靠这个百分比。