2020-12-17 html、css面试题3: 水平垂直居中，左右固定中间自适应 三栏布局，静态布局、自适应布局、流式布局、响应式布局、弹性布局，IE中常见的兼容性问题，清空数组的方法

11.如何让一个盒子水平垂直居中

1、 如何让一个盒子水平垂直居中

①定位：（常用方法,推荐）
position:absolute;
position:relative;
left:值;
top:值;
②display:table-cell;
③外边距：margin-left:值;
margin-top:值;
④margin:auto;（不兼容低版本的IE浏览器）
⑤弹性盒模型：display:flex;
justify-content:conter;
align-itens:center;
⑥用transform的属性translate平移，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用。
使用top:50%; left:50%;时，是以盒子的左上角为原点定位，是左上角的原点居中，但是元素本身并不居中。
transform：translate(-50%，-50%):分别向左向上移动自身长宽的50%，使其位于中心。
transform: translate(-50%,-50%)导致的像素模糊问题解决办法：
  /** 这 0.5px加或者减都可以 */
transform: translat(calc(-50% + 0.5 px), calc(-50% + 0.5 px))；
⑦用calc计算

12.左右固定中间自适应 三栏布局（圣杯、双飞翼、弹性盒子…）

圣杯布局：

缺点：当面板的main部分比两边的子面板宽度小的时候，布局就会乱掉。

双飞翼布局:

与圣杯布局很像，也是全部往左浮动，但是在内容div里再嵌套一个div，设置子div的margin为左右div预留位置，左右div只设置margin负值即可实现。
 相似点：
1.给main设置width: 100%，占满窗口，从而自适应。
2.为了形成在一行三栏布局，给三个方块都加上浮动float: left;（注意清除浮动，因为浮动会导致父元素高度塌陷）
3.利用负margin-left把三个方块拉到一行，margin-left负多少就是往左移动多少，左边需要相对父元素的-100%，移到父元素的最左边，右边只需要移动本身宽度的负值，即可在最右边。
 区别：
1.双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间。
2.圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局的问题。
3.双飞翼布局不用设置相对布局，以及对应的left和right值。

flex布局

思路：顺着主轴依次放3列，内容在最前，通过order控制显示顺序，通过flex-grow让中间占据全部剩余空间，通过flex-basis设置左、右div的宽度。
缺点：兼容性。

13.静态布局、自适应布局、流式布局、响应式布局、弹性布局（rem、em）