9.div+css基础学习四 盒子模型margin/padding的使用

1、盒子模型

盒子模型的组成部分：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性。


自身的身高             width height 
内边距                 padding
盒子边框             border 边框
与其他盒子的距离         margin 外边距


Border 边框：
常见的写法 border:1px solid #foo;
单独属性:
        border-width:
    
        border-style:
                        dotted 点状虚线
                        dashed（虚线）
                        solid（实线）
                        double（双实线）
        
        border-color:(颜色)


padding:(值：像素/厘米等长度单位、百分比);
padding:10px; 上下左右
padding:10px 10px; 上下 左右
padding:10px 10px 10px; 上 左右 下
padding:10px 10px 10px 10px; 上 右 下 左（设置4个点-->顺时针方向）
单独属性：
        padding-top:
        padding-right:
        padding-bottom:
        padding-left:


当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小。


margin 外边距
值：与padding相同
单独属性：与padding相同
外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并。
margin:10px  上下左右都会腾出10px出来
margin:0px auto; 居中

2021.08.03 (0:18:41)