【校招VIP】前端CSS/CSS3之盒模型- 校招VIP

考点介绍：

对于前端面试来说，css盒模型肯定是必考必问的前端知识点，因为这是CSS基石中非常重要的内容，而且它关联的知识也非常多，今天的专题重点来说一说面试中一般都是如何层层递进的提问呢？

本期分享的前端CSS/CSS3之盒模型，分为试题、文章以及视频三部分。

答案详情解析和文章内容可扫下方二维码或链接即可查看！

一、考点题目

1.如何设置怪异盒模型，与普通盒模型区别（解决盒子加上了边框，宽度溢出的问题）

解答：表示怪异盒模型（移动布局）。CSS语法：border-sizing: border-box。规则：width + margin(左右)（即width已经包含了padding和border值） ……

2.标准模型和IE模型的区别？

解答：标准模型和ie模型的区别是计算宽width高height的不同。①标准模型width不计算padding和border；②ie模型width计算padding 和border……

3.根据盒模型解释边距重叠

解答：外边距重叠是指两个【垂直】【相邻】的块级元素，当上下两个边距相遇时，其外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。（水平方向不会发生）......

4.JS如何设置/获取盒模型对应的宽和高？

解答：dom.style.width/height，通过dom节点的style样式获取，只能取到行内样式的宽和高，style 标签中和 link 外链的样式取不到......

（详细答案扫海报二维码或文末链接即可查看）

二、考点文章

1.Flex布局总结(详细)

以前在网页开发过程中，布局一直是不可或缺的，从最早的表格布局，到后来的DIV+CSS布局，现在再到CSS3的伸缩布局。最近在写小程序的项目中flex布局用得非常多，其适应性也非常强，其强大的伸缩性，发挥了极大的作用，因此就在这里整理一下flex布局的知识......

2.盒子模型和弹性布局实现自适应布局

在常规的项目开发中，很多时候不使用响应式框架的前提下，都需要开发人员手动实现自适应，这个时候盒子模型的优势就体现了出来。盒子结构的合理嵌套，以及CSS样式的使用，就能实现简单的自适应布局......

3.css的盒子模型以及布局（面试考点）

盒子模型都有哪些：有标准盒子模型和IE盒子模型，也叫怪异盒子模型；包括flex弹性伸缩布局以及我们的column-ciunt多列布局......

（文章详情扫海报二维码或文末链接即可查看）

三、考点视频

1.盒子模型和box-sizing属性

本题是前端项目开发的基础，也是面试的必考题之一。要区分传统box模型和CSS3加了box-sizing属性后的区别，和对应的使用场景......

（考点视频扫海报二维码即可查看）