静态页面制作:13padding的用法
这一节我们来说说留白
![](https://scontent-atl3-1.xx.fbcdn.net/v/t1.0-9/13087482_231216487268138_6302582128235318887_n.jpg?oh=09cdb21fc1c4535cc52357981a437eef&oe=5A1C5D82)
留白有什么用?padding到底有什么用,我们在分析之前,先回顾一下我们之前遇到的那几层结构。
![](https://scontent-atl3-1.xx.fbcdn.net/v/t1.0-9/13015361_231216567268130_8339277626628480555_n.jpg?oh=c8b3647935fcb13d8844902c6745b0d9&oe=5A2D5F40)
在结构中我们有边距、边框和留白,在这里我们提出一个问题,
就是一个元素的宽度和高度边界到底在哪里?
我们通过图片为大家展示:
![](https://scontent-atl3-1.xx.fbcdn.net/v/t31.0-8/s960x960/11223933_231216677268119_5211496396224561325_o.jpg?oh=4f8ec65b7086f5bd869440d7ad5141a1&oe=5A2E5EC8)
我们在这里直接告诉大家,一个元素的宽度就等于内容宽度+左右留白,
一个元素的高度就等于内容高度+上下留白。
虽然公式很简单,但有句话说越简单的公式其中越有料。
有什么料呢?我们通过一个例子来看看这个公式能有什么作用?
![](https://fb-s-d-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/13072684_231216727268114_1169433520044686852_o.jpg?oh=846810427928656a71edbe647f823819&oe=5A1734D8&__gda__=1513389430_f3d04287ca1e1006a1f6f9e44a1ef0f5)
假设我们有一个div,然后宽度是100,高度是960,这整个div区域都可以写内容。
如果我们套用刚刚说的公式就如下:
![](https://fb-s-d-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/13063091_231216763934777_4879185230269206632_o.jpg?oh=131d60cb036b00f56174b6e6ddf371f7&oe=5A5F8BD3&__gda__=1512299901_45b91c627b91e6cf989d4163d7e9f06d)
元素宽度是已经设定好的960等于内容宽度+左右留白。
现在的内容宽度是960,然后左右留白是0.这样一算,元素的总宽度就出来了。
元素高度的算法是一样的。
如果我们为div设定一些留白padding,我们来看看会变成什么样?
![](https://scontent-atl3-1.xx.fbcdn.net/v/t31.0-8/13072749_231216990601421_7822183147109161649_o.jpg?oh=371dadd6be416f25185bb6d82f798907&oe=5A5FAED0)
先宽度总数并没有改变,但是由于有了左右留白共计40像素,
这时候的内容宽度就变小了,由于上下也有了留白,所以内容的高度也变小了。
这是怎么回事呢?就是在我们给div已经设置好宽度之后,
在设置padding的话,就会压缩内容宽度和内容高度。
现在我们在把上一节讲到margin最后的一个例子重现一下。
![](https://scontent-atl3-1.xx.fbcdn.net/v/t31.0-8/13055277_231217170601403_4222445382134988956_o.jpg?oh=80e0d38b1ca8044c49489e6e16843dac&oe=5A16625C)
当时我们说紧靠浏览器上边缘的元素,
比如说div中的第一个子元素课后帮设置margin-top的话,
他就连带div也一同顶下来,并没有跟随我们预期的效果。
对于这种情况,我们也进行了分析,就是我们换个角度思考,
我们认为是div容器的上边缘的部分就是不想有内容。我们来看看怎么做。
![](https://fb-s-b-a.akamaihd.net/h-ak-fbx/v/t31.0-8/13041418_231217220601398_6931967192120215972_o.jpg?oh=df520d44edc3fd4080ff6d1bf16eee4d&oe=5A344A1B&__gda__=1513069296_effb5d03f6a46f1af15bbb05edb0bb8c)
元素宽度等于内容宽度加上左右留白,元素高度等于内容高度加上上下留白。
此时我们希望课后帮在不连带div的基础上,向下挪一点。这个问题怎么解决。
![](https://fb-s-b-a.akamaihd.net/h-ak-fbx/v/t31.0-8/13063059_231217283934725_2834144482591971239_o.jpg?oh=d6dafba5137f247059c11662140ac3c5&oe=5A1F9FFF&__gda__=1512954644_c8e754c8fee0427f91f931b9e853f96e)
其实呢,宽度我们可以不动,而高度上我们可以给div设定一个上部的留白,
由于元素高度已经设定,所以设置padding的时候,就会压缩内容高度,
这样一减,内容高度就变小了。也就相当于把课后帮这几个字往下挪了20像素,
同时div的这个区域并没有发生任何变化。
这个就是padding的第一个作用
![](https://fb-s-b-a.akamaihd.net/h-ak-fbx/v/t1.0-9/13000317_231217353934718_3746826460342061077_n.jpg?oh=1be08ca7ecb03af83e9245ad1e1b232d&oe=5A2E023E&__gda__=1511225587_34c4e31ca84818e19ae16d57da50c576)
就是宽度高度已设定的时候,padding可以改变内部元素的位置,
我们在回到刚刚写过的公式
![](https://scontent-atl3-1.xx.fbcdn.net/v/t31.0-8/s960x960/13086874_231221570600963_7718312359957083127_o.jpg?oh=fa0b2b1cce1d9cbe99573f6d3e4be67c&oe=5A375D82)
我们说这个简单的公式很有料,所以我们换一个角度在来看看。
![](https://fb-s-d-a.akamaihd.net/h-ak-fbx/v/t1.0-9/12990878_231217417268045_2750789300802761456_n.jpg?oh=5f891f96b1da626d804a192a5e881482&oe=5A1743B7&__gda__=1512374906_ce70457659eae750ed19c9f5ef3f70c4)
假设、如果我们现在遇到的是inline元素,由于他的特性,无法设定高度和宽度,
宽度和告诉完全取决于课后帮这几个字。那么我们在来套用一下公式。
![](https://fb-s-a-a.akamaihd.net/h-ak-fbx/v/t1.0-9/13043271_231217477268039_768628458401719551_n.jpg?oh=0daa0d7de65282345eb47092f6757ac5&oe=5A1CDD7E&__gda__=1511724023_d0ec2c936ab3a05ae6d3f88c527bd772)
课后帮此时的宽度和高度是不可以设定的,也就是说此时课后帮的宽度和高度完全是算出来的。
怎么算的呢,就是由内容宽度加上左右留白,就是宽度。由内容高度加上上下留白就是高度。
可想而知,如果我们给inline元素课后帮上下左右留白都设置10像素的话,会发生什么情况呢?
![](https://fb-s-b-a.akamaihd.net/h-ak-fbx/v/t1.0-9/13007089_231217500601370_3551558467952887049_n.jpg?oh=2a60f149a5de983a583aeb83e4f2c798&oe=5A23C2BE&__gda__=1511879283_607b71e7e0b7296383b102a5b33cab8d)
左右留白都是10,那么一共就是20像素,但是内容的宽度没变,结果就是整体的宽度变大了。高度也一样!
![](https://scontent-atl3-1.xx.fbcdn.net/v/t1.0-9/13055413_231217510601369_2229685434025646718_n.jpg?oh=ce913eca7ddb65655c244f36f1b9e776&oe=5A189734)
那么padd的第二个作用就出来了,就是在宽度高度未设定的时候,padding可以撑大元素。
我们总结一下padding的两个作用。
![](https://fb-s-d-a.akamaihd.net/h-ak-fbx/v/t1.0-9/13077060_231217540601366_8184675891074939878_n.jpg?oh=2da8427fb60e7a2eb36bf39e9768ddcc&oe=5A354682&__gda__=1513453391_0d7fa0b3a70331c21cd6bef47d1bcde7)
一个是在宽度高度未设定的时候,可以撑大元素
一个是在宽度高度已设定的时候,改变内部元素的位置
这两个效果并不是互斥的,这两个效果可以同时发生。
![](https://scontent-atl3-1.xx.fbcdn.net/v/t1.0-9/943745_231217567268030_6472780764963002510_n.jpg?oh=fee05437586a314f959300f142706732&oe=5A2D5B4A)
怎么个同时发生法呢,其实是在不同的方向上发生这两个效果。
方向一就是,在高度未设定的时候,就可以撑大本元素的高度。
方向二就是,在宽度已设定的时候,就能改变内部元素的位置。
我们仍然用例子分析:
![](https://fb-s-b-a.akamaihd.net/h-ak-fbx/v/t31.0-8/13040979_231217613934692_933393506512070597_o.jpg?oh=de0639efc256869a101908f02a196eba&oe=5A1B4D9D&__gda__=1512991056_36b6686075b4eb88f4d293cef66db7b3)
比如说有一个div,然后里面放了一个课后帮这么一个行内元素,
此时的宽度是设定好的960,内容宽度就是算出来的值,960减去留白就是内容宽度。
然而div的高度是未设定的,所以他的值是由内容高度加上上下留白,也就是12+0=12。
那如果我们此时给他设定左右留白和上下留白会发生什么事情呢?
![](https://fb-s-b-a.akamaihd.net/h-ak-fbx/v/t31.0-8/13071785_231217667268020_350392017244182001_o.jpg?oh=0cad57dea93edfbbff07e182e2390af5&oe=5A21CFB3&__gda__=1512788350_5e6b8c6a11a9df6d0cf983f67fdbbc68)
就会发生这么个情况:
首先说宽度,由于宽度已经设定了,那么在加上留白20像素,那就会压缩内容的宽度。
也就是由原来的960-20就等于内容的宽度940。其实相当于改变了课后帮在水平方向的一个位置。
再来说高度,由于高度是没有设定的,此时的高度是由内容撑开的,我们设定了上下留白,
留白部分就从0变到了20,留白有了20在加上内容的高度12,那么此时的高度就变成32了,
这样的话其实相当于改变了课后帮在垂直方向的一个位置。
我们总结一下:
![](https://fb-s-d-a.akamaihd.net/h-ak-fbx/v/t31.0-8/13048264_231217750601345_6272118824795286255_o.jpg?oh=1ea7884ee30c492fb3edaf87be9436d2&oe=5A20031E&__gda__=1516263925_a9b082836651c03fa167b319ab68492a)
两点
1.横向上,压缩了内容区域,改变了内容元素的位置。
2.纵向上,撑大了元素,其实也相应的改变了内部元素的位置。