【重识 HTML + CSS(8)，想学web开发-CSDN博客

本文链接：https://blog.csdn.net/m0_61549781/article/details/136795725

盒子模型 (Box Model)

===================================================================================

HTML中的每一个元素都可以看做是一个盒子，如下图所示，具备这 4 个属性：

内容 (content)

盒子里面装的东西

内边距 (padding)

怕盒子里装的东西损坏而添加的泡沫或者其它抗震的辅料

边框 (border)

就是盒子的边框，比如木盒子四周的木板

外边距 (margin)

为了方便取出，盒子之间保留一定的空隙

在这里插入图片描述

默认的盒子模型如下图所示：

在这里插入图片描述

浏览器开发者工具中看到的盒子模型：

在这里插入图片描述

一个元素的实际占用宽度 = border-left + padding-left + width + padding-right + border-right

一个元素的实际占用高度 = border-top + padding-top + height + padding-bottom + border-bottom

一个元素的空间宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

一个元素的空间高度 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

示例代码：盒子模型

宽度、高度相关 CSS 属性 - width、height

================================================================================================

width：宽度

min-width：最小宽度，无论内容多少，宽度都大于或等于 min-width

max-width：最大宽度，无论内容多少，宽度都小于或等于 max-width

height：高度

min-height：最小高度，无论内容多少，高度都大于或等于 min-height

max-height：最大高度，无论内容多少，高度都小于或等于 max-height

内边距相关 CSS 属性 - padding

=========================================================================================

padding-left：左内边距

padding-right：右内边距

padding-top：上内边距

padding-bottom：下内边距

padding：是 padding-top、padding-right、padding-bottom、padding-left 的简写属性

padding 的取值规律：顺时针方向设值 top、right、bottom、left

如果缺少 left，那么 left 就使用 right 的值
如果缺少 bottom，那么 bottom 就使用 top 的

在这里插入图片描述

示例代码：padding，简写属性

外边距相关 CSS 属性 - margin

========================================================================================

margin-left：左外边距

margin-right：右外边距

margin-top：上外边距

margin-bottom：下外边距

margin：是 margin-top、margin-right、margin-bottom、margin-left 的简写属性

margin 的取值规律与 padding 相同

示例代码：margin

【常见问题】上下 margin 传递

margin-top 传递：

如果块级元素的顶部线和块级父元素的顶部线重叠，那么这个块级元素的 margin-top 值会传递给父元素

margin-bottom 传递：

如果块级元素的底部线和块级父元素的底部线重叠，并且父元素的高度是 auto，那么这个块级元素的 margin-bottom 值会传递给父元素

注：水平方向上的 margin 永远不会发生传递现象

如何防止出现传递问题？

给父元素设置 padding-top\padding-bottom
给父元素设置 border
给父元素或者子元素设置 display: inline-block
以后理解得更深入，还会学到其他解决方法

建议：使用相应的属性去做对应的事情

margin 一般是用来设置兄弟元素之间的间距
padding 一般是用来设置父子元素之间的间距

代码：上下margin传递_01、上下margin传递_02

【常见问题】上下 margin 折叠

垂直方向上相邻的 2 个 margin (margin-top、margin-bottom) 有可能会合并为 1 个 margin，这种现象叫做collapse（折叠）

水平方向上的 margin (margin-left、margin-right) 永远不会 collapse

折叠后最终值的计算规则：

如果都是正数，最终值是：绝对值最大的那个正数值
如果都是负数，最终值是：绝对值最大的那个负数值
如果正数、负数都有，最终值是：最大正数和最小负数相加

如何防止 margin collapse？

只设置其中一个元素的 margin
条件允许的话，使用 padding 取代 margin
以后理解得更深入，还会学到其他解决方法

两个兄弟块级元素之间上下 margin 的折叠：

在这里插入图片描述

无内容块级元素内部 margin 的折叠：

在这里插入图片描述

无内容块级元素之间 margin 的折叠（折叠是可以连续的）：

在这里插入图片描述

块级元素折叠问题看似有点莫名其妙，实际上还是有实用之处的

比如连续段落之间的 margin，恰好需要这种折叠效果

在这里插入图片描述

border 边框

============================================================================

边框很常见：

在这里插入图片描述

CSS属性 - border-width、border-color、border-style

边框宽度：border-*-width

border-top-width、border-right-width、border-bottom-width、border-left-width
border-width 是上面 4 个属性的简写属性

边框颜色：border-*-color

border-top-color、border-right-color、border-bottom-color、border-left-color
border-color 是上面 4 个属性的简写属性

边框样式：border-*-style

border-top-style、border-right-style、border-bottom-style、border-left-style
border-style 是上面 4 个属性的简写属性
边框样式的取值：

在这里插入图片描述

none：没有边框，边框颜色、边框宽度会被忽略

hidden：与 “none” 类似，多用在表格上，用于解决边框冲突

dotted：边框是一系列的点

dashed：边框是一条虚线

solid：边框是一条实线

double：边框有两条实线。两条线宽和其中的空白的宽度之和等于 border-width 的值

groove：边框看上去好象是雕刻在画布之内

ridge：和 grove 相反，边框看上去好象是从画布中凸出来

inset：该边框使整个框看上去好象是嵌在画布中

outset：和 inset 相反，该边框使整个框看上去好象是从画布中凸出来

示例代码：边框

CSS 属性 - border-top、border-right、border-bottom、border-left、border

border-top、border-right、border-bottom、border-left：分别设置 4 个方向的边框

在这里插入图片描述

边框颜色、宽度、样式的编写顺序任意

border：统一设置 4 个方向的边框

在这里插入图片描述

边框的形状 - 三角形、双色平分

边框的形状可能是：矩形、梯形、三角形 等形状

在这里插入图片描述

实现三角形：

在这里插入图片描述

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。