美文网首页
利用display:table 和 display:table-

利用display:table 和 display:table-

作者: 校长不读书 | 来源:发表于2018-06-16 23:42 被阅读0次

刚才在看视频的时候发现一件很有趣的事情,觉得对CSS的理解还不够深入,赶紧记录一下:

需求是这样的:

需求

乍一看,就一个带遮罩的登录页面嘛,用flex就搞定了。不过本人才疏学浅,用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;

}

相关文章

网友评论

      本文标题:利用display:table 和 display:table-

      本文链接:https://www.haomeiwen.com/subject/azrieftx.html