常见前端面试题01

1.盒子水平垂直居中

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

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201007093217948.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70#pic_center)

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

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201007093336870.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70#pic_center)

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

在这里插入图片描述

（4）display:flex（ie10+）

在这里插入图片描述

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

元素的id可以直接拿来当作dom
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201007093944640.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70#pic_center)

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

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201007094128825.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70#pic_center)

2.盒模型标准

content、padding、border、margin

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

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

flex详见阮一峰的flex布局
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201007094244553.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70#pic_center)

3.几大经典布局

– 左右固定、中间自适应

实现的效果图如下：
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201007094501556.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70#pic_center)

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

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201007094954764.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70#pic_center)

（2）.使用flex

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20201007095333253.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70#pic_center)

（3）.定位实现

![在这里插入图片描述]( https://img-blog.csdnimg.cn/2020100709550849.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70#pic_center)

–移动端响应式布局

*媒体查询（一套）

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

flex

vh/vw

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