CSS盒子

CSS盒子

<style>
        div {
            width: 600px;
            height: 100px;
            /* 边框的颜色 */
            /* border-color: blue; */
            /* 盒子边框的粗细单位px */
            /* border-width: 5px; */
            /* 边框的样式  solid实线 dashed为虚线 dotted点线*/
            /* border-style: solid; */
            /* border-style: dotted; */
            /* 边框的简写 */
            /* border: 5px solid blue; */
            /* 上边框 */
            border-top: 5px solid red;
            /* 下边框 */
            border-bottom: 10px dashed green;
            /* 左边框 */
            border-left: 5px solid hotpink;
            /* 右边框 */
            border-right: 5px solid indigo;
              /* 相邻的边框合并 */
              /* border-collapse: collapse; */
        }
    </style>

盒子内边距：

内边距简写：

盒子外边距：

外边距的典型应用：

盒子嵌套和子问题：

清除内外边距：