css中的边框、内边距和外边距

边框
<!-- 
        boder设置盒子的边框属性：
            边框分为四个方向：
                top right bottom left
            边框分为三个属性：
                边框颜色 边框样式 边框宽度
            border-top-color:上边框颜色
            border-top-style:上边框样式   solid dotted dashed double
            border-top-width:px值 上边框宽度

            四个方向连写：
                border：width style color;表示四个方向统一设置
            三个属性连写：
                border-方向：width style color
     -->
内边距
<!-- 
        padding内边距：
            当前盒子内的内容到盒子边的距离
            分为四个方式：
                padding-left
                padding-right
                padding-top
                padding-bottom
            属性连写：
                padding:四个值
                        上 右 下 左
                padding:三个值
                        上 左右 下
                padding：两个值
                        上下 左右
                padding:一个值
                        上下左右       
     -->
内边距会撑大盒子
     <!-- 
        padding会撑大盒子
        盒子最终的宽度=盒子自身设置的宽度+左右padding+左右border
        盒子最终的高度=盒子自身设置的高度+上下padding+上下border

        一个盒子宽度200px 文字距离盒子内左边距40px 边框3px 当前盒子最后的宽度是多大？ 246
        如果想要保证盒子的最终宽度为200px 那就需要200-40-6   154px

        一个大盒子宽度500px 高度300px  一个小盒子宽度300px 高度150px 
        让小盒子在大盒子内部居中
     -->
     <!-- 
        块级元素不设置宽度时 沾满父容器  
        没有设置宽度的时候 设置左右padding不会撑大当前的盒子
        除非设置的左右padding加起来超过了父容器的宽度
     -->
内边距padding撑大盒子的解决
     <!-- 
        谷歌盒子模型
            盒子最终的宽高=盒子自身的宽高+padding+border
        IE盒子模型：
            盒子最终的宽高=盒子设置的宽高  padding border系统会自动减去
        box-sizing:content-box(谷歌盒子模型)   border-box(IE盒子模型)
     -->
外边距margin
<!-- 
         margin外边距:
                分为四个方向:
                    margin-left
                        左外边距
                    margin-right
                        右外边距
                    margin-top
                        上外边距
                    margin-bottom
                        下外边距

            margin连写:
                margin: 四个值
                    上 右  下  左

                margin: 三个值
                    上  左右  下
                
                margin: 两个值
                    上下  左右

                margin: 单个值
                    上下左右
            margin的特殊值：auto 表示外边距自适应  把剩余空间分配给当前外边距的方向
            auto针对上下外边距不生效
            margin:0 auto; 块级元素 横向居中*非常常用*

     -->
margin的边框塌陷
     <!-- 
        子元素设置margin-top的时候会带着父元素一起下沉
        解决方式：
            1 给父元素添加透明的上边框
            2 块级格式化上下文(BFC)  清除一些异常的现象
                overflow:hidden
     -->
行内元素的上下margin不生效