2024年最全【重识 HTML + CSS】盒子模型相关知识点(1)，2024年最新面试经历过程

Vue

• 什么是MVVM？

• mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

• 组件中写 name 选项有什么作用？

• Vue 的 nextTick 的原理是什么？

• Vuex 有哪几种属性?

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  

• 外边距相关 CSS 属性 - margin

• • 【常见问题】上下 margin 传递

• 【常见问题】上下 margin 折叠

• border 边框

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

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

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

• 行内级非替换元素的注意点

• CSS 属性 - border-radius 圆角

• CSS 属性 - outline

• CSS 属性 - box-shadow

• CSS 属性 - text-shadow

• CSS 属性 - box-sizing

• 元素的水平居中显示（行内级、块级、inline-block）

博文集合：【重识 HTML + CSS】知识点目录

本章代码：https://gitee.com/szluyu99/html_css_note/tree/master/day07/02-盒子模型

盒子模型 (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 个方向的边框

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

---

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

实现三角形：

实现双色平分：

示例代码：形状-三角、形状-太极

行内级非替换元素的注意点

---

以下属性对行内级非替换元素不起作用：

• width、height、margin-top、margin-bottom

以下属性对行内级非替换元素的效果比较特殊：

padding-top、padding-bottom、border-top、border-bottom

示例代码：行内级元素注意点_1、行内级元素注意点_2

CSS 属性 - border-radius 圆角

---

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素