常见前端面试题01

1.盒子水平垂直居中

（1） 定位1：需要知道元素的定位元素的宽高

在这里插入图片描述

（2）定位2：父亲的宽高需要限定

在这里插入图片描述

（3）定位3：不需要父有具体宽高限制（兼容性不如上边Ie9+）

在这里插入图片描述

（4）display:flex（ie10+）

在这里插入图片描述

（5）js实现就是模拟css写样式

元素的id可以直接拿来当作dom
在这里插入图片描述

（6）固定宽高的父级 display：table-cell 子级inline-block

在这里插入图片描述

2.盒模型标准

content、padding、border、margin

标准盒模型（content-box）、ie怪异盒模型（border-box）、flex弹性伸缩盒模型、column多列盒模型

怪异盒模型的好处，固定到border控制宽高，不用重新计算padding和border

flex详见阮一峰的flex布局
在这里插入图片描述

3.几大经典布局

– 左右固定、中间自适应

实现的效果图如下：
在这里插入图片描述

（1）.使用calc计算中间盒子的宽度

在这里插入图片描述

（2）.使用flex

在这里插入图片描述

（3）.定位实现

在这里插入图片描述

–移动端响应式布局

*媒体查询（一套）

*rem（应用于两套 中的移动端）

flex

vh/vw

posted @ 2020-10-07 10:09  jacksonni  阅读(186)  评论(0)  编辑  收藏  举报