我的前端学习之路＜盒子模型＞

盒子模型

        组成：内容区域(content区域)

                        即：css里编写的宽高

                内边距区域（padding）

                        即：内容与边框之间的距离

                边框区域（border）

                        即：盒子边缘位置

                外边距区域（margin）

                        即：边框与边框之间的距离，元素与元素之间的距离

        内边距：边框与内容之间的距离         padding

                取值： ___px        实现四个方向的内边距

                        __px __px        v1实现上下方向 v2实现左右方向的内边距

                        __px __px __px         v1实现上内边距 v2实现左右内边距 v3实现下内边距

                        __px __px __px __px        v1实现上内边距 v2实现右内边距 v3实现下内边距 v4实现左内边距

                实现单个方向的内边距：padding-方向词

                        padding-top        上内边距

                        padding-right        右内边距

                        padding-bottom        下内边距

                        padding-left        左内边距

        外边距：边框与边框之间的距离，元素与元素之间的距离        margin

                实现单个方向的外边距：margin-方向值

        内外边距的特殊取值

                内外边距背景颜色蔓延

                        1背景颜色能蔓延到边框（当边框取值为dashed）

                        2背景颜色能蔓延到内边距

                        3背景颜色不能蔓延到外边距，不能超出边框

                应用：导航布局，划过效果

                margin和padding都能取值为0，取值为大于0的值

                        *{margin:0;padding:0;}取消元素自带的内边距与外边距

                        调整间距时大部分采用取值大于零的数值

                margin可以取值为负值，padding不可以

                        padding不能取负值，无意义，不能实现且语法报错

                        margin能取负值，作用是调整盒子位置

                margin：0 auto;  实现版心或者子元素位于父元素里水平居中效果，前提有宽度

                        0：上下没有边距（外边距）

                        auto：左右间距自动，均分

                上下盒子之间边距：上下垂直排列的两个盒子，上盒子添加下边距，下盒子添加上边距，两个盒子边距重叠，间距以较大的为主

                左右盒子间距：左右水平排列的两个盒子，左盒子添加右外边距，右盒子添加左外边距，两个盒子的边距为外边距之和

                父子关系上边距：当给子元素添加margin-top时，默认添加在父元素

                        解决方法：1，给父元素添加padding-top后改变父元素gaodu      

                                        2，当给子元素添加margin-top时

                                                a，给父元素添加overflow：hidden

                                                b，给父元素或者子元素添加浮动，取值不为none

                                                c，给父元素添加定位：固定定位或者绝对定位

                                                d，给父元素添加边框

IE怪异盒子模型        box-sizing：border-box；

        width：指内容，边框，内边距总宽度

        height：指内容，边框，内边距总高度

        盒子width：width（content + padding + border）+左右margin

        盒子height：height（content + padding + border）+上下margin