神奇的CSS盒子模型

CSS盒子模型：就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。这两种盒子模型都包含有内容（content）、填充（padding）、边框（border）、边界（margin）这四个组成部分，这四个部分都包含有top/right/bottom/left四个组成部分。

 

那这两个盒子模型有什么不同的地方呢？我们先来看看以下两张图：

                                   

从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：

标准盒子模型的盒子宽度：左右margin+左右border+左右padding+width

IE盒子模型的盒子宽度：左右margin+width

在CSS3中引入了box-sizing属性，box-sizing:content-box;表示标准的盒子模型，

box-sizing：border-box表示IE盒子模型。默认的情况下是标准盒子模型，仔细观察一下两张图就可以看出他们之间的区别了：

（1）    第一张是标准的盒子模型：

       

（2）    第二张是IE盒子模型：

                                  

说完了这两种盒子模型，接下来就说一下盒子模型的margin属性吧：

（1）margin可以实现一侧定宽的布局：

           

                  

加上margin之后：就可以实现一侧定宽布局了

                                          

（2）margin可以改变元素占据的尺寸：

                     （1）    block/inline-block水平元素都适用

                      （2）    与是否设置width/height值没有关系

                      （3）    适用于水平和垂直方向上

                

                                    

                                       

                                                    

                            

由上图可以看出，当改变margin的值的时候，容器所占据的尺寸也将发生变化。

（3）margin与百分比单位之间的关系（普通元素的百分比以及绝对定位的百分比之间的关系）：

                    （1）普通元素的margin的百分比是相对于容器的宽度来计算的。

                       

                       

                     （2）    绝对定位的百分比margin的值是相对于第一个定位（relative/absolute/fixed）祖先元素的宽度来决定的。

                      

             

（4）margin的重叠性：

        （1）    margin重叠只发生在block的水平元素上。（不包括float/absolute元素）

        （2）    margin重叠垂直方向上，margin-bottom/margin-top方向上。不考虑书写格式。

发生margin重叠的三种情景：

          （1）    相邻的兄弟元素

          （2）    父级元素和第一个或最后一个子元素

          （3）    空的block元素

A、相邻的兄弟元素之间发生重叠

                                
                              

B、父级元素与第一个或最后一个子元素

                                    

                             

     

                         

以上三种情况的结果都是

                              

父级元素和子元素发生margin重叠的条件：

    （1）    margin-top重叠：

               a． 父级元素是非块状格式化上下文元素

               b． 父级元素没有border-top的属性

               c．  父级元素没有padding-top的属性

               d． 父级元素和第一个子元素之间没有inline的内联元素

    （2）    margin-bottom重叠：

               a． 父级元素是非块状格式化上下文元素

                b． 父级元素没有border-top的属性

               c．  父级元素没有padding-top的属性

               d． 父级元素和第一个子元素之间没有inline的内联元素

               e． 父元素没有height，min-height，max-height的限制

如何防止父级元素和自己元素发生margin重叠：

    （1）    防止margin-top重叠：

            a． 在父级元素中加上overflow：hidden；

            b． 在父级元素中加上border-top:1px solid #000;

            c．  在父级元素中加上padding-top:1px;

            d． 在父元素和第一个子元素之间加上内联元素。

          

    （2）    防止margin-bottom重叠，与上面相似，另外可以设置父级元素的高度消除margin重叠。

C、空block元素的margin重叠

                      

效果是son的div只有1em并非2em。

 空block元素发生margin重叠的一些条件：

a.    元素中没有border设置

b.    元素中没有padding设置

c.    元素中没有inline的内联元素

d.    没有hieght/min-height的设置

如何防止空block的margin重叠：

a.    给son元素设置一个border

b.    给son元素设置一个padding

c.    给son元素设置一个inline的内联元素

d.    给son元素设置一个height

 

margin的计算规则：

（1）    正正取大值

（2）    正负值相加

（3）    负负最负值

A．正正取大值

                                          

正负值相加：

                                   

负负取负值：

相邻重叠绝对值取最大负值，负值重叠绝对值取最大的负值，自身重叠的高度为0

（5）margin:auto时的一些应用情况：

                                              

上面的例子中图片为什么不水平居中？这是因为此时的图片是inline水平的，即使没有设置width也不会占据整个容器，解决方法是将img的display设置为display：block就可以实现水平居中。（因为图片是一个替换元素）

                                                   

为什么容器已经定宽定高了，为什么margin:0 auto就是不居中呢？   

                                                           

那该如何设置元素的居中呢？

a.    通过writing-mode实现垂直居中。更改流的方向为垂直方向。

 b.  绝对定位元素的margin实现垂直居中，只有ie8+以上的浏览器才支持。

                                                              

(6)margin取负值时的应用：

（1）margin实现两端对齐

（2）margin负值下的等高布局：改变元素的占据空间

（3）margin负值下的两栏自适应布局：元素占据空间随着margin的移动而改变

（7）margin在某些情形下会实效，为什么？？

（1）    inline水平元素的垂直方向上的margin是无效的

前提：元素是非替换元素，比如不是img元素；  正常的书写模式

（2）    可能发生了margin重叠

（3）    display:table-cell/display:table-row的margin值无效，但是替换元素的display:table-cell/display:table-row的margin值是有效的

（4）绝对定位元素img设置了top和left的值，此时即使设置了margin-right或是margin-bottom的值也是不会改变图片的位置的。

想要实现添加margin-right或是margin-bottom起作用，就要在容器中添加position:relative的属性。

（5）  margin的值太小使得margin属性不起作用：

（6）    内联特性导致的margin无效

由于要跟内联元素的下边缘对齐，故当图片的margin-top小到一定值的时候再减小margin-top的值是不会改变图片的位置的。

（8）了解margin-start/margin-end属性。

（1）在正常的流中，margin-start与margin-left是等效的，两者是重叠的不累加的。（从左到右的流中）

（2）如果水平流是从右往左的，margin-start与margin-right是等效的。

（3）在垂直流的方向上，（writing-mode:vertical-*）margin-start相当于margin-top。

（9）了解margin-collapse属性

-webkit-margin-collapse:<collapsed>|<discard>|<separate>

<collapsed>默认/重叠

<discard>取消

<spearate>分隔