从零开始自学前端-盒子模型篇

盒模型、盒子模型、框模型

        css将页面中的所有元素都设置为了一个矩形盒子

        将元素设置为矩形的盒子后，对页面的布局就可以理解为摆放盒子

        每一个盒子都有以下几个部分

                内容区（content）

                内边距（padding）

                边框（border）

                外边距（margin)

内容区（content）设置属性

（width\heigth\background-color）：

        div{
            width:130px;
            height: 130px;
            background-color:red;
        }

边框（border）设置属性(三个缺1不可）：

• 宽度border-width、（默认值 3px）

                border-width:10px 20px 30px 40px(上，右，下，左）顺时针方向

                四个值：上，右，下，左

                三个值：上 左右 下

                两个值：上下 左右

                border-xxx-width(xxx:top\left\right\bottom):用来单独指定

• 颜色border-color、

                border-color:orange red green blue

                四个值：上，右，下，左

                三个值：上 左右 下

                两个值：上下 左右

                border-xxx-color(xxx:top\left\right\bottom):用来单独指定                

• 样式border-style(solid\double\dotted\dash\.......)   默认值时（none）

                border属性简写简写语法

                border:solid 3px orange;

                单独设置

                border-xxx(xxx:top\left\right\bottom)

        div{
            width:130px;
            height: 130px;
            background-color:red;

            border-width:30px;
            border-color:red;
            border-style:dash\solid\double\dotted
        }

内边距（padding）设置属性

        padding-xxx(xxx:top\left\right\bottom)

        div{
            width:130px;
            height: 130px;
            background-color:red;

            border-width:30px;
            border-color:red;
            border-style:dash\solid\double\dotted
            
            padding-top:100px;
        }

结论1:盒子的大小有内容区、边框、内边距决定

外边距（margin）设置属性

        不会影响盒子可见大小、但是会影响位置

        一共有四个方向

        margin-xxx(xxx:top\left\right\bottom) bottom和right是挤别人

应用

水平方向布局

元素在其父元素中水平方向的位置由以下几个元素决定：

         margin-left

        border-left

        padding-left

        width

        padding-rigth

        border-right

        margin-right

一个元素在其父元素中，水平布局必须满足以下等式

上面七个元素相加=其父元素内容的宽度

若不成立，称为过度约束，则等式会自动调整margin-right

        margin