【後转前要多久】# Day12 CSS - 盒模型 (margin、padding)

容器 Container

网页是设计来给人看的嘛，
构成一个网页的所有元件，不外乎是以下几种：

文字 text
图片 image
连结 a
输入框 input

以及包住以上所有元素的容器 container

仅运用这五大元素的排列组合，
就构成了当今所看到大大小小的网页。

其中比较跟文章内容无关的是容器，
容器通常会拿来作包装、排版，把相同样式或同样区块的网页元素包起来。

容器之中当然可以再包另一个容器，
就像家里的大柜子里摆放着小柜子，
小柜子里放着小盒子、小盒子里放着书签、回纹针等等内容物
nested cabinet

容器可以显现出来、也可以隐藏起来，
可以有宽度、高度，也可以设定成没有。
当然也可以玩所谓的俄罗斯娃娃
box in box

容器一词听起来简单明了，
但麻烦的地方在於，到底该怎麽去算他的长度、宽度？
为何怎麽设都不是预期想要的结果？

如果要计算容器的大小，每个容器都可以想像成是一个盒子(Box)，
只是这个盒子并不太友善。

盒模型 box model

这张图就是所谓的盒模型(Box Model)

盒模型

嗯，当初看到这张图时一脸懵逼。

打个简单的比喻好了：

我今天有个纸箱在这，我想装点什麽东西进去

content 是放进纸箱的内容物，
我今天可以装大东西、小东西进去，
当然也可以啥都不放、就此罢手

padding 我在纸箱里安置了一瓶58高粱酒，
放了易碎物品，当然需要厚厚一层气泡纸、泡棉垫来包住内容物、作为缓冲，
不然运输中炸裂怎麽办？

border 观察纸箱本身，可以看出纸箱的厚度、纸浆材质有没有扎实

margin 没料到的是，这个纸箱有点顽固，
纸箱说他要一个人占据角落的位置，
我只好把周围空间腾出来，成全他离其他纸箱远一点，让他成为边缘纸箱。

一个盒模型就由以上这四种空间距离所组成。

计算盒模型方式 box-sizing

CSS有两种计算盒模型的方式，两者计算方法完全不同。

box-sizing: border-box;
box-sizing: content-box;

我今天纸箱里面装着 一打58高粱酒、20公分厚的泡棉垫、以及厚度3公分的纸箱
并且要求在纸箱周围腾出空间

content-box

是预设计算方式
BOX实际长宽度是 height或width + padding + border

今天我拿着纸箱，要求送货老板帮我载货运送
老板说：「你这个价钱要这样算，我用内容物价钱跟你收费，
纸箱的边缘费就不跟你收了，
就只收你 一打58高梁酒(空间) + 20公分泡棉垫 + 3公分厚纸箱 的钱啦！」

钱就是实际长宽

border-box

调整border、padding
让BOX最终实际长宽度变成height或width

我再度拿着纸箱，要求另一个送货老板帮我载货运送
老板说：「哎呀，我们这边是先收费馁，你有多少就给多少，
蛤，你钱不够喔？
这样的话只能请你想办法让纸箱小一点了呐！」

钱不够的情况下，我只能回去重新包装，
但我就是要送 一打58高梁酒(内容物) 阿，
所以只能重新调整 20公分泡棉垫 、 3公分厚纸箱 的宽度了

看完以上的故事之後，再回来看 content、padding、border、margin

BOX 由 margin、padding、border、content 所组成

将width和height 等内容(content)设定完後，
在预设情况下，只有padding、border 会影响到实际的BOX长度宽度。