夜光带你走进 前端工程师(二十五 jS )
夜光序言:
越想活的坦荡潇洒的人,身上越是藏着沉重的秘密。
正文:
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;
}