Web前端——盒子模型

1.盒子模型组成

    <!--

        盒子模型的组成：从内向外

            1.content 内容，设置元素放内容的区域

            2.padding 内边距，设置元素内容与边框之间的距离

            3.border 边框，设置元素的边框

            4.margin 外边距，设置元素与元素之间的距离

     -->

2.内边距

    <!--

        设置内边距：

        padding：

         四个值：上  右  下  左

         三个值：上  左右  下

         两个值：上下   左右

         一个值：上下左右

     -->

3.边框

    <!--

        border:设置元素边框

            1.border-width 设置的宽度，数值顺序与padding一致

            2.border-style

                属性值：solid 实线

                        dashed 虚线

                        double 双线

                        dotted 点线

                注意：可以同时取不同的四边属性值

            3.border-color 设置四条边的颜色

                transparent 透明色

     -->

     <!--

        border 常用

            边距  样式   颜色

        border-方向

            top、bottom、left、right

      -->

4.外边距

    <!--

        外边距（margin） 设置元素外边距

     -->

5.盒子

    <!--

        内容盒：content-box 元素放内容的区域

        边框盒：border-box  border+padding+content

        box-sizing: 设置盒子尺寸=》设width/height设置作用对象

            默认时width/heigth是指元素内容盒的宽高不包括其他

     -->

     <!--

        分类：

            1.W3C标准盒子模型（标准盒子）：

                水平方向：border-left/right+padding-left/right+width

                垂直方向：border-top/bottom+padding-top/bottom+height

            2.IE标准盒子模型（怪异盒子）:

                水平方向：width=border-left/right+padding-left/right+content

                垂直方向：height=border-top/bottom+padding-top/bottom+content

      -->

      <!--

        设置盒子阴影：box-shadow: x y 模糊值 颜色;

       -->