【校招VIP】前端CSS/CSS3之盒模型、弹性盒布局

考点介绍：

在移动端，Flex已经变成最流行的布局模型，虽然不能完全替代普通盒子模型，但是第一的位置已经坐稳。在校招中，弹性布局也是重要的考查点，包括对弹性的理解，以及各种样式的实现。

答案详情和文章内容点击文末链接查看！

一、考点题目

1.使用CSS的flexbox布局，不能实现以下哪一个效果：

A.三列布局，随容器宽度等宽弹性伸缩

B.多列布局，每列的高度按内容最高的一列等高

C.三列布局，左列宽度像素数确定，中、右列随容器宽度等宽弹性伸缩

D.多个宽高不等的元素，实现无缝瀑布流布局

解答： 正确答案是 D，Flexbox可以简单快速的创建一个具有弹性功能的布局……

2.介绍一下标准的CSS的盒子模型？

解答：有两种， IE 盒子模型、W3C 盒子模型 .……

3.box-sizing属性有哪些，他们的作用是什么？

解答：用来控制元素的盒子模型的解析模式，默认为content-box……

4. 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

解答：标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin……

5.解释一下你对盒模型的理解，以及如何在CSS中告诉浏览器使用不同的盒模型来渲染你的布局。

解答：说到IE的bug，在IE6以前的版本中，IE对盒模型的解析出现一些问题，跟其它浏览器不同，将border与padding都包含在width之内……

二、考点文章

1. Flex布局总结(详细)  

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

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

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

三、考点视频

盒子模型和box-sizing属性

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

pc端专题链接： https://xiaozhao.vip/dTopic/detail/241

移动端专题链接：https://m.xiaozhao.vip/dTopic/detail/241