css盒子模式

<!DOCTYPE html>
<!--css盒子模型-->
<!--margin:边框外围再扩张多少距离-->
<!--border:边框的厚度-->
<!--padding：内容往外到边框填充区-->
<!--content：内容区-->
<!--css盒子模型-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>盒子模型示例</title>
    <style>
        * {/*全篇通用，初始化设置，避免浏览器默认样式影响自己的发挥*/
            margin: 0;/*元素之间距离为0*/
            padding: 0;/*内容与边框距离为0*/
        }
        .c1 { /*下边 第一个div标签*/
            height: 200px; /*高低200像素*/
            width: 300px; /*宽度300像素*/
            border: 5px solid green; /*边界5像素 实线 绿色*/
            margin-top: 5px; /*元素与元素之间的上间隔5像素*/
            margin-right: 10px; /*元素与元素之间的右间隔10像素*/
            margin-bottom: 15px; /*元素与元素之间的下间隔15像素*/
            margin-left: 20px; /*元素与元素之间的左间隔20像素*/
            margin: 5px 10px 15px 20px;/*margin简写 上 右 下 左*/
            margin: 20px 30px;/*上下20 左右30*/
            padding: 20px 30px;/*上下20 左右30*/
            padding: 10px 20px 30px;/*上填充10 左右填充20 下填充10*/
            margin: 0 auto;/*上边是0 左右自动调整居中*/
            margin-bottom: 50px;
        }
        .c2 {
            height: 100px;
            width: 100%;
            background-color: red;
            margin-top: 100px;/*与上边的标签隔开*/
        }
    </style>
</head>
<body>
    <div class="c1"></div>

    <div class="c2"></div>
</body>
</html>
posted @ 2020-10-25 16:50  Eric_Z-HACK  阅读(87)  评论(0)    收藏  举报