CSS的知识点总结（二）——盒子模型

盒子模型

    1. 盒子模型分为两种模型：
       

         （1）W3C模型：也称为内容盒子，标准盒子。
                （1）内容区的宽高：
                         宽：我们定义的宽width;

                         高：我们定义的高height。
                （2）盒子的宽高：
                         宽：内容的宽+边框的厚度+左右内边距的厚度(padding)；

                         高：内容的高+边框的厚度+上下内边距的厚度(padding)。
                （3）所占屏幕宽高：
                         宽：盒子的宽+左右外边距（margin）；

                         高：盒子的高+上下外边距（margin）。

            （2）IE盒子：又称为边框盒子，怪异盒子。
                （1）内容区的宽高：
                         宽：width-左右padding-左右border；

                         高：height-上下padding-上下border。
                （2）盒子的宽高：
                         宽：width+左右margin；

                         高：height+上下margin

 

     2.用CSS切换盒子的模型

                box-sizing:border-box;切换边框盒子
                box-sizing:centent-box;切换内容盒子

     3.盒子模型常用语句

          （1）边框：border:1px(厚度) solid(实线) red（颜色）;

          （2）内边距：是盒子内容到盒子边框的距离。
                      padding:1px; 上下左右都是1px；
                      padding:1px 2px; 上下为1px，左右为2px。
                      padding:1px 2px 3px 4px; 上右下左分别为1px,2px,3px,4px。
                        padding-top：上内边距
                        padding-bottom：下内边距
                        padding-left：左内边距
                        padding-right：右内边距

          （3）外边距：是盒子外部与其他盒子的距离。
                      margin:1px;上下左右都是1px；
                      margin:1px 2px; 上下为1px，左右为2px。
                      margin:1px 2px 3px 4px; 上右下左分别为1px,2px,3px,4px。
                        margin-top：上内边距
                        margin-bottom：下内边距
                        margin-left：左内边距
                        margin-right：右内边距