在了解了最基本和最简单的网页制作之后，我们需要开始关注细节问题，比如我们期望的背景和文本的分布问题，如何才能达到我们预期的效果，如何更加的美观，如何让用户具有更好的体验感受，才是我们更加需要关注的
故我们开始讲解盒子模型，也就是一个块内的分布以及块外的布局的逻辑关系
同时在开头介绍一个小技巧，刚设计网页的盒子模型时，你可能不能正确的设计外边距，内边距，导致一些块之间的距离不能得到很好的控制，故这个时候我们可以通过检查网页的源代码来得到
右键网页任意一个地方 – 检查 – 得到HTML代码
或者通过组合键ctrl+shift+I
或F12功能键
点击不同的代码块，左部分可显示该代码块所占的区域，从而可通过检查不同的块来知道是哪一块的内外边距没有设置好
在正式进行盒子模型叙述之前，我们先来看一段代码
这段代码位于body内
div {border: 1px solid red; /*边框样式*/margin: 10px; /*外边距*/padding: 16px; /*内边距*/width: 600px; /*宽度*/height: 500px; /*高度*/}
这为一个盒子的基本属性
一、盒子边框设置
边框包括盒子的内边距和内容
边框风格
即边框的形状，可同时设置4个边框也可以分别设置
e.g.
border-style: dashed; /*均为虚*/border-style: dashed solid; /*上下为虚，左右为实*/border-style: dashed solid dotted; /*上为虚，左右为实线，下为点；*/border-style: dashed solid double dotted; /*上为虚，右为实线，下为实线，左为点线*/
边框宽度
其上下左右设置宽度的方法同上边框类型
边框颜色
同理设置
统一设置边框的宽度，颜色，风格
一般都统一设置
e.g.
border: 1px solid red;
边框形状
由于四个边框颜色一致时看上去为一个矩形，但是当我们将边框四个颜色设为不一样的时候，且增加其宽度，会发现各个边框形状为等边三角形
当边框宽度大于或等于3px时，当值越大，三角形越明显
二、盒子内边距
内边距也就是设置了边框与内容之间的空白区域
内边距设置
内边距特点
撑大元素的尺寸在设置宽高的时候要减去内边距的数值背景延申到padding区域
即背景将占据整个盒子
三、盒子外边距设置
向外扩展盒子与盒子周围其他盒子的距离，margin用于定义盒子边框与周围其它盒子的空白区域
外边距设置
其四个方向的使用方法同上
外边距合并
即两个相邻块级元素的外边距的取值问题
全为正
较小的margin塌陷到较大的margin中存在负
合并后的外边距高度等于这些发生合并的外边距的和和为负
重叠深度等于外边距和的绝对值和为0
两个块级元素无缝连接
在进行了上述的学习，我们能自由放置我们的某一个盒子了，但是如果有多个块，我们就存在将它如何放置的问题，故需要学习浮动和定位
我们已经可以开始设计精美的某一个盒子了，快动手尝试一下吧！
贴出来我初学时做的某些盒子（嘻嘻嘻）
做这个真的就会有一个很明显的过程，看着丑不溜秋的盒子作品再到自己慢慢的喜欢，就真的需要慢慢专研和学习的呢！
该系列博客参考了聂常红 刘伟著的前端HTML+CSS修炼之道
第四篇HTML+CSS学习笔记到此结束 cheers! ?
