【CSS3】一文搞懂盒子模型（知识点加案例），2024年最新腾讯 前端 面试

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

盒子模型组成

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

上面的图片说明了盒子模型(Box Model)：

Margin(外边距) - 清除边框外的区域，外边距是透明的

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

盒子边框

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

border: 1px solid pink;

这是边框的综合写法，表示要一个大小1像素的实线粉色边框

圆角边框

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

border-radius: 10px /一个数值表示四个角都是相同的10px的弧度/

像素值如果取宽度和高度的一半，则会变成一个圆形，可以用百分制表示

内边距（padding）

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

什么是内边距？

内边距就是内容和边框之间的距离

padding-left: 10px; /左内边距/

padding: 20px; /padding如果只写一个值，表示上下左右都是20像素/

padding: 10px 30px; /上下10像素，左右30像素/

padding: 10px 30px 50px /上10，左右30，下50/

padding:10px 20px 30px 40px /顺时针表示，上右下左/

外边距（margin）

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

我们可以通过margin相关操作来实现盒子在浏览器中的移动

比如我们想让盒子向下移动20像素：

margin-top: 20px;

更重要的是，我们可以通过margin实现盒子在浏览器中居中对齐

居中对齐需要满足以下两个条件：

**1.必须是块级元素

2.盒子必须指定了宽度**

例如：

居中对齐

在浏览器中实现效果为：

上下可以随意指定大小，但是左右一定要是auto

插入图片与背景图片在更改大小和位置时的区别

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

这里先插播一条知识点：

文字水平居中：

text-align: center;

背景图片更改大小时只能用background-size

背景图片更改可以在background中简写表示：

插入图片更改大小及位置：

img {

width:200px; /插入图片更改大小用width和height/

height:220px;

margin-top:30px; /插入图片更改位置可以用margin和padding/

margin-left:50px;

行内元素上下内外边距问题

---

注意：行内元素是只有左右外边距的，是没有上下内边距的

我们尽量不要给行内元素指定上下内外边距

外边距合并

---

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直距离不是二者相加，而是两者之中的最大者。这种现象被称为相邻块元素垂直外边距的合并

上述问题影响不大，尽量避免就好。但是在开发过程中遇到最多问题的是嵌套块元素垂直边距的合并问题

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并

下面我们着重讲嵌套块元素垂直边距合并的解决办法：

先给一个示例：

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
ript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-TofVh2Dn-1713421597457)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！