CSS3学习教程，从入门到精通， CSS3 盒子模型的详细语法知识点及案例代码（23）

CSS3 盒子模型的详细语法知识点及案例代码

CSS3 盒子模型完整指南

一、盒子模型基础

每个 HTML 元素都被视为一个矩形盒子，由以下部分组成：

  • 内容区 (Content)
  • 内边距 (Padding)
  • 边框 (Border)
  • 外边距 (Margin)

二、语法知识点详解

1. 盒子的宽和高
selector {width: 200px;       /* 内容区宽度 */height: 150px;      /* 内容区高度 */min-width: 100px;   /* 最小宽度 */max-height: 300px;  /* 最大高度 */
}
2. 盒子的边框 (border)
selector {/* 完整写法 */border-width: 2px;       /* 边框宽度 */border-style: solid;     /* 样式：solid/dashed/dotted/double等 */border-color: #ff0000;   /* 边框颜色 *//* 简写形式 */border: 2px solid red;   /* 顺序：width style color *//* 单边设置 */border-top: 3px dashed blue;border-right: none;      /* 取消右边框 */
}
3. 外边距 (margin)
selector {margin: 10px;            /* 四边相同 */margin: 10px 20px;       /* 上下 | 左右 */margin: 5px 10px 15px;   /* 上 | 左右 | 下 */margin: 5px 10px 15px 20px; /* 上 右 下 左 *//* 单边设置 */margin-top: 20px;margin-left: auto;       /* 水平居中常用 */
}
4. 内边距 (padding)
selector {padding: 15px;           /* 四边相同 */padding: 10px 5%;        /* 上下 | 左右 */padding: 0;              /* 清除内边距 *//* 单边设置 */padding-bottom: 30px;
}
5. 背景 (background)
selector {background-color: #f0f0f0;  /* 背景色 */background-image: url("image.jpg"); /* 背景图片 */background-repeat: no-repeat; /* 重复方式 */background-position: center;  /* 定位 */background-size: cover;       /* 尺寸控制 *//* 简写形式 */background: #fff url("bg.png") no-repeat center/cover;
}
6. 盒子尺寸计算 (box-sizing)
selector {box-sizing: content-box; /* 默认值：width/height只包含内容区 */box-sizing: border-box;  /* width/height包含内容+padding+border */
}
7. 盒子阴影 (box-shadow)
selector {box-shadow: h-shadow v-shadow blur spread color inset;/* 参数说明 *//* h-shadow: 水平阴影位置（必需） *//* v-shadow: 垂直阴影位置（必需） *//* blur: 模糊距离 *//* spread: 阴影尺寸 *//* color: 颜色 *//* inset: 内部阴影 *//* 示例 */box-shadow: 5px 5px 15px 2px rgba(0,0,0,0.3);
}
8. 圆角 (border-radius)
selector {border-radius: 10px;           /* 四角相同 */border-radius: 10px 20px;      /* 左上右下 | 右上左下 */border-radius: 5px 10px 15px 20px; /* 左上 右上 右下 左下 *//* 椭圆半径 */border-radius: 50% 30% 20% 40%;/* 单边设置 */border-top-left-radius: 8px;
}

三、案例代码

案例1：基础盒子模型
<div class="basic-box">Hello Box Model!</div><style>
.basic-box {width: 300px;height: 200px;padding: 20px;border: 3px solid #3498db;margin: 30px auto; /* 水平居中 */background-color: #f8f9fa;box-sizing: content-box; /* 默认 */
}
/* 总宽度 = width + padding*2 + border*2 = 300 + 40 + 6 = 346px */
</style>
案例2：border-box 对比
<div class="box-content">Content Box</div>
<div class="box-border">Border Box</div><style>
.box-content {width: 200px;padding: 20px;border: 5px solid red;background: #ffe6e6;margin: 10px;
}.box-border {width: 200px;padding: 20px;border: 5px solid blue;background: #e6f3ff;margin: 10px;box-sizing: border-box; /* 总宽度保持200px */
}
</style>
案例3：阴影与圆角应用
<div class="card">Hover Me</div><style>
.card {width: 250px;height: 150px;background: white;margin: 20px;padding: 20px;border-radius: 15px;box-shadow: 0 4px 8px rgba(0,0,0,0.1);transition: all 0.3s;
}.card:hover {transform: translateY(-5px);box-shadow: 0 8px 16px rgba(0,0,0,0.2);border-radius: 25px 5px;
}
</style>
案例4：复杂边框与背景
<div class="fancy-border">Special Box</div><style>
.fancy-border {width: 200px;height: 100px;padding: 20px;margin: 30px auto;background: linear-gradient(45deg, #ff6b6b, #4ecdc4),url("pattern.png");background-blend-mode: overlay;border: 3px double #2ecc71;border-radius: 15px 0 15px 0;box-shadow: inset 0 0 10px #2ecc71,5px 5px 15px rgba(0,0,0,0.3);
}
</style>
案例5：margin 合并现象
<div class="margin-box">Box 1</div>
<div class="margin-box">Box 2</div><style>
.margin-box {width: 200px;height: 50px;background: #3498db;margin: 20px 0;/* 实际垂直间距为20px（合并后），不是40px */
}
</style>

四、关键总结

  1. 尺寸计算：

    • content-box：总宽度 = width + padding + border
    • border-box：总宽度 = width (包含padding和border)

  2. 边距合并：

    • 垂直相邻块级元素的margin会发生合并
    • 解决方法：使用padding代替或创建BFC

  3. 阴影技巧：

    • 多层阴影用逗号分隔：box-shadow: 阴影1, 阴影2;
    • 内阴影使用inset关键字

  4. 背景叠加：

    • 使用多背景时，先定义的图片层级最高
    • background-blend-mode控制混合模式

  5. 开发建议：

    • 全局设置 box-sizing: border-box 更易控制布局
    * { box-sizing: border-box; }

通过调整案例中的数值，可以直观观察不同属性的效果差异。建议使用浏览器开发者工具实时调试盒子模型参数！

五、案例代码

以下是一些开发中常用的 实际案例，涵盖盒子模型的各个核心属性，每个案例都附带详细注释和应用场景说明：

案例 1：响应式卡片布局（综合应用）

场景：商品卡片展示，包含内边距、阴影、圆角和背景控制。

<div class="product-card"><img src="product.jpg" class="card-image"><div class="card-content"><h3 class="title">商品名称</h3><p class="price">￥199.00</p></div>
</div><style>
.product-card {width: 300px;background: white;border-radius: 12px;          /* 圆角 */box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 阴影 */margin: 20px;                 /* 外边距 */overflow: hidden;             /* 隐藏图片溢出部分 */box-sizing: border-box;       /* 确保尺寸计算包含padding */
}.card-image {width: 100%;height: 200px;object-fit: cover;border-bottom: 2px solid #eee; /* 底部边框 */
}.card-content {padding: 20px;               /* 内边距 */
}.title {margin: 0 0 10px 0;          /* 下外边距 */color: #333;
}.price {color: #e74c3c;margin: 0;                   /* 清除默认外边距 */
}
</style>

关键点：

  • 使用 box-sizing: border-box 确保布局稳定
  • overflow: hidden 处理图片超出容器的情况
  • 阴影和边框组合提升视觉层次
案例 2：灵活按钮组件（边距与圆角）

场景：可复用按钮组件，支持不同尺寸和状态。

<button class="btn primary">主要按钮</button>
<button class="btn secondary">次要按钮</button><style>
.btn {/* 基础样式 */padding: 12px 24px;          /* 内边距 */border: none;border-radius: 25px;         /* 胶囊圆角 */margin: 10px;cursor: pointer;transition: all 0.3s ease;box-sizing: border-box;font-size: 16px;
}/* 不同变体 */
.primary {background: #3498db;color: white;box-shadow: 0 4px 6px rgba(52,152,219,0.2);
}.secondary {background: #f1f1f1;color: #333;border: 1px solid #ddd;      /* 边框替代背景色 */
}/* 悬停状态 */
.btn:hover {transform: translateY(-2px);box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}/* 禁用状态 */
.btn:disabled {opacity: 0.6;cursor: not-allowed;
}
</style>

关键点：

  • 使用 padding 控制按钮点击区域
  • border-radius 创建不同形状（圆形/胶囊形）
  • 阴影实现悬浮效果
案例 3：高级边框效果（伪元素实现）

场景：实现渐变边框和装饰性角标。

<div class="fancy-box"><div class="content">特殊边框效果</div>
</div><style>
.fancy-box {position: relative;width: 300px;padding: 2px;                /* 为伪元素留出空间 */background: linear-gradient(45deg, #ff6b6b, #4ecdc4);border-radius: 12px;margin: 30px auto;
}/* 通过伪元素实现内层背景 */
.fancy-box::after {content: "";position: absolute;top: 2px;left: 2px;right: 2px;bottom: 2px;background: white;border-radius: 10px;         /* 比外层小2px */z-index: 1;
}.content {position: relative;padding: 20px;z-index: 2;                  /* 确保内容在伪元素上方 */
}/* 添加装饰角标 */
.fancy-box::before {content: "HOT";position: absolute;top: -10px;right: -10px;background: #e74c3c;color: white;padding: 5px 15px;border-radius: 20px;z-index: 3;font-size: 12px;
}
</style>

关键点：

  • 使用伪元素实现复杂边框效果
  • z-index 控制图层叠加顺序
  • 绝对定位实现装饰性元素
案例 4：间距系统实用类（Margin/Padding）

场景：快速构建布局的间距工具类。

<div class="mt-20 mb-40 pl-15">内容区块</div><style>
/* Margin 工具类 */
.mt-10 { margin-top: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mb-40 { margin-bottom: 40px !important; }/* Padding 工具类 */
.pl-15 { padding-left: 15px !important; }
.pr-30 { padding-right: 30px !important; }/* 响应式示例 */
@media (max-width: 768px) {.md-mt-0 { margin-top: 0 !important; }
}
</style>

关键点：

  • 使用 !important 确保优先级
  • 数字后缀表示像素值（实际项目建议使用rem）
  • 响应式前缀处理不同屏幕尺寸
案例 5：动态输入框（Focus状态增强）

场景：带交互效果的输入框，聚焦时改变边框和阴影。

<div class="input-group"><input type="text" placeholder="请输入内容">
</div><style>
.input-group {margin: 15px 0;
}input {width: 100%;padding: 12px 20px;border: 2px solid #ddd;border-radius: 8px;box-sizing: border-box;transition: all 0.3s ease;
}input:focus {outline: none;border-color: #3498db;box-shadow: 0 0 8px rgba(52,152,219,0.3);
}
</style>

关键点：

  • outline: none 去除默认聚焦样式
  • 使用过渡动画平滑状态变化
  • 阴影实现柔和的高光效果
案例 6：等高列布局（Padding补偿法）

场景：实现两侧有边距的等高列布局。

<div class="column-container"><div class="column">左侧内容</div><div class="column">右侧内容</div>
</div><style>
.column-container {margin: 0 -15px; /* 抵消列的边距 */display: flex;
}.column {flex: 1;background: #f8f9fa;margin: 0 15px;  /* 列间距 */padding: 20px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
</style>

关键点：

  • 使用负margin解决flex布局的间距问题
  • 内外边距组合控制元素间隔
  • 阴影增加视觉分隔

开发技巧总结

  1. 调试工具：使用浏览器开发者工具的 盒模型检查器（Elements → Computed）

  2. 重置默认样式：

    * { margin: 0; padding: 0; box-sizing: border-box; }

  3. 间距系统：建议使用 rem 单位 + CSS变量 定义间距尺度

  4. 边框技巧：

    • 使用 transparent 占位隐藏边框
    • 通过 border-image 实现渐变边框

  5. 性能优化：避免过度使用阴影和复杂背景（特别是移动端）

这些案例涵盖了常见的布局需求和视觉效果，通过调整数值和组合属性，可以快速构建出专业级的界面组件！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/73909.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

《Linux运维实战：Ubuntu 22.04修改root用户默认名并禁止登录》

《Linux运维实战：Ubuntu 22.04修改root用户默认名并禁止登录》

总结&#xff1a;整理不易&#xff0c;如果对你有帮助&#xff0c;可否点赞关注一下&#xff1f; 更多详细内容请参考&#xff1a;Linux运维实战总结 一、背景信息 由于安全方面的考虑&#xff0c;先要求Ubuntu 22.04系统重的root用户禁止登录&#xff0c;并修改用户名root为ad…
阅读更多...
docker-compose自定义网络，解决docker-compose网段路由冲突

docker-compose自定义网络，解决docker-compose网段路由冲突

问题排查 先route一波查看一下路由表 容器路由19和堡垒机路由冲突 解决方案 更改docker网段更改docker生成容器的网段 > 基本操作 docker network ls &#xff1a;查看docker网络列表 docker network inspect <network id/name>&#xff1a;查看某个docker网络详情…
阅读更多...
前端 - ts - - declare声明类型

前端 - ts - - declare声明类型

在使用typeScript的项目中 需要声明属性类型 单独的局部属性 可以直接在当前文件中声明 全局属性需要在项目根目录下新建.d.ts文件 vite会自动识别.d.ts类型文件 在该文件中使用declare声明类型有三种写法 1、在某种类型的文件中声明 2、声明window上的属性类型 3、全局声明…
阅读更多...
[Mac]利用Hexo+Github Pages搭建个人博客

[Mac]利用Hexo+Github Pages搭建个人博客

由于我这台Mac基本没啥环境&#xff0c;因此需要从零开始配置&#xff0c;供各位参考。 注意⚠️&#xff1a;MacBook (M4)使用/bin/zsh作为默认Shell&#xff0c;其对应的配置文件为~/.zshrc 参考文档&#xff1a; HEXO系列教程 | 使用GitHub部署静态博客HEXO | 小白向教程 文…
阅读更多...
运维面试题（十一）

运维面试题（十一）

1.如果一个硬盘 IO 时阻塞了&#xff0c;会发生什么情况&#xff1f; 进程/线程挂起&#xff1a;发起I/O操作的进程或线程会被操作系统置为阻塞状态&#xff08;等待状态&#xff09;&#xff0c;直到I/O完成。CPU资源释放&#xff1a;阻塞的线程会让出CPU&#xff0c;操作系统…
阅读更多...
sql2022 复制 事务级别发布后无法删除

sql2022 复制 事务级别发布后无法删除

Cannot execute as the database principal because the principal "dbo" does not exist, this type of principal cannot be impersonated, or you do not have permission. 用SA用户登录执行下列语句 USE [xxxxx] GO EXEC dbo.sp_changedbowner loginame Nsa, …
阅读更多...
合规+增效 正也科技携智能营销产品出席中睿论坛

合规+增效 正也科技携智能营销产品出席中睿论坛

正也科技作为医药数字化领域的标杆企业&#xff0c;受邀参展第二届中睿医健产业企业家年会暨第十三届中睿医药新春论坛&#xff0c;本次论坛以“合力启新程”为主题&#xff0c;吸引了800多位医药健康企业的董事长、总经理参与&#xff0c;并通过主论坛、分论坛、路演等形式探讨…
阅读更多...
ubuntu 安装 postgresql

ubuntu 安装 postgresql

在 Ubuntu 系统中安装 PostgreSQL 的步骤如下&#xff1a; 步骤 1&#xff1a;更新软件包列表 sudo apt update步骤 2&#xff1a;安装 PostgreSQL Ubuntu 默认仓库包含 PostgreSQL&#xff0c;直接安装&#xff1a; sudo apt install postgresql postgresql-contrib -ypost…
阅读更多...
智能巡检机器人：2025年企业安全运维的“数字哨兵“

智能巡检机器人：2025年企业安全运维的“数字哨兵“

文章目录 一、2025年&#xff0c;为什么企业需要智能巡检机器人&#xff1f;二、2025年智能巡检机器人的六大核心价值三、2025行业落地实景1. 电网系统——"巡线鹰"集群作战2. 化工园区——"防爆卫士"全天候守护3. 数据中心——"冷血侦探"精准运…
阅读更多...
K8S学习之基础五十一：k8s部署jenkins

K8S学习之基础五十一：k8s部署jenkins

k8s部署jenkins 创建nfs共享目录&#xff0c; mkdir -p /data/v2 echo /data/v2 *(rw,no_root_squash) > /etc/exports exportfs -arv创建pv、pvc vi pv.yaml apiVersion: v1 kind: PersistentVolume metadata:name: jenkins-k8s-pv spec:capacity:storage: 1GiaccessMod…
阅读更多...
Vue实现的表格多选方案支持跨页选择和回显功能

Vue实现的表格多选方案支持跨页选择和回显功能

以下是纯Vue实现的表格多选方案&#xff08;不依赖UI库&#xff09;&#xff0c;支持跨页选择和回显功能&#xff1a; <template><div class"custom-table"><!-- 表格主体 --><table><thead><tr><th><input type"…
阅读更多...
Oracle 19C 备份

Oracle 19C 备份

在 Oracle 19c 中&#xff0c;备份数据库通常使用 RMAN&#xff08;Recovery Manager&#xff09; 工具&#xff0c;它是 Oracle 提供的官方备份和恢复工具。以下是通过 RMAN 备份 Oracle 19c 数据库的详细步骤和命令。 一、RMAN 基本概念 RMAN 是 Oracle 的备份和恢复工具&am…
阅读更多...
Elasticsearch：人工智能时代的公共部门数据治理

Elasticsearch：人工智能时代的公共部门数据治理

作者&#xff1a;来自 Elastic Darren Meiss 人工智能&#xff08;AI&#xff09;和生成式人工智能&#xff08;GenAI&#xff09;正在迅速改变公共部门&#xff0c;从理论探讨走向实际应用。正确的数据准备、管理和治理将在 GenAI 的成功实施中发挥关键作用。 我们最近举办了…
阅读更多...
AT24Cxx移植第三方库到裸机中使用

AT24Cxx移植第三方库到裸机中使用

简介 MCU : STM32F103C8T6 库: HAL库裸机开发 EEPROM : AT24C02, 256Byte容量&#xff0c;I2C接口 电路图 AT24C02 电路图 电路图引用 裸机直接读写 // 写入数据到 EEPROM HAL_StatusTypeDef EEPROM_WriteByte(uint16_t MemAddress, uint8_t Data) {// 发送数据uint8_t …
阅读更多...
算法刷题记录——LeetCode篇(1.3) [第21~30题](持续更新)

算法刷题记录——LeetCode篇(1.3) [第21~30题](持续更新)

更新时间&#xff1a;2025-03-29 LeetCode题解专栏&#xff1a;实战算法解题 (专栏)技术博客总目录&#xff1a;计算机技术系列目录页 优先整理热门100及面试150&#xff0c;不定期持续更新&#xff0c;欢迎关注&#xff01; 21. 合并两个有序链表 将两个升序链表合并为一个…
阅读更多...
常用数据库

常用数据库

模式的定义于删除 1.定义模式 CREATE SCHEMA [ <模式名> ] AUTHORIZATION < 用户名 >;要创建模式&#xff0c;调用该命令的用户必须拥有数据库管理员权限&#xff0c;或者获得了DBA授权 eg:为用户WANG定义一个模式S-C-SC CREATE SCHEMA "S-C-SC" AUT…
阅读更多...
Processor System Reset IP 核 v5.0（vivado）

Processor System Reset IP 核 v5.0（vivado）

这个IP的作用&#xff0c;我的理解是&#xff0c;比普通按键复位更加高效灵活&#xff0c;可以配置多个复位输出&#xff0c;可以配置复位周期。 1、输入信号&#xff1a; 重要的信号有时钟clk信号&#xff0c;一般连接到系统时钟&#xff1b;输入复位信号&#xff0c;一般是外…
阅读更多...
3月29日星期六今日早报简报微语报早读

3月29日星期六今日早报简报微语报早读

3月29日星期六&#xff0c;农历三月初一&#xff0c;早报#微语早读。 1、全国公立医疗机构自3月31日起全面停止收取门诊预交金&#xff1b; 2、永辉超市“胖东来调改店”已达47家店 一线员工薪酬涨幅50%以上&#xff1b; 3、两孩家庭补10万&#xff0c;三孩家庭补20万&#…
阅读更多...
pyinstaller 对 pyexecjs模块打包老会有终端框闪烁

pyinstaller 对 pyexecjs模块打包老会有终端框闪烁

解决办法&#xff1a; 修改 execjs 源代码 具体步骤 1. 在 execjs 源文件中&#xff0c;找到 _external_runtime.py 文件中的以下代码 p Popen(cmd, startupinfostartupinfo, stdinPIPE, stdoutPIPE, stderrPIPE, cwdself._cwd,universal_newlinesTrue)2. 修改为&#xff…
阅读更多...
代码随想录day2 数组总结

代码随想录day2 数组总结

1.二分查找 2.快慢 双指针 代码随想录day1-CSDN博客 3.滑动窗口 滑动窗口就是有一个起始位置&#xff0c;一个终止位置&#xff0c;通过调节起始位置和终止位置得到我们想要的结果。 外面一层for循环 用来更新终止位置 不满足条件 终止位置右移 里面一层while循环 …
阅读更多...
最新文章

Copyright @ 2022~2023