web前端面试题合集（八）

　　如何居中一个浮动元素

　　单纯的浮动元素其实不是很好居中的，除非你再给他嵌套一个盒子，那这也就不是给浮动盒子居中了;要么就是加相对定位进行辅助，具体代码如下：

　　- 方法一：嵌套一个父盒子

　　```CSS

　　.container{width:200px;margin:0 auto;} /*设置父盒子的宽度和子盒子一样就可以了*/

　　.container .inner{width:200px; float:left}

　　```

　　- 方法二：利用相对定位

　　```CSS

　　.box{width:200px;float:left; position:relative;left:50%; margin-left:-100px}

　　```

　　如何实现一个自适应div，宽高比始终为4:3

　　- 如果想实现一个元素的宽高比例固定，那么就需要让他们参照同一个参照物，宽高本身是两个方向的，各自参照自己的父元素，所以不太好实现，那么就需要转换思维了，大家都知道我们的padding margin 如果设置了百分数，他们不论是哪个方向参照的都是父盒子的width，所以我们可以这样来做：

　　- 父盒子{position:relative;width:100%;padding-top:75%;height:0;}

　　子盒子{position:absolute;top:0;bottom:0; left:0;right:0}

　　- 用padding来模拟父元素的高度，子元素设置绝对定位，四个方向都设置为0，就会把宽高拉伸开，那么他的宽高就会一直保持比例为4:3了

　　设置元素显示隐藏的几种方式，与区别?

　　常见隐藏元素的方法有opacity:0; visibility:hidden; display:none; transform:scale(0);height:0px;

　　他们之间的区别是：

　　opacity：0; 是把透明度设置为0，但是这个元素还是真实存在的，只是看不见了而已，他在页面中依然占位，所有的点击事件也都是可以触发的;

　　visibility:hidden; 他在页面中的效果和opacity：0;有一点相似，他也是看不见的，并且在页面中依然占位，但是不同的是它不能够触发点击事件;

　　display：none;和他们就不一样了，它属于是完全删除的状态，相当于不存在于页面当中了，因此它不占位，也不能触发点击事件。

　　transform:scale(0);使用缩放,按照x和y的中心位置进行缩小占位置

　　height:0px;的时候不占页面空间如果元素中有文本的话需要给元素添加oveflow:hidden;font-size:0px

　　更多关于“web前端培训”的问题，欢迎咨询千锋教育在线名师。千锋教育多年办学，课程大纲紧跟企业需求，更科学更严谨，每年培养泛IT人才近2万人。不论你是零基础还是想提升，都可以找到适合的班型，千锋教育随时欢迎你来试听。