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

考点介绍：

WebSocket 是一种网络通信协议，很多高级功能都需要它。初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？答案很简单，因为 HTTP 协议有一个缺陷：对于前端面试来说，css盒模型肯定是必考必问的前端知识点，因为这是CSS基石中非常重要的内容，而且它关联的知识也非常多，今天的专题重点来说一说面试中一般都是如何层层递进的提问呢？

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

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

一、考点题目

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

解答：表示怪异盒模型（移动布局）
CSS语法：border-sizing: border-box
规则：width + margin(左右)（即width已经包含了padding和border值）
标准盒模型
CSS语法：border-sizing: content-box
规则：一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

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

解答：问题简答
标准模型和ie模型的区别是计算宽width高height的不同。

1.标准模型width不计算padding和border；
2.ie模型width计算padding 和border；

知识解析
标准盒模型（W3C盒子模型）
设置的宽高是对实际内容content的宽高进行设置，内容周围的border和padding另外设置;

即元素实际占位的宽高为：
width【height】= 设置的content的宽【高】 + padding + border + margin

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

解答：问题简答
外边距重叠是指两个【垂直】 【相邻】的块级元素，当上下两个边距相遇时，其外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。（水平方向不会发生）
根据W3C文档的说明，当符合以下条件时，就会触发外边距重合

1.都是普通流中的元素且属于同一个 BFC
2.没有被 padding、border、clear 或非空内容隔开
3.两个或两个以上垂直方向的「相邻元素」

相邻元素包括父子元素和兄弟元素重叠后的margin计算

1.margin都是正值时取较大的margin值
2.margin都是负值时取绝对值较大的，然后负向位移。
3.margin有正有负，从负值中选绝对值最大的，从正值中选取绝对值最大的，然后相加

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

解答：问题简答

1) dom.style.width/height【只能取到内联元素】
2) dom.currentStyle.width/height【只有IE支持】
3) document.getComputedStyle(dom,null).width/height
4) dom.getBoundingClientRect().width/height
5) dom.offsetWidth/offsetHeight【常用】

知识解析

1、dom.style.width/height

通过dom节点的style样式获取，只能取到行内样式的宽和高，style 标签中和 link 外链的样式取不到.box{...}

let targetDom = document.querySelector('.box');
let width = targetDom.style.width;
let height = targetDom.style.height;
 
console.log("width",width)
console.log("height",height)

（答案点击下方链接或者扫海报二维码查看哦）

二、考点文章

1、Flex布局总结(详细)

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

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

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

常见的实现方式有2种:

1、使用简单的盒子模型的特性, 子盒子使用{ width:百分比; }实现比例缩放。
2、使用CSS的属性{ display:flex; },注意要定义在父盒子上，子盒子使用{ flex:数字; }实现比例。

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

移动端响应式布局几大方案

media
移动端和pc端一套 用于百分比

rem
针对移动端单独开发用rem

flex
部分布局结构用flex ，flex在移动端没有兼容性问题大胆使用

vh/vm
视口化开发 和百分比类似，俗称百分比布局

（扫下方海报二维码查看完整版）

三、考点视频

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

本题是前端项目开发的基础，也是面试的必考题之一。
要区分传统box模型和CSS3加了box-sizing属性后的区别，和对应的使用场景。
主要是对元素width和块总宽度的考察，包括padding和border的值的影响。

更多资讯可搜索校招VIP小程序查看哦!

移动端链接：https://m.naoffer.com/dTopic/detail/706

PC端链接：校招VIP，专题 - 校招VIP