padding 和滚动条

padding 与容器

对于容器我们可以再看一下margin 的容器。

可视空间: 可以看到元素信息的空间，如 border + padding + content

占据空间: 元素使用了那么大的空间，但是它可能占据了更大的地方，只是没有使用而已。 如 margin + border + padding + content

我们知道 padding 一般永远影响可视空间的，但是不影响占据空间。这是不严谨的

下面我们几种情况

block 元素

<div style="background-color: #eee;color: #fff;">
	<div class="block1" style="background-color: red;padding: 20px;">111</div>
	<div class="block2" style="background-color: red;padding: 20px;width: auto;">111</div>
	<div class="block3" style="background-color: red;padding: 20px;width: 20px;">111</div>
	<div class="block4" style="background-color: red;padding: 20px;width: 100px;">111</div>
</div>

效果如下：

我们知道对于 block 元素，其特性是： 会占据整个水平方向的空间，但是可视空间可以通过 width 去设置。

那么对于 block、block1 来说其 width 都是自动的即可视空间就是占满整个水平方向，那么这时候设置 padding:20px只会使得在垂直方向增加可视空间。

但这是绝对的么？

我们将水平方向的 padding 修改到大于页面宽度 padding:20px 268px;

这时候我们发现 padding 不止改变了可视空间的大小，而且也修改了占据空间的大小。

这就说明对于 block 元素设置 padding 来说，其会修改垂直方向的可视空间，水平方向的占据空间如果 padding 大于容器的宽度也会修改占据空间的大小，如果 padding 小于容器宽度，那么就不会修改占据空间，只是修改可视空间的大小。

inline 元素

对于 inline 元素，我们先来一个概念： 水平方向上的 padding 影响元素的尺寸大小，但是在垂直方向的 padding 不影响尺寸大小，但是会影响背景色的大小(占据空间)

<div style="background-color: #eee;color: #fff;margin-top: 50px;height: 100px;">
	<span class="inline1" style="background-color: red;padding: 20px;">111</span>
	<span class="inline1" style="background-color: green;padding: 10px 300px;">111</span>
</div>

效果如下：

解析

对于 inline 元素，我们 padding 会影响元素水平方向的占据空间和可视空间，但是在垂直方向，其不会扩大 inline 元素的占据空间，但是会影响可视空间，所以背景会覆盖。

但是如果我们没有设置 背景色，其实 padding 只是影响了元素水平方向的占据空间和可视空间。

如

<div>
	<div>上面的一行上面的一行上面的一行上面的一行上面的一行上面的一行上面的一行</div>
	<div>
		<span>左青龙</span>
		<span class="center" style="background-color: red;padding: 20px;">老牛在中间</span>
		<span>右白虎</span>
	</div>
	<div>上面的一行上面的一行上面的一行上面的一行上面的一行上面的一行</div>
</div>

效果如下：

padding 的尺寸

padding 的百分之计算规则 跟 margin 大体相同也分为 普通元素的计算规则 和 绝对定位元素的计算规则

普通元素的计算规则

<div class="box" style="background-color: #eee;height: 1000px; width: 1000px; color: #fff;">
	<div class="box" style="background-color: red;height: 700px; width: 700px; padding: 100px;">
		<div style="background-color: green;height: 50px; width: 50px;padding: 10%;">block</div>
		<div style="background-color: green;height: 50px; width: 50px;display: inline; padding: 10%;">inline</div>
		<div style="background-color: green;height: 50px; width: 50px;display: inline; padding: 10%;">inline-m</div>
		<div style="background-color: green;height: 50px; width: 50px; display: inline-block;padding: 10%;">
			inline-block
		</div>
		<div style="background-color: green;height: 50px; width: 50px; float: left;padding: 10%;">float</div>
		<div style="background-color: green;height: 50px; width: 50px; float: left;padding: 10%;">float-margin</div>
		<div style="background-color: green;height: 50px; width: 50px; position: relative;padding: 10%;">position</div>
		<div style="background-color: green;height: 50px; width: 50px; position: relative;padding: 10%;">
			position-margin
		</div>
	</div>
</div>

效果如下：

可见对于 padding 的百分之计算规则在普通元素方面都是相对于父元素的 content 的宽高进行计算的 ( 700 - 100 * 2 ) * 0.1 = 50px

绝对定位元素的计算规则

<div class="pp-container" style="position:relative;background-color: #eee;height: 1000px; width: 1000px; color: #fff;">
	<div
		class="p-container"
		style="position:relative;background-color: red;height: 700px; width: 700px; color: #fff; padding : 100px;margin: 100px;box-sizing:border-box;"
	>
		<div style="display: inline-block;background-color: blue;height: 200px; width: 200px; color: #fff;">
			<div
				class="box"
				style="position:absolute;background-color: green;height: 50px; width: 50px; color: #fff;padding: 10%;"
			>
				position
			</div>
		</div>
		xxxx
	</div>
</div>

效果如下：

可见对于我们绝对定位元素 box 来说，其没有跟普通元素一样百分比相对于其相对于父容器的内容宽度，而是相对于第一个定位祖先元素(.p-container)进行计算的( (700 - 100px * 2) * 0.1 = 50)

总结与重点

1. 对于百分比单位我们主要分为这几个方向：

• 水平方向百分比和垂直方向百分比

• 普通元素的百分比/绝对定位元素的百分比

2. 跟 margin 百分百计算规则区别的地方是 margin 是相对于其占据空间, padding 是相对于 content 空间

padding 与滚动条

在chrome下滚动条宽度为13px，所以当出现滚动条的时候，如果padding-right < 13px ，那么就相当于右边距为13px，如果padding-right > 13px，那么右边距就是 padding-right 的值

<div class="bfc-box" style="height: 100px;width: 300px;display: inline-block;background-color: #eee;">
	这是内容的数据，这是内容的数据，这是内容的数据，这是内容的数据，这是内容的数据，这是内容的数据，这是内容的数据，
	这是内容的数据，这是内容的数据，这是内容的数据，这是内容的数据，这是内容的数据，这是内容的数据，这是内容的数据，
</div>

效果如下：

我们没有设置出现滚动条的时候，一出现滚动条就发现字体据右边的距离改变

在 padding-right: 10px 的时候，我们发现两次字体据右边的距离没有改变。然后我们继续增加padding-right的宽度

当我们增加到 大于13px的时候，我们发现字体据右边的距离开始变大。