盒子模型中的边框、内边距和外边距

一、边框（border）

    ① 边框的宽度 border-width

           border-width  可以用来指定四个方向的边框的宽度

              border-width: 10px;   

                  可以省略不写，默认值：一般都是三个像素                

                   值的情况

                    四个值：上 右 下 左

                    三个值：上 左右 下

                    两个值：上下 左右

                    一个值：上下左右

                除了border-width 还有一组border-xxx-width

                 xxx可以是 top right bottom left

                 用来单独指定某一边的宽度

    ② 边框的颜色 border-color

            border-color   用来指定边框的颜色，同样可以分别指定四个边的边框

                 规则和border-width一样

                border-color可以省略不写，如果省略则自动使用color的颜色                

     ③ 边框的样式 border-style

               border-style 指定边框的样式

                   solid 表示实线

                   dotted 表示点状虚线

                   dashed 表示线状虚线

                   double 表示双线

                    border-style 默认值:none 表示没有边框

【注】

        border的简写，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求                

             除了border以外还有四个border-xxx

                 border-top

                 border-right

                 border-bottom

                 border-left

二、内边距（padding）

        内容区和边框之间的距离是内边距

                  一共有四个方向的内边距

                   padding-top

                   padding-right

                   padding-bottom

                   padding-left

                 内边距的设置会影响盒子的大小

                 背景颜色会延申到内边距

                一个盒子的可见框大小，由内容区，内边距和边框共同决定

                 所以在计算盒子大小时，需要将这三个区域加到一起计算

【注】

        padding 内边距的简写属性，可以同时指定四个方向的内边距

                 规则和border-width一样

三、外边距（margin）

        外边距不会影响盒子可见框的大小，外边距会影响盒子的位置

                 一共有四个方向的外边距

                 ① margin-top

                  上外边距，设置一个正值，元素会向下移动

                 ② margin-right

                  默认情况下设置margin-right不会产生任何效果

                 ③ margin-bottom

                  下外边距，设置一个正值，其下边的元素会向下移动

                 ④ margin-left

                  左外边距，设置一个正值，元素会向右移动

                     margin也可以设置负值，如果是负值，则元素会向相反的方向移动

          元素在页面中是按照自左向右的顺序排列的

             所以默认情况下如果我们设置了左和上外边距则会移动元素自身

                  而设置下和右外边距会移动其他元素

【注】

        margin的简写属性

            margin 可以同时设置四个方向的外边距，用法和padding一样

              margin会影响到盒子实际占用空间