前端基础第5天（盒子模型）

盒子模型：

margin:外边距
border:边框
padding:内边距
边框 Border：

Border-top-style:  solid   实线
                   dotted  点线
                   dashed  虚线
Border-top-color   边框颜色
Border-top-width   边框粗细

代码演示：

.box{
        width:300px;
        height:390px;
        background:#999;
        线形：实线：点线：虚线 
        border-top-style: solid;
        border-top-color: red;
        border-top-width: 5px;      
        border-left-style: dashed;
        border-bottom-style:dotted ;        
        border-left-color: green;
        border-bottom-color: black;
        border-left-width: 20px;        
        border-bottom-width: 10px;
    }

效果图：

边框合并

border-collapse:collapse;

代码演示：

    table{
        width: 300px;
        height: 500px;
        border: 1px red solid;
        /*border-collapse:collapse;*/

    }
    td{
        border: 1px red solid;
    }

效果图：
没合并前：

合并后：

内边距
Padding-left | right | top | bottom
代码演示：

    .box{
        width:300px;
        height:390px;
        background:#999;
        padding:10px 20px 20px 20px;
    }

◆padding连写
Padding: 20px; 上右下左内边距都是20px
Padding: 20px 30px; 上下20px 左右30px
Padding: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40
Padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px
外边距
margin-left | right | top | bottom

.box{
        width:300px;
        height:390px;
        background:#999;
        padding:10px 20px 20px 20px;
        margin:50px 50px 50px 50px;
    }

◆外边距连写
Margin: 20px; 上下左右外边距20PX
Margin: 20px 30px; 上下20px 左右30px
Margin: 20px 30px 40px; 上20px 左右30px 下 40px
Margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px