TanXinNiao
commented
3 years ago 基本元素框
内边距的百分数值
元素的内边距可以用百分数值设定。百分数值相对父元素内容区的宽度计算，因此， 如果出于什么原因，父元素的宽度变了，内边距也会变。
p {padding: 10%; background-color: silver;}
<div style®"width: 600px;">
<P>
This paragraph is contained within a DIV that has a width of 600 pixels, so its padding will be 10% of the width of the paragraph's parent element. Given the declared width of 600 pixels, the padding will be 60 pixels on all sides.
</p>
</div>
<div style®"width: 300px;">
<P>
This paragraph is contained within a DIV with a width of 300 pixels, so its padding will still be 10% of the width of the paragraph's parent. There will, therefore, be half as much padding on this paragraph as that on the first paragraph.
</p>
</div>着父元素宽度的变化，不仅两侧的内边距变了， 上下内边距也变了。这正是CSS定义的行为。回顾这个属性的定义，你应该还记得，百 分数值是相对父元素的宽度计算的。这一点不仅针对左右内边距，也针对上下内边距。 因此，对下述样式和标记来说，段落的上内边距为50像素。
div p （padding-top: 10%;}
<div style="width: 500px;">
<P>
This is a paragraph, and its top margin is 10% the width of its parent element.
</p>
</div>如果你觉得这种处理方式有点奇怪，可以这样理解：正常流动模式下的多数元素，其高 度恰好够容纳后代元素的内容及其内边距（这也是本章假定的行为）。如果元素的上下 内边距相对父元素的高度计算，为了容纳上下内边距，父元素的高度要增加，而高度变 化后，上下内边距的值又要随之变化，如此一直下去，进入无限循环。但是元素的上下 内边距又不能忽略，因此规范制定人员决定相对父元素内容区的髙度计算上下内边距的 百分数值，原因很简单，父元素的宽度不随后代元素的宽度影响。
你可能已经知道，文档中的每个元素都会生成一个矩形框，我们称之为元素框(element box) o这个框体描述元素在文档布局中所占的空间。因此，元素框之间是有影响的， 涉及位置和尺寸。假如文档中的第一个元素高1英寸，那么下一个元素框至少从文档顶 部1英寸处开始。如果第一个元素的高度变了，变成了 2英寸，那么后续各个元素框都 将向下移动1英寸，因此第二个元素框至少从文档顶部2英寸处开始。
默认情况下，渲染出来的文档中，各矩形框的排布方式在视觉上不会出现重叠。而且， 某些情况下，元素框会尽量占用较少的空间，但是依然留有足够的间隔，能清楚地分清 一部分内容属于哪个元素。
如果元素框是手动定位的，可能出现重叠，此外，在正常流动的元素上应用负的外边距， 也会出现视觉上的重叠。