盒子模型

盒子模型

盒子的组成的四种部分：

1. 内容content：就是实际的包裹物；
2. 内边距padding：盒子的内部的填充；
3. 边框border：  盒子的框架；
4. 外边距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;的时候，会造成父层也随之塌陷的问题；

解决的方法是：

1. 在父层中设置部分隐藏功能overflow: hidden;
2. 在父层中设置float：left;浮动属性
3. 在父层中设置较小的内上边距padding-top：1px;
4. 在父层中设置设置较小的上边框border-top:1 solid 颜色最好同内容的背景色

行块标签之间的转换：

display：block;

行标签转换成块标签，具有块标签属性情况，可以设置宽高

display：inline;

块标签转换成行标签，具有行标签的属性情况，不在可以设置宽高

display：inline-block;

 转换成内联标签，同时具备行标签和块标签的属性情况，可以设置宽度，同时在一行中显示。

两种解析盒子的模式：

         标准模式（大多数的浏览器的计算盒子模型的宽度的方式）：

                   计算盒子的宽度是：

                            内容+2倍的外边距+2倍边框+2倍的内边距；

         怪异模式（IE6以及之前的IE浏览器）

                   计算盒子的宽度是：

                            内容+2倍的外边距；