Web前端练习2

题目

解答

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端练习2</title>
    <style>
        h1, p {
            margin: 0; /* 清除默认外边距 */
        }
        .part1{
            width: 260px;
            height: 150px;
            padding: 15px;
            border: 1px solid rgb(196, 195, 192);
            margin: 6px;
        }
        .part1 h1 {
            margin-bottom: 10px; /* 标题与下方内容的间距 */
            font-size: 18px;
            color: #000000;
        }
        .part2{
            border-left: 10px solid #ffffff;
            border-right: 10px solid #ffffff;
            padding: 10px;
            width: 100%; /* 占满父元素宽度 */
            box-sizing: border-box; /* 边框/内边距不超出宽度 */
        }
        .part2 p {
            padding: 8px 0; /* 文本上下间距 */
            font-size: 14px;
            color: #4c4949;
        }
        .part2 hr {
            border: none; /* 清除默认hr样式 */
            border-top: 1px solid #eee; /* 细横线分隔 */
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="part1">
        <h1>待办事项</h1>
        <div class="part2">
            <p>完成HTML课后习题</p>
            <hr>
            <p>准备朗诵比赛素材</p>
            <hr>
            <p>跑步1000米</p>
            <hr>
        </div>
    </div>
</body>
</html>

结果展示

学习心得

CSS 复合属性分不同类型，padding/margin 和 border 的规则差异，本质是因为它们描述的 "属性维度" 不同所导致的。

1、padding/margin（方位型复合属性）

只描述 "距离" 这一个维度，所以多值规则是按方位分配（上→右→下→左），缺省值会自动复用；

2、border（多维度复合属性）

同时描述 "宽度、样式、颜色" 三个维度，所以复合写法需要包含核心维度（至少要包含样式），维度内的顺序可灵活，但维度不能缺核心项。

缺省规则：

缺宽度：默认 medium（约 3px）；
缺颜色：默认继承父元素文字颜色；
缺样式：整个 border 失效。

补充：

border-方向（如 border-left）也是多维度复合属性，规则是和 border 一致的。

Web前端 练习2

题目

解答

结果展示

学习心得

1、padding/margin（方位型复合属性）

2、border（多维度复合属性）

缺省规则：