刚才在看视频的时候发现一件很有趣的事情,觉得对CSS的理解还不够深入,赶紧记录一下:
需求是这样的:
乍一看,就一个带遮罩的登录页面嘛,用flex就搞定了。不过本人才疏学浅,用flex的话,实现到如下效果还是没问题的(注意高亮处)
利用flex的确可以比较简单地实现带遮罩层的水平垂直居中,但是由于flex的左边还存在一个sidebar组件,要将遮罩层,按照需求完全覆盖掉sidebar,说起来应该也不太容易。
不过,利用父元素设置position:fixed和top:0,left:0来将遮罩固定在浏览器窗口最左面,并设置display:table,再将子元素(登录组件)的display这是为table-cell,加上vertical-align:middle属性,短短几行代码就解决了这个比较棘手的问题,简直轻松愉快。
遮罩层
.modal-mask {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: table;
-webkit-transition: opacity .3s ease;
transition: opacity .3s ease;
}
登录框
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
网友评论