夜光带你走进前端工程师（二十五 jS ）

最新推荐文章于 2019-06-01 18:15:57 发布

GeniusTeam-夜光

最新推荐文章于 2019-06-01 18:15:57 发布

阅读量154

点赞数

分类专栏： My thoughts 前端工程师 JS核心技术文章标签： js

本文链接：https://blog.csdn.net/weixin_41987706/article/details/90690709

版权

My thoughts 同时被 3 个专栏收录

911 篇文章 25 订阅

订阅专栏

前端工程师

48 篇文章 0 订阅

订阅专栏

JS核心技术

23 篇文章 1 订阅

订阅专栏

夜光序言：

越想活的坦荡潇洒的人，身上越是藏着沉重的秘密。

正文：

JS 模态框（弹出层）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .mask{
            width:100%;
            height:100% ;
            background: rgba(0,0,0,.5);
            position: absolute;
            top:0;
            left:0;
            z-index:999;
        }
    </style>
</head>
<body>
<div class="mask">

</div>

//这个还不行噢需要修改一下

.mask{
    width:100%;
    height:100% ;
    background: rgba(0,0,0,.5);
    position: fixed;
    top:0;
    left:0;
    z-index:999;
}

//整个页面都变成灰色了嘿嘿

width: 400px; //快速操作：w400px 回车即可
height: 300px; //快速操作：h300px 回车即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .mask{
            width:100%;
            height:100% ;
            background: rgba(0,0,0,.5);
            position: fixed;
            top:0;
            left:0;
            z-index:999;
        }
        .box{
            width: 400px;
            height: 300px;
            background-color: aquamarine;
            position: fixed;
            top: 50%;
            left: 50%;
            margin:-125px 0 0 -200px;
            z-index:1000;
        }                       // 出现盒子了，Nice
    </style>
</head>
<body>
<div class="mask"></div>
<div class="box">
    <span></span>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .mask{
            width:100%;
            height:100% ;
            background: rgba(0,0,0,.5);
            position: fixed;
            top:0;
            left:0;
            z-index:999;
        }
        .box{
            width: 400px;
            height: 300px;
            background-color: aquamarine;
            position: fixed;
            top: 50%;
            left: 50%;
            margin:-125px 0 0 -200px;
            z-index:1000;
        }
        .box span{
            position: absolute;
            top: 18px;
            right: 15px;
            width: 15px;
            height: 21px;
            font-size: 20px;
            cursor: pointer;    /* //样式给一个 *//*帅气*/
            border-style: solid;
            border-width: 4px;
            text-align: center;

        }
    </style>
</head>
<body>
<div class="mask"></div>
<div class="box">
    <span>x</span>
</div>

// 循序渐进由浅入深由深入浅深浅结合铸就传奇

//事件源：登陆

var login = document.getElementById("login");
   var mask = document.getElementById("mask");
   var box = document.getElementById("box");
   login.onclick = function(){
       //当我们点击登陆，会出现灰色的大盒子和绿色的小盒子
       mask.style.display="block";
       box.style.display="block";
   };
/*   事件源*/
   var close_all = document.getElementById("close_all");
   close_all.onclick=function(){
       mask.style.display="none";
       box.style.display="none";
   }

padding值

内边距会影响盒子大小

行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
       /*     padding-left: 28px;*/  //会向右边延伸28px

        }
    </style>
</head>
<body>
<div class="box">

</div>
</body>
</html>

再来个变化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
       /*     padding-left: 28px;*/
        }
        .a{
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
<div class="box">
      <div class="a">nice</div>  // 里面再嵌套一个
</div>
</body>
</html>

height: 200px; // 高度一改，子元素覆盖原先的父元素

  .a{
    background-color: antiquewhite;
height: 200px;  // 高度一改，子元素覆盖原先的父元素
}

.a{
    background-color: antiquewhite;
    height: 200px;
    padding-left: 40px;;  //子元素，嘿嘿
}

// 继承的宽度 padding不会挤开

.a{
    background-color: antiquewhite;
    height: 200px;
    padding-left: 40px;;
    padding-top: 40px;
}

GeniusTeam-夜光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
夜光带你走进前端工程师（二十五 jS ）

夜光序言：越想活的坦荡潇洒的人，身上越是藏着沉重的秘密。正文：JS 模态框（弹出层）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">&lt...
复制链接

扫一扫