H5-前端学习-06盒模型

        哈喽，各位小伙伴，我们会更新一些前端的文章，想学习前端的小伙伴，特别是0基础的小伙伴，或者对此感兴趣的小伙伴，可以关注我，我会保持更新。

盒模型：
            盒模型：任何一个标签都可以当成一个盒子，有人把块元素当成一个盒子，看成是一个容器，就是一个元素
            盒模型的组成：
                一共由四部分组成
                    内容（content）--------我们在CSS中给元素设置的width和height
                    内边距（padding）--------边框到内容之间的间距
                    边框（border）-------元素的边缘
                    外边距（margin）-------元素边框与边框之间的间距
            给元素添加内边距：
                1.元素背景颜色会蔓延到内边距上
                2.给元素添加内边距，会把元素撑大
                3.padding：v1------元素四个方向上添加内边距 
                4.padding：v1 v2------v1:上下内边距，v2:左右内边距 
                5.padding：v1 v2 v3------v1:上内边距，v2:左右内边距,v3:下内边距
                6.padding：v1 v2 v3------v1:上内边距，v2:右内边距,v3:下内边距 v4:左内边距（顺时针顺序记忆）
            给元素某一个方向上添加内边距
                padding-方向词（top/right/bottom/left）
                padding-top------上内边距
                padding-right------右内边距
                padding-bottom------下内边距
                padding-left------左内边距
            padding取值不能取负值，没有意义

            元素添加外边距：
                1.可以更改元素的位置
                2.元素背景颜色不会蔓延到外边距上
                    margin：v1-----给元素四个方向上添加
                    margin：v1 v2-----v1:上下外边距 v2：左右外边距
                    margin：v1 v2 v3-----v1:上外边距,v2:左右外边距,v3：下外边距
                    margin：v1 v2 v3 v4-----v1:上外边距，v2:右外边距，v3下外边距，v4：左外边距
                给元素某一个方向上添加外边距
                    margin-方向词（top/right/bottom/left）
                    margin-top------上外边距
                    margin-right------右外边距
                    margin-bottom------下外边距
                    margin-left------左外边距
                margin取值可以取负值，用来调整元素位置（让元素位置发生偏移）
                margin：0 auto：用来实现容器水平居中（容器必须有宽度）

            盒模型计算
                盒模型分类：
                    W3C官方盒子模型（标准盒模型）
                    IE怪异盒子模型
                标准盒模型宽度计算：
                    组成：内容，内边距，边框，外边距
                    标准盒子宽度=内容宽+左右内边距+左右边框+左右外边距
                    标准盒子高度=内容高+上下内边距+上下边框+上下外边距
                元素触发怪异盒
                    组成：内容，内边距，边框，外边距
                    元素需要通过Box-sizing属性才能触发怪异盒
                        box-sizing取值：
                            content-box(内容盒子，W3C官方盒模型，标准盒模型)
                            border-box（触发怪异盒，改变了元素盒模型的计算方式）
                    元素设置的width,height里面包含了内边距（padding）和边框（border）宽度
                    盒子宽度=内容宽（正常显示的内容宽+左右内边距+左右边框）+左右外边距
                    盒子高度=内容高（正常显示的内容高+上下内边距+上下边框）+上下外边距

        面试题：盒模型分类有哪些？组成部分是什么？如何计算
            标准和模型和IE怪异盒模型
            组成：内容（content），内边距（padding），边框（border），外边距（margin）

        margin的特殊取值：
        1.两个元素水平排列，前面元素与后面元素之间的间距（margin）可以相加
        2.两个元素上下排列，上下之间外间距取最大值生效，如果想要外间距实现相加效果，给元素添加一个父元素，父元素上使用overflow：hidden
        3.父子关系中，子元素添加margin-top会作用在父元素上
            解决方法：
                1.给父元素添加一个一像素透明边框：border：1px solid transparent
                2.给元素添加浮动或者给父元素添加overflow：hidden
                3.给父元素添加padding-top
                4.使用定位 position:absolute
        字符间距 字母，数字，汉字都是字符
            letter-spacing: 5px;
        词间距,只对英文单词生效
            word-spacing: ;