前端遇到的面试题

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