CSS+DIV积累

最新推荐文章于 2023-11-06 16:55:55 发布

bestcxx

最新推荐文章于 2023-11-06 16:55:55 发布

阅读量187

点赞数

分类专栏： # css+div

如果我们不尊重权威,源码看起来也没有什么借鉴意义,如果我们完全的信服权威,那么源码中未发现的bug就天然的被忽略了

本文链接：https://blog.csdn.net/bestcxx/article/details/83786921

版权

css+div 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

默认 DIV 隐藏

 <div style="display: none;">使用 show()或者 hide()改变可见性</div>

DIV 右上角

.demoStyle{
            position: absolute;
            height:20px;
            width: 30px;
            right:0px;
            top:0px;
            z-index: 1005;
            line-height:20px;
            overflow:hidden;
        }

DIV 高度为全屏

一般使用默认的可能遮罩层只覆盖一部分屏幕，所以结合一下js，动态修改一下遮罩层的高度

 $("#demoId").css({
     height: function () {
          return $(document).height();
      },
      width:"100%"
  });

DIV 透明遮罩层

  .mask {
            position: absolute; top: 0px;
            background-color: rgba(0,0,0,0.5);
            z-index: 1002; left: 0px;
        }

DIV 水平居中

 .demodev{
            rgba(0,0,0,1);
            z-index: 1003;
            background-color: white;
            border-radius: 10px;/*边角圆*/
            width: 300px;
            height: 350px;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

文字水平居中 CSS 样式

.demo-div{
    width: 100%;
    height: 100px;
    font-size: 1rem;/*文字大小*/
    color: #fff;/*文字颜色*/
    background: #23ac38;/*背景颜色*/
    text-align: center; /*文字水平居中对齐*/
    line-height:100px;  /*设置文字行距等于div的高度*/
    overflow:hidden;/*这个是必须的*/
    font-family:"微软雅黑";
    font-size:14px;
}

弹窗组合+全屏遮罩层

<div class="msgdiv" id="msgdiv">
    <span class="msgclose" id="msgclose">关闭</span>
    <span id="contentspan"></span>
</div>

 .batchshowid{
        rgba(0,0,0,1);
            text-align: left; /*让div内部文字居中*/
            z-index: 1003;
            background-color:gainsboro;
            border-radius: 10px;
            width: 300px;
            height: 200px;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .maskcredit {
            position: absolute; top: 0px;
            background-color: rgba(0,0,0,0.5);
            z-index: 1004; left: 0px;
            height: 100%;
            width: 100%;
        }
        .msgdiv{

        rgba(0,0,0,1);
            text-align: center; /*让div内部文字居中*/
            z-index: 1004;
            background-color:white;
            width: 300px;
            height: 200px;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;

            font-family:"微软雅黑";
            font-size:14px;
            line-height:200px;
            overflow:hidden;
        }

        .msgclose{
            position: absolute;
            height:20px;
            width: 30px;
            right:0px;
            top:0px;
            z-index: 1005;
            line-height:20px;
            overflow:hidden;
        }