-
【前端网页】CSS样式表进阶之盒子模型
🔎这里是【前端网页】，关注我学习前端不迷路
👍如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️👀专栏介绍
【前端网页】 目前主要更新HTML，一起学习一起进步。
👀本期介绍
本期主要介绍CSS样式表进阶之盒子模型
文章目录
1. 什么是盒子模型
所有的 HTML 元素，我们都可以看成一个四边形，即一个盒子。用 CSS 来设置元素盒子的 内边距、边框 和 外边距 的样式的方式，相当于设置盒子的样式，所以我们将其称之为 盒子模型
2. 边框：border
边框：HTML 元素盒子的框体
边框有四个属性可以设置：border-top: 上边框border -right: 右边框border -bottom: 下边框border -left: 左边框格式： 粗细（ px ） 样式 (solid double dashed dotted) 颜色solid: 实体线double: 双实体线dashed: 虚线dotted: 点虚线示例：
通用性设置：一次性设置上下左右边框样式 为 1 像素的 实体 红色线border:1px solid red;3. 内边距：padding
内边距：HTML 元素里的内容体 到 HTML 元素边框 的距离
内边距有四个属性可以设置：padding-top: 上边距padding-right: 右边距padding-bottom: 下边距padding-left: 左边距4. 外边距：margin
外边距：HTML 元素边框 到 其他 HTML 元素边框的距离
外边距有四个属性可以设置：margin-top: 上边距margin -right: 右边距margin -bottom: 下边距margin -left: 左边距5. 内外边距简化设置方式
以 padding 为例
总结：简化方式永远的顺序是 上右下左 的设置。左被忽略，就看右的设置下被忽略，就看上的设置 。只有一个，设置所有。6. 单元素-水平居中
通过设置左右 外边距自动计算，我们可以控制元素居中。格式：margin : 0 px auto ;其中，上下外边距为 0 （可自己更改），左右外边距根据 元素宽度和浏览器大小随时自动计算。示例：
7. 相邻元素-外边距合并
外边距合并：两个相邻元素的接壤外边距仅最大的生效，较小的被合并。（被合并的外边距代码已经无用，所以一般我们会从代码上删除）（一般仅上下外边距有合并现象）
示例代码：
注意：外边距合同通常发生在 margin-bottom 和 margin-top 之间。左右外边距 一般不会合并
8. 父子元素-外边距塌陷
外边距塌陷：特指父子元素，因父元素无边框，父元素的外边距会塌陷到子元素中。导致子元素设置外边距，父元素会被级联作用。这样的现象叫做外边距塌陷。（四个外边距都会出现塌陷现象）
准备代码：
解决方案：
-
相关阅读:
Leetcode力扣 MySQL数据库 1919 兴趣相同的朋友
Django和Python版本兼容表
PID积分抗饱和3种常用方法（附H5UPLC FB块完整源代码和算法讲解）
frp 反向隧道代理（内网穿透）之协议 “tcp + encryptor”
Docker Jenkins(改错版本)
Nginx之静态文件服务器的搭建
SpringMVC14-SpringMVC执行流程
24pht春3
python 通过图片（原图）精确获取图片拍摄的位置
Go语言进阶，并发通道机制搭建一个可注册昵称的聊天室
- 原文地址：https://blog.csdn.net/weixin_45481821/article/details/125817694
