CSS 美化页面（三）

发布于：2025-04-17 ⋅ 阅读:(28) ⋅ 点赞:(0)

一、盒模型

      盒模型本质上是一个盒子，封装周围的HTML元素 。包含：  外边距，边框，填充，和实际内容

一个盒子由四个区域组成：内容（Content）、内边距（Padding）、外边距（Margin）以及边框（Border）。 

有五个属性分别是：width、height、padding、border和margin。具体来说，width和height用于定义内容区域的宽度和高度，而非盒子的整体尺寸

 二、盒模型模式

    CSS盒模型存在两种不同的模式：标准盒模型与IE盒模型（亦被称为怪异盒模型或替代盒模型）。

1、标准盒模型

      所设定的元素宽度和高度仅涵盖内容区域，而内边距、边框以及外边距则被视为额外添加到内容尺寸上的部分。 

2、IE盒模型 

所设定的宽度和高度理解为包含内容、内边距及边框在内的总和，但并不包含外边距。

height=content_height+padding_height+border_left 

width=content_width+padding_width+border_bottom

   总之：可以使用 box-sizing CSS 属性来控制盒模型的选择，从而影响元素的布局计算。 

box-sizing: content-box 指定使用标准盒模型；

box-sizing: border-box 则指定使用IE盒模型；

 三、border、margin 和 padding 的区别

属性 作用 位置 示例
border 定义元素的边框，位于内容和外边距之间。 位于内容（或内边距）和外边距之间，包裹元素内容和内边距。 border: 2px solid #000; 表示一个宽度为 2px 的黑色实线边框。
margin 定义元素与其他元素之间的外部间距，用于控制元素之间的距离。 位于元素的边框外部，影响元素与其他元素之间的距离。 margin: 10px; 表示元素与其他元素之间的距离为 10px。
padding 定义元素内容与边框之间的内部间距，用于控制内容与边框的距离。 位于内容和边框之间，增加内容与边框的距离。 padding: 10px; 表示内容与边框之间的距离为 10px。

四、边框border

1、简写语法：

border 是 border-width（宽度）、border-style（样式）、border-color（颜色），顺序可自由组合，用空格分隔。 

border:2px solid black; 

2、进阶用法：

‌单独控制各方向边框‌
通过 border-top、border-right、border-bottom、border-left 分别设置不同边的样式。 

‌圆角边框‌
使用 border-radius 实现圆角效果，值越大圆角弧度越明显。

‌透明边框‌
通过 transparent 隐藏边框但保留占位空间，适用于布局调整。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #name {
            /* 设置输入框的大小 */
            width: 200px;
            height: 30px;
            /* 设置输入框的边框和圆角 */
            border-radius: 5px;
            /* 设置输入框的边框颜色和样式 4个方向 */
            border-bottom: 5px solid #4CAF50;
            border-left: 5px solid #6e408d;
            border-top: #4CAF50 solid 5px;
            border-right: #6e408d solid 5px;
        }

        form{
            border: 2px solid #d0e9a3;
            /* 内边距 */
            padding: 10px;
        }

        div{
            width:300px;
            height: 200px;
            border: 2px solid #a59ace;
            /* margin: 50px ;   */
            /* 水平居中 */
            margin: 50px  auto;   
        }
    </style>
</head>

<body>
    <div>
        <form action="" method="post" id="form1">
            姓名：<input type="text" name="name" id="name"><br><br>
            密码：<input type="password" name="password" id="password"><br><br>
            <input type="submit" name="remember" id="remember">
        </form>
    </div>
</body>

五、内边距padding

  1、简写语法：

    它是用于设置元素内容与边框（border）之间的内边距，‌支持 1~4 个值‌，有padding-top、padding-right、padding-bottom、padding-left 遵循顺时针方向（上→右→下→左），如图所示：

/* 统一四边内边距 */
.element { padding: 20px; }

/* 上下10px + 左右20px */
.element { padding: 10px 20px; }

/* 上10px + 右20px + 下30px + 左20px */
.element { padding: 10px 20px 30px; }

/* 单独设置四边 */
.element { padding: 10px 20px 5px 15px; }  /* 上 右 下 左 */

2、常见使用场景 

   1. 内容与边框留白
。。。   
 <style>
        .box {
            width: 300px;
            border: 2px solid #6f4caf; /* 边框 */
            padding: 30px; /* 内边距 */
            background-color: #f0f8ff; /* 背景颜色 */
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="box">
        这是展示内容与边框之间的留白（padding）。
    </div>
</body>
</html>

    2. 按钮/图标内间距

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Padding 示例</title>
    <style>
        .box {
            width: 300px;
            border: 2px solid #6f4caf; /* 边框 */
            padding: 30px; /* 内边距 */
            background-color: #f0f8ff; /* 背景颜色 */
            font-size: 16px;
            margin-bottom: 20px; /* 与按钮的间距 */
        }

        /* 按钮样式 */
        .button {
            padding: 10px 20px; /* 上下内边距10px，左右内边距20px */
            font-size: 16px; /* 字体大小 */
            color: #fff; /* 字体颜色 */
            background-color: #6f4caf; /* 按钮背景颜色 */
            border: none; /* 去掉边框 */
            border-radius: 5px; /* 圆角 */
            cursor: pointer; /* 鼠标悬停时显示手型 */
            transition: background-color 0.3s; /* 背景颜色过渡效果 */
        }

        /* 按钮悬停效果 */
        .button:hover {
            background-color: #90c3cc; /* 悬停时背景颜色变深 */
        }

        /* 图标按钮样式 */
        .icon-button {
            padding: 10px; /* 内边距 */
            font-size: 20px; /* 图标大小 */
            color: #fff; /* 图标颜色 */
            background-color: #6f4caf; /* 按钮背景颜色 */
            border: none; /* 去掉边框 */
            border-radius: 50%; /* 圆形按钮 */
            cursor: pointer; /* 鼠标悬停时显示手型 */
            display: inline-flex; /* 使内容居中 */
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            transition: background-color 0.3s; /* 背景颜色过渡效果 */
        }

        /* 图标按钮悬停效果 */
        .icon-button:hover {
            background-color: #be4a84; /* 悬停时背景颜色变深 */
        }
    </style>
</head>
<body>
    <div class="box">
        这是展示内容与边框之间的留白（padding）。
    </div>

    <!-- 普通按钮 -->
    <button class="button">提交</button>

    <!-- 图标按钮 -->
    <button class="icon-button">★</button>
</body>
</html>

3、 响应式布局适配

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Padding 百分比示例</title>
    <style>
        .container {
            width: 80%; /* 容器宽度为父容器的 80% */
            margin: 0 auto; /* 居中对齐 */
            padding: 10%; /* 内边距为容器宽度的 10% */
            background-color: #f0f8ff; /* 浅蓝色背景 */
            border: 2px solid #4CAF50; /* 绿色边框 */
        }
    </style>
</head>
<body>
    <div class="container">
        这是一个示例，展示使用百分比设置内边距（padding: 10%;）。
    </div>
</body>
</html>

 4、与背景的关系

‌背景色/图会覆盖 padding 区域‌，但可通过 background-clip 控制

 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-clip 示例</title>
    <style>
        .box {
            width: 300px;
            padding: 20px; /* 内边距 */
            border: 5px solid #4CAF50; /* 边框 */
            background-color: #f0f8ff; /* 浅蓝色背景 */
            margin-bottom: 20px;
        }

        /* 默认值：背景覆盖到边框区域 */
        .border-box {
            background-clip: border-box;
        }

        /* 背景覆盖到 padding 区域，不覆盖边框 */
        .padding-box {
            background-clip: padding-box;
        }

        /* 背景仅覆盖内容区域 */
        .content-box {
            background-clip: content-box;
        }
    </style>
</head>
<body>
    <div class="box border-box">
        背景覆盖到边框区域（background-clip: border-box）。
    </div>
    <div class="box padding-box">
        背景覆盖到 padding 区域（background-clip: padding-box）。
    </div>
    <div class="box content-box">
        背景仅覆盖内容区域（background-clip: content-box）。
    </div>
</body>
</html>

注意：内边距不能是负数哦！！！ 

六、外边距margin

  1、简写语法：

    它是用于控制元素与其他元素之间的外边距，‌支持 1~4 个值‌，有margin-top、margin-right、margin-bottom、margin-left 遵循顺时针方向（上→右→下→左）如图同上(内边距)

/* 统一四边外边距 */
.box { margin: 20px; }

/* 上下20px + 左右40px */
.box { margin: 20px 40px; }

/* 上20px + 右40px + 下60px + 左40px */
.box { margin: 20px 40px 60px; }

/* 单独设置四边 */
.box { margin: 10px 20px 30px 40px; }  /* 上 右 下 左 */

2、核心特性与特殊场景

1. ‌百分比值基准
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Margin 百分比示例</title>
    <style>
        .box {
            width: 50%; /* 容器宽度为父容器宽度的 50% */
            height: 100px; /* 固定高度 */
            margin: 10%;  /* 上下左右外边距为父容器宽度的 10% */
            background-color: #4CAF50; /* 绿色背景 */
        }

        .parent {
            width: 80%; /* 父容器宽度为视口宽度的 80% */
            margin: 0 auto; /* 父容器居中 */
            background-color: #474b4e; /* 浅蓝色背景 */
            padding: 20px; /* 内边距 */
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="box"></div>
    </div>
</body>
</html>

2. ‌负值效果

  • margin-top: -10px：元素向上移动，可能覆盖上方内容‌
  • margin-left: -20px：元素向左移动，常用于微调布局‌
  • margin-right: -15px：右侧元素左移，自身宽度不变‌

 原始位置

  右侧内容左移  

向上移动 

 

 向左移动

3. ‌auto 自动分配

用于水平居中布局，需配合 width 使用‌

  .parent {
            width: 80%; /* 父容器宽度为视口宽度的 80% */
            margin: 0 auto; /* 父容器居中 */
            background-color: #474b4e; /* 浅蓝色背景 */
            padding: 20px; /* 内边距 */
        }

4. ‌外边距合并（Margin Collapse）‌
  • ‌相邻块级元素‌：上下外边距取较大值（非相加）‌
    示例：元素 A margin-bottom: 30px，元素 B margin-top: 20px → 实际间距为 30px。
  • ‌父元素与子元素‌：若父元素无 padding 或 border，子元素的垂直外边距会穿透到父元素外部‌

 七、综合应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Document</title>
    <style>
        .card {
          width: 300px;
          margin: 20px auto;  /* 水平居中‌ */
          padding: 15px;
          border: 2px solid #c97575;
        }
        .card img {
          margin-bottom: -10px;  /* 图片与下方文字重叠*/
        }
        .card p {
          margin-top: 15px;  /* 实际间距为15px（合并后） */
        }
      </style>
</head>
<body>
      <div class="card">
        <img src="2.jpg" alt="bear" width="60%" height="auto">
        <p>图片描述文字</p>
      </div>
      
</body>
</html>

 

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布