考点介绍：
在移动端，Flex已经变成最流行的布局模型，虽然不能完全替代普通盒子模型，但是第一的位置已经坐稳。在校招中，弹性布局也是重要的考查点，包括对弹性的理解，以及各种样式的实现
本期分享的前端布局模块之Flex弹性布局，分为试题、文章以及视频三部分。
答案详情解析和文章内容可扫下方二维码或链接即可查看！
一、考点题目
1、以下选项中为 CSS 盒模型的属性有
A.font
B.margin
C.padding
D.visible
E.border
解答：
BCE
盒模型的属性：margin（外边距）、border（边框）、padding（内边距）、content（内容）......
2、下列选项中哪一个是html盒模型中关于border的最规范的写法？
A.p{ border:5px solid red;}
B.p{border:5px red solid; }
C.p{border: red solid 5px; }
D.p{border: solid red 5px; }
解答：
A
为了代码的可读性，建议按照，border-width，border-style，border-color，的顺序书写。但其实顺序调换是不影响呈现的.....
3、新增盒模型属性
解答：
box-shadow 阴影 h-shadow v-shadow
blur spread color inset
resize 调整尺寸 none/both/horizontal
outline-offset 轮廓的偏移量 length/inherit.....
4、如何设置怪异盒模型，与普通盒模型区别（解决盒子加上了边框，宽度溢出的问题）
解答：
表示怪异盒模型（移动布局）
CSS语法：border-sizing: border-box
规则：width + margin(左右)（即width已经包含了padding和border值）
标准盒模型
CSS语法：border-sizing: content-box
规则：一个块的总宽度= width + margin(左右) + padding(左右) + border(左右).....
（答案点击下方链接或者扫海报二维码查看哦）
二、考点文章
1、一劳永逸的搞定 flex 布局（下）
父容器
设置换行方式：flex-wrap
决定子容器是否换行排列，不但可以顺序换行而且支持逆序换行……
2、盒子模型和弹性布局实现自适应布局
在常规的项目开发中，很多时候不使用响应式框架的前提下，都需要开发人员手动实现自适应，这个时候盒子模型的优势就体现了出来。盒子结构的合理嵌套，以及CSS样式的使用，就能实现简单的自适应布局……
3、【校招VIP】css的盒子模型以及布局（面试考点）
盒子模型都有哪些： 有标准盒子模型和IE盒子模型，也叫怪异盒子模型；包括flex弹性伸缩布局以及我们的column-ciunt多列布局……
（扫下方海报二维码查看完整版）
三、考点视频
1、盒子模型和box-sizing属性
本题是前端项目开发的基础，也是面试的必考题之一。要区分传统box模型和CSS3加了box-sizing属性后的区别，和对应的使用场景。主要是对元素width和块总宽度的考察，包括padding和border的值的影响……
更多资讯可搜索校招VIP小程序查看哦!
移动端链接：https://m.xiaozhao.vip/dTopic/detail/478
PC端链接：xiaozhao.vip/dTopic/deta…
