【校招VIP】前端布局模块之Flex弹性布局

考点介绍：

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

本期分享的前端布局模块之Flex弹性布局，分为试题、文章以及视频三部分。

答案详情解析和文章内容可点击链接即可查看！

一、考点题目

1、使用flex怎么实现元素的水平居中和垂直居中？

解答：水平居中

.box {
 
    display: flex;
 
    justify-content: center;
 
}

 

2、新增盒模型属性

解答：box-shadow 阴影 h-shadow v-shadow
blur spread color inset......

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

解答：规则：width + margin(左右)（即width已经包含了padding和border值）......

（答案点击下方链接查看哦）

二、考点文章

1、Flex布局总结(详细)

以前在网页开发过程中，布局一直是不可或缺的，从最早的表格布局，到后来的DIV+CSS布局，现在再到CSS3的伸缩布局……

2、一劳永逸的搞定 flex 布局(上）

一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中……

3、一劳永逸的搞定 flex 布局（下）

决定子容器是否换行排列，不但可以顺序换行而且支持逆序换行……

（点击下方链接查看完整版）

三、考点视频

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

本题是前端项目开发的基础，也是面试的必考题之一……

更多资讯可搜索校招VIP小程序查看哦!
移动端链接：https://m.naoffer.com/dTopic/detail/629
PC端链接：校招VIP，专题 - 校招VIP