文档中每个元素都会生成一个矩形框，我们通常称之为元素框。这个框体描述元素在文档布局中所占的空间。因此，每个元素框之间都是有影响的，并且涉及到位置和尺寸。在默认情况下，渲染出来的文档中，各矩形框的排布方式在视觉上不会出现重叠效果。
1. 什么是盒子模型
所有的HTML元素都可以看作为一个盒子，这个盒子包含了：边框、边距、填充的实际内容。
在HTML中，每个元素都被解析成一个盒子，拥有盒子一样外形和平面空间。完整盒模型是由 width height 来组成内容区（Content）
、boder（边框）、padding（内边距）、margin（外边距） 组成的。
1.1 尺寸
CSS 尺寸 属性允许用户控制元素的高度和宽度。
默认情况下，元素的宽度 width 是指内容区域的宽度（从左内边界到右内边界），height 同样是从上内边距到下内边距。
width: <length> | <percentage>;
当设置百分比的时候，它是相对父元素的宽度或者高度。
1.2 边框
border 是一个复合属性，一个边框包括边框的宽度、边框的颜色、边框的类型。
border: 10px solid #000;
边框涉及到的属性实际长达20多种，在实际开发过程中，一般都是采用这种复合属性写法。当然也存在需要单独设置某个条件的地方。
1.2.1 边框的宽度
border-width: medium(3px) | 5px | 5eml;
边框的宽度可以使用绝对单位，也能用相对单位。但是绝不能有百分比和负值。
1.2.2 边框的类型
border-style: <style>;
- none：默认值，必须要填写边框的类型；
- solid：定义一个实线边框；
- dotted：定义一个点线边框；
- dashed：定义一个虚线边框；
- double：定义两个边框；
1.2.3 边框的颜色
border-color: red | #ff0000 | #f00 | rgb(0,0,0) | rgba(0,0,0,0.5) | transparent;
16进制颜色缩写：只有当第一位和第二位、第三位和第四位、并且第五位和第六位的值同时相等时。对于 #ffcc89 这个颜色，无法进行缩写。
1.2.4 单边框设置
在上面的属性中，我们四个边框都进行了统一的设置。如果需要改变其中一条边框的属性，则可以通过下面的代码：
border-top-style: dotted;
border-right-style: dashed;
border-bottom-style: solid;
border-left-style: double;
border-top: 10px solid black;
1.3 外边距
外边距用于定义元素周围的空间，这个空间没有任何内容（包括颜色）。它和边框可以设置的属性一致，能够单独设置某条边，也能统一设置。外边距也可以理解为当前元素与父级元素或者与兄弟元素之间的距离。
margin: auto | <length> | <percentage>
-
auto：浏览器自动计算外边距；
-
length：具体单位， px、em、cm；
-
percentage：基于父元素的宽度的百分比的外边距，如果父元素没有宽度，那就寻找祖辈元素的宽度，如果祖辈元素也没有定义宽度，那就按照屏幕的宽度来作参考对象。
为什么要设计成按父元素的宽度去作为参考值？为什么不参考高度？
1.3.1 外边距的合写属性和分写属性
分写属性：
margin-left | margin-right | margin-top | margin-bottom
合写属性：
margin 合写属性一共有四个值，值的方向对应顺序为 上——右——下——左（从顶部开始顺时针）。
margin: 100px 200px 300px 400px;
margin-top: 100px;
margin-right: 200px;
margin-bottom: 300px;
margin-left: 400px;
分别设置上下、左右两部分的值
margin: 100px 200px;
margin-top/margin-bottom: 100px;
margin-left/margin-right: 200px;
分别设置上、左右、下三部分的值
margin: 100px 200px 300px;
margin-top: 100px;
margin-left/margin-right: 200px;
margin-bottom: 300px;
1.3.2 margin 的特殊应用
当要居中一个块级元素时，可以利用 margin: auto 的特殊性，让浏览器来帮忙把剩余的空间平均分配到元素的两边，从而实现块级元素水平居中的效果。
margin: 0 auto;
auto 到底干了什么事情？？
首先，0 代表的垂直方向的外边距为0，水平方向的外边距为 auto。由于auto会让浏览器自动计算外边距的值，它会将剩余的空间平均分配到外边距的两边。具体计算过程：左右外边距具体的值 =（父级元素内容宽度 — 含边框内边距的当前元素的宽度） / 2 。
auto 这个属性值就做了一件事：将父级元素的剩余空间，平均分到了元素的左右外边距，从而实现水平居中的效果。
1.4 内边距
padding 内边距，即盒子模型中，边框到内容区域的距离。这个区域会被盒子模型的背景颜色填充。
- 内边距的值与外边距类似，都有4个值，计算方法也是相同的；
- 内边距也有
padding-left | right | top |bottom四个方向的分写方法； - 内边距没有负值，设置负值时相当于
padding: 0； - 内边距的单位为百分比时，也是按照父元素的宽度进行计算的。
一些小问题
border: 0 和 border: none 的区别
- 当
border: 0的时候，表示设置了边框，但边框的宽度为0，此时浏览器会正常渲染元素的边框效果，会占用内存空间； - 当
border: none的时候，表示边框被取消了，浏览器不会进行任何边框的渲染，不会占据内存空间。
纵向外边距叠加
在默认情况下， 两个块级元素均设置了纵向的外边距时，第一个元素的下外边距会与第二个元素的上外边距发生重合。
之所以产生这个问题，原因在于最早的段落设置，最初HTML中p标签都存在默认的上下外边距，为的是和别的元素产生一定的距离。但是用在多个段落中时，多个p元素上下排列，这就导致了每个p元素之间的距离变得很大。出于这样的考虑，浏览器解析设置了纵向外边距叠加的规则。
解决这个问题并不难，可以将元素设置为浮动、添加 overflow: hidden 等属性。涉及到一个概念： BFC（块级格式化上下文）。
网友评论