一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
11、visibility：hidden和display：none 的区别
相同点：都可以让元素隐藏，点击该区域的事件不会触发
不同点：display：none 该元素不会在页面中占据空间，切换display属性状态会触发回流
visibility：hidden 会占据空间，切换visibility属性状态会触发重绘
12、对于盒子模型的理解？
css3中的盒模型有以下两种：标准盒子模型、IE盒子模型
相同点：都是有四个部分组成的，分别是margin、border、padding、content
不同点：
标准盒子模型，width和height只包含content
IE盒子模型，width和height包含border，padding、content
可以通过设置box-sizeing属性来改变盒子模型：
box-sizeing ：content-box 表示标准盒子模型
box-sizeing：border-box 表示IE盒子模型
13、scss、less是什么？为什么要使用他们？
他们都是css的预处理器，以前的原始css都是静态写法概念写的太low了，不具备复用性。他们的出现相当于黑魔法一样，让我们可以在css领域也可以实现变量，继承，运算，函数封装复用和拓展的能力，这样子就可以把样式玩出花来。
比如scss我就可以用$xxx进行样式变量定义，实现主题色的概念；也可以使用@mixins和@include来实现样式的复用和拓展
14、对媒体查询的理解？
媒体查询主要是一套表达式组成，最终会解析成true/false
使用@media查询，可以针对不同的媒体类型定义不同的样式，也可以针对不同的屏幕尺寸设置不同的样式，特别是需要设计响应式的页面
15、对于flex布局的理解
设为flex布局以后，子元素的float、clear和vertical-align属性将失效
1、flex-direction属性决定主轴的方向，即项目的排列方向
2、flex-wrap属性定义，如果一条轴线排不下，会换行
3、justify-content属性定义了项目在主轴上的对齐方式
4、align-items属性定义项目在交叉轴上如何对齐
5、align-content属性定义了多跟轴线的对齐方式，如果项目只有一条轴线，该属性不起作用
flex布局是css3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。一个容器有两条轴：一个是水平的主轴，一个是与主轴垂直的交叉轴。可以使用flex-direction来指定主轴的方向。可以使用justify-content来指定元素在主轴的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。对于容器的项目，可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例，还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例
16、什么是margin重叠问题，然后解决？
情况发生：例如margin-top：100px，margin-bottom：50px，则中间的为100px
计算原则：折叠合并后外边距的计算原则如下：
1、如果两者都是正数，那么就取最大者
2、如果是一正一负，就会正值减去负值的绝对值
3、两个都是负值时，用0减去两个中绝对值大的那个
解决办法：
对于重叠的情况，主要有两种：兄弟之间重叠和父子之间重叠
1、兄弟之间重叠
（1）底部元素变为行内盒子：display：inline-block
（2）底部元素设置成浮动：float
（3）底部元素的position的值为absolute/fixed
2、父子之间重叠
（1）父元素加入：overflow：hidden
（2）父元素添加透明边框：border:1px solid transparent
（3）子元素变为行内盒子：display：inline-block
（4）子元素设置成浮动：float
（5）子元素设置position的值为absolute/fixed
17、两栏布局的实现？
1、利用浮动，将左边元素宽度设置成200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认是auto，撑满整个父元素）
2、利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow：hidden；这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。
3、利用flex布局，父级元素设置display：flex，子元素设置左边定宽，右边设置flex：1
4、利用绝对定位，将父级元素设置成相对定位，左边布局设置成绝对定位，并且宽度设置为200px，将右边元素的margin-left的值设置为200px
5、利用绝对定位，将父级元素设置为相对定位，左边元素宽度设置为200px，右边元素设置成绝对定位，将右边元素的left的值设置为200px，其余方向设置成0
18、三栏布局的实现？
1、父级相对定位，子级左右两边设置绝对定位，中间设置相应的margin值，并且，左右两边要设置left：0，top：0，或者right：0，top：0
2、利用flex布局，左右两栏设置固定大小，中间一栏设置成flex：1
3、利用浮动，左右两栏设置固定大小，并设置对应方向的浮动，中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放在最后写
4、利用浮动和负边距来实现。父级元素设置左右的padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边
5、如4布局来说，左右位置的保留是通过中间列margin值来实现的，而不是通过父元素的padding来实现的，其本质来说，也是通过浮动和外边距负值来实现的
19、水平垂直居中的实现？
1、利用绝对定位，先将元素的左上角通过top：50%和left：50%定位到页面的中心，然后在通过translate来调整元素的中心点到页面的中心
2、利用绝对定位，设置四个方向的值都为0，将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中
3、利用绝对定位，先将元素的左上角通过top：50%和left：50%定位到页面的中心，然后通过margin负值来元素中心点到页面的距离
4、利用flex布局，通过align-items：center和justify-content：center设置容器垂直和水平方向上位居中对齐，然后它的子元素也可以实现垂直和水平的居中
20、对于BFC的理解，如何创建BFC？
BFC全称：Block Formmatting Context，也就是块格式化上下文
创建BFC的条件：
1、根元素：body
2、元素要设置浮动：float除none以外的值
3、元素设置绝对定位：position（absolute、fixed）
4、display值为：inline-block、table-cell、table-caption、flex等
5、overflow值为：hidden、auto、scroll
BFC的特点：
1、垂直放向上，自上而下排列，和文档流的排列方式一致
2、在BFC中上下相邻的两个容器的margin会重叠
3、计算BFC的高度时，需要计算浮动元素的高度
4、BFC是独立的容器，容器内部元素不会影响外部元素
5、每个元素的左margin值和容器的左border相接触
BFC的作用：
1、解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题
2、解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0,。解决这个问题，就需要把父元素变成一个BFC，常用的方法就是给父元素设置overflow：hidden
3、创建自适应两栏布局：可以用来创建自适应两栏布局，左边的宽度固定，右边的宽度自适应
