CSS盒模型：将页面所有元素表示为一个个矩形的盒子，CSS决定这些盒子的大小，位置以及属性。
<h1>...<h6>、<p>、<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<header>、<main>、<footer>、<aside>、<nav>、<section>、<table>、<pre>
<a>、<span>、<em>、<strong>、<img>、<input>、<label>、<textarea>、<select>、<button>、<code>
1. 写法：display: inline-block
2. 特性：
3. inline-block缝隙 css常见样式二
4. display的值
②：浮动元素和绝对定位元素的外边距不会折叠。
PS:
PS：通过设置margin让元素居中
1.3.1 设置边框的值
1.3.2 边框常用属性
实现效果：
参考：
https://static.xiedaimala.com/xdml/file/f40ceb64-df08-4420-9226-7f76dbff15d5/2019-11-6-10-45-8.pdf
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
