前端遇到的面试题

1.水平垂直居中

• 绝对定位 + transform

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

• 绝对定位 + margin(子元素宽高知道的情况下)

position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;

• 绝对定位 + margin:auto

 position:absolute;
 top:0;
 bottom:0;
 left:0;
 right:0;
 margin:auto;

• flex布局

display:flex;
justify-content:center;
align-items:center;

• table-cell(父元素宽高知道的情况下)

父
height:500px;
width:500px;
display:table-cell;
text-align:center;
子
display:inline-block;

• grid布局(父元素高知道的情况下)

父
height:500px;
display:grid;
子
align-self:center;
justify-self:center;

2.如何设置左边固定宽度，右边自适应

• calc计算宽度

.left{ 
 	float:left;
 	width:100px; 
 } 
.right{ 
 	float:right;
 	width:calc(100% - 100px); 
 }

• float + margin

.left{ 
 	float:left;
 	width:100px; 
} 
 .right{ 
 	float:right; 
 	margin-left:100px;
 }

• float + overflow

.left{ 
 	float:left;
 	width:100px; 
} 
 .right{ 
 	float:right; 
 	overflow:hidden;
 }

• flex布局

父 
display: flex;
子 
.left{ width:100px; } 
.right{ flex:1 }

父 
display: flex;
子 
left{ flex:0 0 100px; } 
.right{ flex:1 } 

3.三种定位的区别

• static 静态定位
  默认值，设置 top，right，bottom，left 这些偏移属性不会影响静态定位的正常显示(设置这些属性没有用)。
• relative 相对定位
  元素相对自身偏移某个位置，元素保持其未定位的形状，它原本所占用的空间依旧保留，可以通过 z-index 进行层次分级，子元素可相对该元素进行绝对定位；left，top，right，bottom是相对于当前自身进行偏移的，不能独立存在，必须配合定位使用。
• absolute 绝对定位
  使元素完全脱离文档流；相对于其最近的父级块元素(如果父级元素 position 为 static 时，absolute 元素将继续向上级查找，直到找到 body，以 body 坐标原点进行定位)；元素原先在正常文档流中所占的空间会关闭，元素定位后生成一个块级框。
  4.css设置半透明
• 使用rgba()函数
• 使用opacity属性
  5.rem和px的区别
• px它是相对于显示器屏幕分辨率而言的；作为单位是固定不变的，不能适应浏览器缩放时产生的变化
• rem是css3中新增的相对单位，相对于html根元素，当在根元素中使用rem设置font-size时，此时的1rem等于浏览器默认字体大小，大多数浏览器默认大小为16px
  6.vue父组件如何获取子组件的方法
• 使用$refs
• 使用$children
• 通过组件的 $emit、$on方法
  7.vue两个组件如何共享数据
• 父 -> 子共享数据使用props
• 子 -> 父共享数据$emit
• 兄弟组件之间的数据共享使用EventBus
• 使用vuex
• 通过 $parent / $children 或 $refs 访问组件实例
  8.vue2的双向绑定原理
  通过数据劫持结合发布订阅模式的方式来实现的，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。