当前位置：首页 > news >正文

CSS 美化页面（三）

news 来源：原创 2025/4/30 15:16:32

一、盒模型

盒模型本质上是一个盒子，封装周围的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>