前言
实践搭了一个网站，缩放之下的兼容性还是没有能够保证，图片容易变形，版式容易乱。而且我对于bootstrap 4的各种样式的内外边距都不了解，很容易手足无措。所以我今天专门从头开始，利用浏览器的调试模式实际研究一下各种class的样式，尤其是边距问题。当然，最好的学习方法是去查找官方文档。
基础知识
盒子模型
只有块级元素才有盒子模型。在CSS 3的标准盒子模型中，包括margin（外边距），border（边框），padding（内边距）和content（内容）。padding的存在使得content居中、美观，margin主要用于调整盒子的位置。样式属性中的width和height指的都是content的宽和高。盒子嵌套时，内盒子整体，包括margin在内，是外盒子的content。background-image覆盖content和padding，而background-color覆盖content，padding和border。
块级元素和行内元素
CSS规范首先确定了一种标准的排版方式，各种元素都按照这种标准的方式进行布局，不使用其他与排列和定位相关的特殊CSS规则，这就是所谓的 “标准文件流”，简称为“标准流”方式。页面元素可以分为两类：
块级元素（block element）：总是以一个块的形式表现出来，并和同级的兄弟依次垂直排列。最常用的块级元素是div。
行内元素或者称为内联元素（inline element）：相邻元素之间横向排列，到最右端自动折行。比如说常用于文本容器的span就是行内元素。
区别
它们的区别主要如下：
-
块级元素，以一个新行开始，一个换行结束，即使content只有一小块，也会使得下一个元素换行。添加float属性以使其无视换行，自动填充至自己的边框接触到父级元素或者其他float元素的边框;
行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。 -
块级元素可以设置宽高，而行内元素不可以。
-
块级元素可以设置所有的margin，padding；
行内元素水平方向的margin-left和margin-right， padding-left和padding-right可以生效。但是竖直方向的margin-bottom和margin-top， padding-top和padding-bottom却不能生效。
可以通过修改display属性来切换块级元素和行内元素,但是一般不建议随便修改。
定位
行内元素的水平margin是相邻margin相加的结果；
块级元素的垂直margin是取相邻margin的最大值。
整体框架
不使用bootstrap时，原生html的body有8px的margin（我没有特别注明的话，默认说的就是上下左右的边距都一样），没有padding；bootstrap中body无内外边距。
“container-fluid”与”container”
原生div无内外边距，大小全部由内容决定;
“container”的width随屏幕尺寸范围在几个固定的值之间变化，有15px的左右padding，而左右margin随尺寸自适应，高度随内容而定。因为content的width动态变化，基本上在各个尺寸下都是铺满的，所以”container”基本不受float属性影响，始装占一行。
类似的”container-fluid”与”container”的区别在于width是100%，即content在宽度上默认始终铺满。
它们常用于各种元素的容器，官方建议不要在 "container" 中嵌套另一个 "container"。
html的高度是不确定的，所以100%的height要取决于父元素的实际高度，父元素没有实际高度的话，浏览器是不知道100%到底是多高的。
@media (min-width: 1200px)
.container {
width: 1170px;
}
@media (min-width: 992px)
.container {
width: 970px;
}
@media (min-width: 768px)
.container {
width: 750px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
“row”
“container”默认有15px的左右padding，方便在里面直接插入文本，有较好的居中效果。但是使用栅格效果时，padding会造成困扰。所以”row”提供了-15px的左右margin，刚好消除了它的影响。所以设计上”row”一直要放到 “container”或者”container-fluid”的内部。
盒子的边界是margin的外边界，负的margin相当于边界收缩了，因此会发生重叠现象。（可以设定background-color来观察）
显然，既然叫做row，它会单独占据一行，平行的"row"会垂直分布。
“col”
“col”是放在”row”里面的。
“col”有15px的左右padding，不难发现，最后的效果是，”col”的border刚好和”container”的border重合。同时，平行的”col” 的content之间就有了30px的槽（2*15px的padding）。
“col”样式按一个”row”中的”col”的数量自动等宽平分空间，你也可以使用”col-xx-n”指定在xx尺寸下占据标准栅格12列中的n列。比如”col-md-6”指明在中等尺寸下占据6列。你可以为所有尺寸指定列数，写在一个class属性中，使用空格分隔，它们彼此不会冲突；或者你只指明一个尺寸下的情况，那么会按照响应式布局自动调整列数。
两种栅格系统
由于这样巧妙的栅格系统设计，不建议自定义修改框架样式的各个边距，同时应当采用"container"-》"row"-》"col"这样的嵌套设计。
因为平行的”row”会自动换行，要想形成整个栅格，直接再写一个平行的”row”就行了。最终效果是 “container”里面填充着没有上下padding但有左右padding（各15px）的栅格。
也可以在”col”中再嵌套一”row”进行nesting 扩展。因为巧妙的边距关系，在 nesting 的时候”col”的作用也相当于”container”了，这样各个栅格就只有content而没有padding了。最终效果是 “container”里面密集的填充着由content形成的栅格。
参考
最后附上GitHub：https://github.com/gonearewe
