静态页面制作:13padding的用法

Posted 2020-10-04

　　　　这一节我们来说说留白

 

 

　　　　留白有什么用？padding到底有什么用，我们在分析之前，先回顾一下我们之前遇到的那几层结构。

 

　　　　在结构中我们有边距、边框和留白，在这里我们提出一个问题，

 

　　　　就是一个元素的宽度和高度边界到底在哪里？

 

　　　　我们通过图片为大家展示：

 

　　　　我们在这里直接告诉大家，一个元素的宽度就等于内容宽度+左右留白，

 

　　　　一个元素的高度就等于内容高度+上下留白。

 

　　　　虽然公式很简单，但有句话说越简单的公式其中越有料。

 

　　　　有什么料呢？我们通过一个例子来看看这个公式能有什么作用？

 

 

　　　　假设我们有一个div，然后宽度是100，高度是960，这整个div区域都可以写内容。

 

　　　　如果我们套用刚刚说的公式就如下：

 

 

　　　　元素宽度是已经设定好的960等于内容宽度+左右留白。

 

　　　　现在的内容宽度是960，然后左右留白是0.这样一算，元素的总宽度就出来了。

 

　　　　元素高度的算法是一样的。

 

　　　　如果我们为div设定一些留白padding，我们来看看会变成什么样？

 

 

　　　　先宽度总数并没有改变，但是由于有了左右留白共计40像素，

 

　　　　这时候的内容宽度就变小了，由于上下也有了留白，所以内容的高度也变小了。

 

　　　　这是怎么回事呢？就是在我们给div已经设置好宽度之后，

 

　　　　在设置padding的话，就会压缩内容宽度和内容高度。

 

　　　　现在我们在把上一节讲到margin最后的一个例子重现一下。

 

 

　　　　当时我们说紧靠浏览器上边缘的元素，

 

　　　　比如说div中的第一个子元素课后帮设置margin-top的话，

 

　　　　他就连带div也一同顶下来，并没有跟随我们预期的效果。

 

　　　　对于这种情况，我们也进行了分析，就是我们换个角度思考，

 

　　　　我们认为是div容器的上边缘的部分就是不想有内容。我们来看看怎么做。

 

 

　　　　元素宽度等于内容宽度加上左右留白，元素高度等于内容高度加上上下留白。

 

　　　　此时我们希望课后帮在不连带div的基础上，向下挪一点。这个问题怎么解决。

 

 

　　　　其实呢，宽度我们可以不动，而高度上我们可以给div设定一个上部的留白，

 

　　　　由于元素高度已经设定，所以设置padding的时候，就会压缩内容高度，

 

　　　　这样一减，内容高度就变小了。也就相当于把课后帮这几个字往下挪了20像素，

 

　　　　同时div的这个区域并没有发生任何变化。

 

　　　　这个就是padding的第一个作用

 

 

　　　　就是宽度高度已设定的时候，padding可以改变内部元素的位置，

 

　　　　我们在回到刚刚写过的公式

 

 

　　　　我们说这个简单的公式很有料，所以我们换一个角度在来看看。

 

 

　　　　假设、如果我们现在遇到的是inline元素，由于他的特性，无法设定高度和宽度，

 

　　　　宽度和告诉完全取决于课后帮这几个字。那么我们在来套用一下公式。

 

 

　　　　课后帮此时的宽度和高度是不可以设定的，也就是说此时课后帮的宽度和高度完全是算出来的。

 

　　　　怎么算的呢，就是由内容宽度加上左右留白，就是宽度。由内容高度加上上下留白就是高度。

 

　　　　可想而知，如果我们给inline元素课后帮上下左右留白都设置10像素的话，会发生什么情况呢？

 

 

　　　　左右留白都是10，那么一共就是20像素，但是内容的宽度没变，结果就是整体的宽度变大了。高度也一样！

 

 

 

　　　　那么padd的第二个作用就出来了，就是在宽度高度未设定的时候，padding可以撑大元素。

 

　　　　我们总结一下padding的两个作用。

 

　　　　

　　　　一个是在宽度高度未设定的时候，可以撑大元素

 

　　　　一个是在宽度高度已设定的时候，改变内部元素的位置

 

　　　　这两个效果并不是互斥的，这两个效果可以同时发生。

 

 

　　　　怎么个同时发生法呢，其实是在不同的方向上发生这两个效果。

 

　　　　方向一就是，在高度未设定的时候，就可以撑大本元素的高度。

 

　　　　方向二就是，在宽度已设定的时候，就能改变内部元素的位置。

 

　　　　我们仍然用例子分析：

 

 

　　　　比如说有一个div，然后里面放了一个课后帮这么一个行内元素，

 

　　　　此时的宽度是设定好的960，内容宽度就是算出来的值，960减去留白就是内容宽度。

 

　　　　然而div的高度是未设定的，所以他的值是由内容高度加上上下留白，也就是12+0=12。

 

　　　　那如果我们此时给他设定左右留白和上下留白会发生什么事情呢？

 

 

　　　　就会发生这么个情况：

　　　　

　　　　首先说宽度，由于宽度已经设定了，那么在加上留白20像素，那就会压缩内容的宽度。

 

　　　　也就是由原来的960-20就等于内容的宽度940。其实相当于改变了课后帮在水平方向的一个位置。

 

　　　　再来说高度，由于高度是没有设定的，此时的高度是由内容撑开的，我们设定了上下留白，

 

　　　　留白部分就从0变到了20，留白有了20在加上内容的高度12，那么此时的高度就变成32了，

 

　　　　这样的话其实相当于改变了课后帮在垂直方向的一个位置。

 

　　　　我们总结一下：

 

 

　　　　两点

　　　　

　　　　1.横向上，压缩了内容区域，改变了内容元素的位置。

 

　　　　2.纵向上，撑大了元素，其实也相应的改变了内部元素的位置。