盒子模型
盒子模型
盒子的组成的四种部分：
- 内容content：就是实际的包裹物；
- 内边距padding：盒子的内部的填充；
- 边框border： 盒子的框架；
- 外边距margin：盒子的外部与其他的距离；
外边距margin：
包含四个方向的设置，分别是：left（左）、right（右）、top（上）、button（下）。
例：margin-left:100px;设置左边外边距为100px；
缩写形式：margin: 30px 60px 90px 120px;
/*对应的方向是上、右、下、左;*/
margin: 60px 90px 120px;
/*对应的方向是上、左右、下*/
margin: 50px 100px;
/*对应的方向是上下、左右;*/
margin: 50px;
/*对应的是上下左右*/
margin: 50px auto;
注意!! /*auto只能在左右水平居中，但是必须存在宽度，对于上下无效果*/
两个元素在margin设置的时候出现重叠的时候，处理的方式是，横向的进行加法的叠加，纵向的是取两者之间的最大值使用的。
边框border：
border:10px solid red;
border-style: dashed;/*虚线显示*/
border-style: dotted;/*点线显示*/
分别表示大小、样式、颜色；
样式包括：solid（实线样式）、dashed（虚线样式）、dotted（点线样式）
内边距padding：
基本的使用的方式同margin（外边距）的操作的方式来使用的，但是padding的区别就是，它会影响元素本身的宽高。
margin的bug：
当在双层的块标签中使用的时候会出现在子标签中设置margin-top：10px;的时候，会造成父层也随之塌陷的问题；
解决的方法是：
- 在父层中设置部分隐藏功能overflow: hidden;
- 在父层中设置float：left;浮动属性
- 在父层中设置较小的内上边距padding-top：1px;
- 在父层中设置设置较小的上边框border-top:1 solid 颜色最好同内容的背景色
行块标签之间的转换：
display：block;
行标签转换成块标签，具有块标签属性情况，可以设置宽高
display：inline;
块标签转换成行标签，具有行标签的属性情况，不在可以设置宽高
display：inline-block;
转换成内联标签，同时具备行标签和块标签的属性情况，可以设置宽度，同时在一行中显示。
两种解析盒子的模式：
标准模式（大多数的浏览器的计算盒子模型的宽度的方式）：
计算盒子的宽度是：
内容+2倍的外边距+2倍边框+2倍的内边距；
怪异模式（IE6以及之前的IE浏览器）
计算盒子的宽度是：
内容+2倍的外边距；
