1.水平垂直居中
- 绝对定位 + transform
css">position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
- 绝对定位 + margin(子元素宽高知道的情况下)
css">position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
- 绝对定位 + margin:auto
css"> position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
- flex布局
css">display:flex;
justify-content:center;
align-items:center;
- table-cell(父元素宽高知道的情况下)
css">父
height:500px;
width:500px;
display:table-cell;
text-align:center;
子
display:inline-block;
- grid布局(父元素高知道的情况下)
css">父
height:500px;
display:grid;
子
align-self:center;
justify-self:center;
2.如何设置左边固定宽度，右边自适应
- calc计算宽度
css">.left{
float:left;
width:100px;
}
.right{
float:right;
width:calc(100% - 100px);
}
- float + margin
css">.left{
float:left;
width:100px;
}
.right{
float:right;
margin-left:100px;
}
- float + overflow
css">.left{
float:left;
width:100px;
}
.right{
float:right;
overflow:hidden;
}
- flex布局
css">父
display: flex;
子
.left{ width:100px; }
.right{ flex:1 }
css">父
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
