静态页面制作:11盒子模型
我们上一节主要介绍的是结构表现分离的好处,写完之后我们最终的效果并没有特殊的变化。
![](https://scontent-mia3-2.xx.fbcdn.net/v/t31.0-8/p720x720/13063267_228897037500083_4573123083959538164_o.jpg?oh=059abab8467b8f15c145021a9ecb56f5&oe=5A155BCB)
那么我们现在来分析一下,此时的标题栏还有哪些是需要我们去做改变的?
最扎眼的地方其实就是右上角那三个内容,发现他们之间并没有间隙,让人看起来很不舒服,我们来通过审查元素,对样式进行处理。
![](https://scontent-mia3-2.xx.fbcdn.net/v/t31.0-8/p720x720/13071783_228897677500019_3906237929513086643_o.jpg?oh=2f900aa5e268ba8d194d7bb08a40a9d2&oe=5A37B12D)
我们通过审查元素的方式来添加样式,首先我选中致蓝鸥人的标签,此时我们发现在右侧style里多了一些东西。
之前我们都是在element.style中写样式,但现在我们不用在这里写了。
因为如果在element.style中写样式,就会写在标签内部中。所以我们要写在.nav里面,并且查看我们写完样式的效果。
在这里我们需要注意两点:
第一点:当我们选中致蓝鸥人这个a标签,改变样式之后,我们发现三个a标签都收到了影响,
并不是只有致蓝鸥人这一个标签产生了间距,而是三个都有。
第二点:我们来看看在右下角有一块图形,如下图。
![](https://scontent-mia3-2.xx.fbcdn.net/v/t1.0-9/13043434_228899430833177_4046555422573147529_n.jpg?oh=7823b7ff13f1dc4d100c9c2a04bd3821&oe=5A318551)
上图我们很早就已经看到了,但是我们一直没有说它,现在我们来研究一下,这个图中所包含的内容。
![](https://scontent-mia3-2.xx.fbcdn.net/v/t31.0-8/13055006_228899777499809_4160444469872464232_o.jpg?oh=93cb74190586d06b674168d078afefbe&oe=5A2E12BC)
我们刚刚给nav加了一个margin-left:40px;并且在右下角的图中也有了一些变化。
现在我们来说说这个盒子。其中包括三个东西。分别是边距:margin,边框:border,留白:padding。
其实这三个东西很好理解,我们来对他们一一分析。
![](https://scontent-mia3-2.xx.fbcdn.net/v/t1.0-9/12993438_228900587499728_3852612884723558913_n.jpg?oh=94a44a9fa12df69f3e521b7b51bb1aa9&oe=5A359E5B)
首先我给大家画了一个蓝色的框,就把它理解成一张纸。然后我们开始在里面写字。
![](https://scontent-mia3-2.xx.fbcdn.net/v/t1.0-9/13006699_228901070833013_4237458343235154544_n.jpg?oh=e8e6c8f69a065a5c2a52267d8bab5f91&oe=5A1D0286)
由于我们比较节俭,不浪费纸张,所以我们从左上角开始写。
但是从左上角开始写我们发现,离上面太近了,在视觉上效果不太好。所以我们想着找个好看的位置写。
![](https://scontent-mia3-2.xx.fbcdn.net/v/t1.0-9/12998645_228902544166199_4644383067278184951_n.jpg?oh=5709f12fae1fb4e21918a75d5e469093&oe=5A276A9B)
我们在上面留出一块区域,在左侧也留出一块区域,这样的话就看起来好多了。
那么留出来的这块区域,我们不打算写东西。这块区域就叫做留白。
![](https://scontent-mia3-2.xx.fbcdn.net/v/t1.0-9/12987179_228908554165598_510123789845385445_n.jpg?oh=00e7e38b5b188af83f6bb4fac0b8b322&oe=5A22602A)
我通过绿色的背景展示出来,留白:padding,然后在中间的部分仍然是内容区域,在内容区域我们可以继续写东西。
![](https://scontent-mia3-2.xx.fbcdn.net/v/t1.0-9/13012751_228908910832229_7528166256364905445_n.jpg?oh=00d001cf7e64e41cb05b3059235c5feb&oe=59EB05C5)
我们此时假定在内容区域已经写满了内容,就好比是我们写的一个书法,
写好之后,我就想给它加个框给表起来,那我们现在给它加个边框。
![](https://scontent-mia3-2.xx.fbcdn.net/v/t1.0-9/13015412_228909104165543_3168314524022742891_n.jpg?oh=5a6759af0cb529f5325557973f159753&oe=5A387A47)
加了边框:border,其实我们这个书法有了边框之后,其实这幅书法作品就已经比较完整了,而且也比较有意境了。
既然都有意境了,我们就希望有更高的要求了,边上最好不要有什么干扰元素。
比如如果此时旁边跑来一条狗,那这个意境其实就打破了。
![](https://scontent-mia3-2.xx.fbcdn.net/v/t1.0-9/13007150_228909244165529_2331329545594003937_n.jpg?oh=a74c2302ead704ef9dabd80f230c1529&oe=5A2E8D91)
我们不希望有任何东西干扰这幅书法作品,那该怎么办呢?我们要求在这个书法的一定范围之内,任何东西都不可以过来。
![](https://scontent-mia3-2.xx.fbcdn.net/v/t31.0-8/p720x720/13041267_228909494165504_3222696658148266415_o.jpg?oh=6629a884daf522cdc0a628a3f216d9bc&oe=5A135623)
其实这就相当于我们给它指定了一个边距,我们最外面的就是边距:margin,
边距实际上是没有背景颜色的,这个框也并不属于书法作品的一部分,但是他确确实实为这个书法作品腾出来一块区域,
其他东西不能靠近。现在我们在来看看这三层结构。
![](https://scontent-mia3-2.xx.fbcdn.net/v/t1.0-9/s720x720/13015432_228909800832140_3896854858286578649_n.jpg?oh=11e8681eb4dd5613cd84529f6b84119c&oe=5A20EE7B)
看上图三层,最外层是边距:margin, 边距其实不属于这个元素。然后是边框,之后是留白,然后最中间是我们的内容。
我们通过上面的例子对这三层进行了解释,他们到底有什么用呢?
![](https://scontent-mia3-2.xx.fbcdn.net/v/t31.0-8/13002579_228909987498788_2771106093953486917_o.jpg?oh=0cc5831432a8b0e85a70a25665d68ecb&oe=5A2BACCA)
其实这三个:边距、边框和留白,他们都是样式的一种。我们先来说说边距:margin。
![](https://scontent-mia3-2.xx.fbcdn.net/v/t1.0-9/12993558_228910104165443_5418993531785831778_n.jpg?oh=fc063052921804d40d4ac1f28472ea4c&oe=5A1FFECE)
边距到底有什么用呢?其实简单一句话,就是改变与周围元素的相对位置。
就像我们刚才所遇到的那个情况,三个a标签贴在一起,然后我们添加一个margin-left:40px;
通过字面意思我们也不难理解,那就是让它离左边距,有40像素,有了这个要求之后,他自然跟周围的元素拉开了一定距离。
这就达到了改变与周围元素的相对位置。
我们在具体的说一下:
![](https://scontent-mia3-2.xx.fbcdn.net/v/t31.0-8/13063160_228911037498683_7042221547696303744_o.jpg?oh=9cbeb124e2c26b3dc32b6cdd334acf86&oe=5A3102E2)
边距一共有四个方向,上下左右。我们可以分别指定,例如上边距,下边距,左边距以及右边距。我们现在举个例子:
![](https://scontent-mia3-2.xx.fbcdn.net/v/t31.0-8/13041390_228911227498664_7019681240284589361_o.jpg?oh=566e9216836fe034b71af58029d0d02c&oe=5A393318)
比如说我们有一个div,这个容器的内容区域是整个的区域。我们往里面放一个课后帮这几个字。
![](https://scontent-mia3-2.xx.fbcdn.net/v/t31.0-8/13063261_228911310831989_404453674399116756_o.jpg?oh=2ff54a632215af766f044784faf24cd6&oe=5A2D22DD)
课后帮是一个行内元素,我们要设置margin的边距,就是让他改变与周围元素的相对位置。
![](https://scontent-mia3-2.xx.fbcdn.net/v/t31.0-8/13002459_228911417498645_7510107443164568428_o.jpg?oh=033387c15bcb39d51605ce5a87c6c13d&oe=5A1BF062)
我们打算设定一个margin-left:20px; 那设置完之后,效果会变成什么样呢?
![](https://scontent-mia3-2.xx.fbcdn.net/v/t31.0-8/13063253_228911564165297_7424389477768447419_o.jpg?oh=d1f4362130df19b90d0b23949dae69ea&oe=5A32B18F)
这个时候课后帮其实就跟他的容器div的左边,保持了20像素的一个距离。
所以就是只改变与div的相对位置,而不会改变元素的大小。
那我们看看我们刚才所遇到的问题。
![](https://scontent-mia3-2.xx.fbcdn.net/v/t1.0-9/13012871_228911644165289_3189497312391734131_n.jpg?oh=9e98722771af8ba828ef0e536c36665e&oe=5A1516A6)
我们有三个链接在右上角,然后我们给他们公用的样式加了一个margin-left:20px;这个时候就变成了这个样子。
![](https://scontent-mia3-2.xx.fbcdn.net/v/t1.0-9/13015506_228911814165272_5171351526951569439_n.jpg?oh=aec19ad4d346931da8871c14cf3e43d1&oe=5A37F694)