CSS--盒子模型

        /* 盒子模型包括：边框、外边距、内边距和实际内容 */
        /* 盒子模型分为两种，一种是w3c标准盒，一种是IE盒子 */
        /* 前者盒子content为用户设置大小，实际总大小=content（内容区）+padding+border  box-sizing:content-box;*/
        /* 后者盒子用户设置大小=content+padding+border  box-sizing: border-box; */
        /* box-sizing: inherit;// 规定应从父元素继承 box-sizing 属性的值。 */
        /* 1 边框border */
        
        .border {
            width: 300px;
            height: 300px;
            background-color: green;
            /* 边框粗细 */
            border-width: 50px;
            /* 样式 none无/soild实线/double双线/ridge菱形/dashed虚线/dotted点线 */
            border-style: double;
            /* 颜色 */
            border-color: yellow;
            /* 复合写法：border:border-width border-style border-color; (和顺序无关)*/
            /* 边框不同位置分开写法：border-top:/border-right/border-left/border-bottom */
            /* 为表格设置边框时，不仅<table>标签要加，<td><th>也需要，否则只有一个大边框而单元格没有 */
        }
        /* 2 内边距padding 内容距边框距离 */
        /* padding会撑开盒子，若盒子大小为300x300，padding值为20 20 20 20，那么盒子实际大小为340x340 */
        /* 若盒子没有设置大小则不会撑开盒子 */
        
        .padding {
            width: 200px;
            height: 200px;
            background-color: black;
            padding-right: 20px;
            padding-left: 30px;
            padding-top: 50px;
            padding-bottom: 100px;
            /* 简写：padding: 50px 20px 100px 30px*/
            /* 一个值：上下左右 二个值：上下和左右 三个值：上、左右和下 四个值：上右下左 */
        }
        
        .pad {
            width: 200px;
            height: 100px;
            background-color: #fff;
        }
        /* 3 外边距margin 盒子之间的间距*/
        /* 行内元素只设置左右内外边距，否则需要转换为块/行内块元素 */
        /* 消除浏览器默认边距 
        *{
            padding:0;
            margin:0;
            }
            */
        
        .margin {
            width: 300px;
            height: 200px;
            background-color: red;
            margin-top: 100px;
            margin-right: 20px;
            margin-left: 50px;
            margin-bottom: 30px;
            /* 简写：margin: 100px 20px 30px 50px 意义与padding相同 */
        }