1、打开WebStorm开发工具，新建test.html文件，并将bootstrap的样式文件放在同级目录
2、在test.html文件引入bootstrap样式，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="bootstrap4.0dist/css/bootstrap.min.css"> <title>Title</title></head><body></body></html>
3、修改代码，添加两个div，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="bootstrap4.0dist/css/bootstrap.min.css"> <title>Title</title></head><body> <div style="width: 100px;height: 150px"> <div class="bg-dark text-white font-weight-light ">hello</div> </div></body></html>
4、浏览器查看效果如下，打开开发者模式，注意观察内层的div宽度占满外层宽度，高度是里面的文本的高度而变化，并不会占满外层div高度，这就是div这个元素的特性
5、设置内边距，用p-数字形式表示，如果仅仅设置上边距pt-数字，同理左pl，右pr，下pb，上下y，左右x，数字范围是0-5，以rem为单位，rem实际就是px一定比例的换算，具体效果可以实际尝试，现修改代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="bootstrap4.0dist/css/bootstrap.min.css"> <title>Title</title></head><body> <div style="width: 100px;height: 150px" class="bg-danger"> <div class="bg-dark text-white font-weight-light p-1">hello</div> </div></body></html>
6、浏览器查看效果如下图，内边距实际也增加了内层div的高度
7、设置外边距，格式和内边距一样，茧盯璜阝就是将p换成了m，代码如下：<!DOCTYPE html><html lang="en">媪青怍牙<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="bootstrap4.0dist/css/bootstrap.min.css"> <title>Title</title></head><body> <div style="width: 100px;height: 150px" class="bg-danger"> <div class="bg-dark text-white font-weight-light p-1 m-3">hello</div> </div></body></html>
8、浏览器查看效果如下图，内层div实际就是一个盒子
9、为了更好的理解，我们将箍鲂遥哒外层div也设置外边距和内边距，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="bootstrap4.0dist/css/bootstrap.min.css"> <title>Title</title></head><body> <div style="width: 100px;height: 150px" class="bg-danger p-2 m-4"> <div class="bg-dark text-white font-weight-light p-1 m-3">hello</div> </div></body></html>
10、浏览器查看效果如下图，注意观察上部的外边距，并不是m-4和m-3的距离之和而是m-4的距离，这是外边距叠加效应取较大的那个的特性
