HTML盒子模型

盒子模型的元素：

       margin 外边距

        border 边框

       padding 内边距

        content 内容

内容区：

内容区（content）元素中的所有子元素和文件内容都在内容区中排列

内容区大小由width和height两个属性来设置（我们设的width和height为真实内容区的宽高，不包括边框，内边距等）

 边框：

边框（border)，边框属于盒子边缘，边框里面属于盒子内部，外边属于盒子外部

边框大小会影响到整个盒子的大小

边框 

边框的要素：

边框的宽度border-width

边框的颜色border-color

边框的样式border-style

宽度border-width： 

当不设置边框的值时，默认值为3px，且边框的四条边的设置顺序为：上，右，下，左

四个值：上 右 下 左

三个值：上 左右 下

两个值：上下 左右

border-xxx-width:分别指定不同方向的宽度(border-left-width...)：top(上) right(右) bottom(下) left(左) 

border-xxx-color：分别指定不同方向的颜色（border-left-color、border-top-color...)

border-xxx-style：分别指定不同方向的边框样式

 style的样式：

        solid 实线

       dotted 点状虚线

        dashed 虚线

        double 双线

        style的默认属性为none，无边框

 简写属性：通过属性对边框设置样式，并且属性之间没有先后顺序(最常用的)

             border: 10px orange solid;

 内边距

内容与边框之间的距离

                四个内边距：

                    padding-top

                    padding-right

                    padding-bottom

                    padding-left

内边距会影响盒子的大小，背景颜色会延伸到内边距上

 padding简写内边距的格式和边框border相似

            四个值：上 右 下 左

            三个值：上 左右 下

            两个值：上下 左右

外边距 

margin: 外边距 会影响盒子实际占用空间

            margin-top 上外边距：设置一个正值，向下移动

            margin-left 左外边距：设置一个正值，向右移动

            margin-bottom 下外边距：设置一个正值，其他元素向下移动

            margin-right 右外边距： 默认情况下不会产生效果

            一般来说，设置左和上外边距移动是自身，右下移动其他