CSS盒子模型

• margin 外边距
• padding 内边距
• border 边框

边框

1. 粗细
2. 样式
3. 颜色

<style>
        /*body总有外边距，先置零*/
        body{
            margin:0;

        }
        /*border:粗细，样式，颜色*/
        #box{
            width:300px;
            border:1px solid red;
        }
        h2{
            font-size: 16px;
            background-color: #4158D0;
            line-height: 30px;
            margin:0;
        }
        form{
            background: darkseagreen;
        }
        div:nth-of-type(1) input{
            border:3px solid black;
        }
        div:nth-of-type(2) input{
            border:3px dashed #bad8dc;
        }
        div:nth-of-type(3) input{
            border:3px dashed #c16bdc;
        }
    </style>

外边距

<!--外边距的妙用：居中
    margin:0 auto-->
    <style>
        /*body总有外边距，先置零*/
        body{
            margin:0;

        }
        /*border:粗细，样式，颜色*/
        #box{
            width:300px;
            border:1px solid #b8dc9c;
            margin:0 auto;
        }
        h2{
            font-size: 16px;
            background-color: #b8dc9c;
            line-height: 30px;
            margin:0;
        }
        form{
            background: #b8dc9c;
        }
        input{
            border:1px solid black;
        }

    </style>