对于这种基础中的基础的知识点，这里只是想更加全面细致的帮大家整理出来。并结合具体的例子进一步说明某些特性的具体使用场景。
1. 盒模型分类
首先要明确一个概念，盒模型是属于css范畴的叫法，代表了元素在页面上的呈现形式。盒模型指的是每个元素在页面中都会生成一个矩形区域，也就是盒子。下面这些分类以前会叫做块级元素或行内元素，显然元素是属于HTML的范畴，所以更准确的叫法是下面这些。
1.1 块盒：
独占一行。
display: block;
常见标签：div p h1-h6
宽度会占一整行。
高度默认为0，高度随内容撑开
设置宽高有效
1.2. 行盒：
不独占一行。
display: inline; 默认值
常见标签：span a
宽高默认为auto 宽高都随内容撑开
设置宽高无效
有空白折叠(当出现多个空格或换行符等的元素的时候，会合并为一个空格)
1.3. 行块盒：
不独占一行。
display: inline-block;
常见标签：input
宽高随内容撑开
设置宽高有效
有空白折叠
h1{
background-color: wheat;
}
p{
background-color: purple;
}
.box1{
background-color: maroon;
}
span{
background-color: red;
}
.box3 div{
background-color: blue;
display: inline-block;
}
<h1>Lorem ipsum dolor sit amet consectetur.</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut, necessitatibus beatae vero, officia alias voluptas sapiente rem harum, doloribus nisi nam accusamus consequatur reiciendis porro! Sit provident neque dolorum optio.</p>
<div class="box1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, itaque quisquam? Ipsa amet harum obcaecati, maiores eius nisi expedita veniam vitae doloremque. Facere voluptatum, at error quod ipsa enim perferendis.</div>
<br>
<div class="box2">
<span>Lorem.</span>
<span>Quos.</span>
<span>Id.</span>
<span>Pariatur?</span>
<span>Aliquid?</span>
<span>Labore?</span>
<span>Numquam.</span>
<span>Dicta.</span>
<span>Delectus.</span>
<span>Non?</span>
</div>
<br>
<div class="box3">
<div>Lorem.</div>
<div>Voluptas.</div>
<div>Iusto?</div>
<div>Maiores!</div>
<div>Rem?</div>
<div>Eius!</div>
<div>Quasi!</div>
<div>Corrupti.</div>
<div>Laboriosam.</div>
<div>Expedita.</div>
</div>
2. 盒模型由四部分组成
2.1. 内容区：盒子内容区域
content
默认设置宽高的区域
内容盒：content-box
2.2 内边距：盒子边框到盒子内容之间的距离
padding 简写属性、速写属性
padding-left、padding-right、padding-top、padding-bottom
填充盒：padding-box
2.3. 边框：
border 简写属性、速写属性
border: 1px solid red;
边框宽度、border-width、默认为0
边框样式、border-style、默认为none
边框颜色、border-color、默认使用字体颜色
border-left-width、border-left-style、border-left-color
border-right-width、border-right-style、border-right-color
border-top-width、border-top-style、border-top-color
border-bottom-width、border-bottom-style、border-bottom-color
边框盒：border-box
2.4. 外边距：盒子之间的距离
margin 简写属性、速写属性
margin-left、margin-right、margin-top、margin-bottom
3.内容盒、填充盒、边框盒具体使用场景
3.1. 设置如何计算一个元素的总宽高的时候
这个属性值非常有用，一般会用在列表页面缩略图块需要固定大小的时候，可以设置这个属性，然后再任意调整内容，内边距，边框等尺寸都不会影响盒子所占据的空间。
box-sizing: content-box; // 宽高设置给内容盒
box-sizing: padding-box; // 宽高设置给填充盒
box-sizing: border-box; // 宽高设置给边框盒
3.2. 设置元素的背景区域的时候
background-clip: content-box; // 背景覆盖范围为内容盒
background-clip: padding-box; // 背景覆盖范围为填充盒
background-clip: border-box; // 背景覆盖范围为边框盒
.box{
width: 600px;
border: 1px solid blue;
overflow: hidden;
}
.box div{
width: 200px;
height: 200px;
background-color: purple;
float: left;
border: 10px dashed red;
padding: 10px;
/* margin: 10px; */
box-sizing: border-box; /* 如何计算一个元素的总宽高 */
background-clip: border-box; /* 设置元素的背景区域 */
}
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
4. 三种盒子更进一步的区别
4.1 宽高
块盒：
方方正正的盒子，无论内容到哪里，都会占据一整行。
设置宽高都有效，但是依然占据一整行
行盒：
盒子沿着内容延伸，内容到哪里，盒子就到哪里。
设置宽高没有效果，原因：行盒的宽高应该取决于内容
只能通过字体大小，行高(背景不覆盖)
没有办法在上下任意增加背景的
4.2 内边距
块盒：
都有效
行盒：
左右有效，上下不实际占据空间
4.3 外边距
块盒：
都有效
行盒：
左右有效，上下不实际占据空间
4.4 边框
块盒：
都有效
行盒：
左右有效，上下不实际占据空间
4.5 行块盒：除了不独占一行，全部和块盒一样
p{
width: 200px;
height: 200px;
padding: 10px;
border: 10px dashed red;
margin: 10px;
background-color: wheat;
overflow: hidden;
}
span{
line-height: 3;
width: 100px;
height: 100px;
padding-left: 100px;
padding-right: 100px;
padding-top: 20px;
padding-bottom: 20px;
border: 10px solid red;
margin-left: 100px;
margin-right: 100px;
margin-top: 100px;
margin-bottom: 100px;
background-color: wheat;
}
div{
display: inline-block;
background-color: magenta;
width: 200px;
height: 200px;
padding: 10px;
margin: 10px;
border: 10px solid red;
}
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident illum alias reprehenderit esse labore possimus enim dolore, ducimus rerum eos, odit iure cum quo! Vero doloribus iusto quaerat eos consequatur!</p>
<br>
<span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius illum culpa omnis, quam et mollitia expedita. Dicta aliquid, sint porro necessitatibus deleniti nihil aut animi, obcaecati incidunt minima quasi tempore!</span>
<span>Consequatur, iure recusandae. Esse tenetur dolore possimus assumenda nesciunt repudiandae. Neque iste officia quam corrupti quis accusantium, totam quo cumque ea cum consequatur. Harum eius aliquam sed odit non culpa.</span>
<br>
<div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio, provident ea sed, similique nostrum omnis quis corporis eligendi inventore neque, distinctio quae deserunt itaque doloribus pariatur! Adipisci sed vero odit!</div>
5. 元素的可替换性
这里要说一下行盒里面最特殊的img元素，img既可以和行盒元素并排一行排列，但又能设置宽高等块盒才具有的属性值，这是为什么呢，秘密就在于元素的是否可替换性。
5.1. 块盒：
div h1-h6 p
5.2. 行盒：
可替换：可以通过元素的属性值替换
非可替换元素：span a
可替换元素：img可以通过src属性对显示内容进行替换
5.3. 行块盒：
input
img{
width: 200px;
height: 200px;
padding: 10px;
margin: 10px;
background-color: red;
border: 10px dashed blue;
background-clip: padding-box;
}
input{
width: 100px;
height: 100px;
}
<img src="1.jpg" alt="">
<br>
<input type="text">
6. 溢出盒子处理
对于块盒水平会占据一整行，垂直高度会随着内容撑开，内容多高，盒子就会多高。当然这是在没有对盒子设置高度的情况下。 一旦设置了高度，那么盒子即要保证显示为具体设置的高度，同时又需要展示盒子内部所有的内容，如果内容过多，必将会在盒子外部显示。 对于溢出的这部分内容，可以通过overflow属性进行设置。
6.1 overflow：设置内容溢出后的处理方式。
overflow: visible 默认值 可见的
overflow: hidden 不可见的
overflow: scroll 始终出现滚动条
overflow-x: scroll 始终出现横向的滚动条
overflow-y: scroll 始终出现纵向的滚动条
overflow: auto 自动，需要出现滚动条的时候才出现
6.2 overflow的小应用
一般用在网站的logo图标上，logo图标一般使用h1标签进行包裹，同时为了seo的考虑，h1作为页面最重要的标签，里面最好放置位置内容来利于seo的优化，但是又不希望文字显示出来，这种情况下使用overflow来解决是非常适合的场景
7. 空白处理
在页面上我们经常会见到比如新闻标题，对于过长的标题会省略后面的文字部分，用省略号代替，这种情况下就需要用到空白处理。 空白处理的属性为white-space 比较常用的两个属性值为normal和nowrap，这两个都会合并空格为一个空格，但是前者在需要换行的时候会自动换行，后者则在需要换行的时候也不换行。
空白处理小应用：
列表内显示不下的更多文字用省略号代替
li{
list-style-type: none;
line-height: 2;
border-bottom-width: 1px;
border-bottom-style: dashed;
width: 360px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div{
background-color: wheat;
width: 200px;
height: 200px;
white-space: nowrap;
}
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas veritatis dolorum, molestias, odio nisi eveniet nihil aliquam minima, saepe doloremque possimus eligendi velit mollitia impedit qui sint illo praesentium? Esse.</div>
<ul>
<li>Lorem ipsum dolor sit amet consectetur.</li>
<li>Commodi est labore porro perferendis dolor.</li>
<li>Delectus laudantium natus excepturi hic consequuntur.</li>
<li>Quis distinctio laborum molestiae minima minus?</li>
<li>Odio, earum voluptatem. Tempore, id libero?</li>
<li>Laboriosam omnis nulla officiis! Id, nostrum.</li>
</ul>
8. 更多应用
8.1 分页
主要技术点是将a链接转换成行块盒模型
div{
font-size: 0;
}
div a{
display: inline-block;
width: 30px;
height: 30px;
box-sizing: border-box;
border: 1px solid blue;
text-align: center;
line-height: 30px;
text-decoration: none;
font-size: initial;
margin-right: 5px;
}
<div>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<a href="">9</a>
<a href="">10</a>
</div>
9. 视频讲解教程
想详细了解的小伙伴可以去观看关于这篇文章详细的视频教程。
