实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0705:margin,padding的一些理解和定位的认识</title>
<script>
function $(str){
return(document.getElementById(str));
}
window.onload = function(){
$("btn").onclick = function(){
$("shade").style.display = "block";
$("login").style.display = "block";
$("login_border").style.display = "block";
}
$("shade").onclick = function(){
$("login").style.display = "none";
$("login_border").style.display = "none";
this.style.display = "none";
}
}
</script>
<style>
body{
font-size:12px;
}
.box_h{
height: 300px;
margin-top:50px;
background-color:#ddd;
}
.box{
width: 250px;
height: 250px;
padding: 10px;
border: 1px solid #aaa;
float:left;
margin-left: 20px;
}
.box1{
width: 100px;
height:100px;
margin-bottom:10px;
background-color: yellow;
}
.box2{
width:100px;
height:100px;
margin-top: 10px;
background-color: greenyellow;
}
.box3{
width: 200px;
height: 200px;
background-color: green;
}
.box4{
width: 100px;
height:100px;
background-color: yellow;
margin-top: 30px;
}
.box5{
width: 100px;
height:100px;
margin: 0px auto;
background-color: aqua;
}
.box_h2{
height: 340px;
background-color: lightblue;
margin-top: 20px;
border:1px solid #aaa;
}
.box_h2_box{
width:400px;
height: 300px;
background-color: green;
overflow: hidden;
position:relative;
display:inline-block;
margin-left:20px;
}
.box_h2_box1{
height: 100px;
width:100px;
background-color: #aaaaaa;
position:relative;
left:100px;
top:0px;
}
.box_h2_box2{
height: 100px;
width:100px;
background-color: #aaaaaa;
position:relative;
}
.box_h2_box3{
height: 100px;
width:100px;
background-color: #aaaaaa;
position:relative;
left:200px;
top:-100px;
}
.box_h2_box4{
height: 100px;
width:100px;
background-color: #aaaaaa;
position:relative;
left:100px;
top:-100px;
}
.box_h2_box5{
height: 100px;
width:100px;
background-color: #aaaaaa;
position:absolute;
left:100px;
top:0px;
}
.box_h2_box6{
height: 100px;
width:100px;
background-color: #aaaaaa;
position:absolute;
left:0px;
top:100px;
}
.box_h2_box7{
height: 100px;
width:100px;
background-color: #aaaaaa;
position:absolute;
left:200px;
top:100px;
}
.box_h2_box8{
height: 100px;
width:100px;
background-color: #aaaaaa;
position:absolute;
left:100px;
top:200px;
}
.box_pad_big{
width: 150px;
height: 150px;
margin-top: 20px;
margin-left: 20px;
display:inline-block;
padding:50px;
background-color: greenyellow;
}
.box_pad_small{
width: 150px;
height: 150px;
background-color: coral;
}
.box_pad_big1{
width: 250px;
height: 250px;
display:inline-block;
margin-top: 20px;
margin-left: 20px;
background-color: greenyellow;
}
.box_pad_small2{
padding:50px;
background-color: wheat;
}
.box_pad_big3{
width: 250px;
height: 250px;
margin-top: 20px;
margin-left: 20px;
display:inline-block;
box-sizing: border-box;
padding:50px;
background-color: greenyellow;
}
#head_nav{
height: 38px;
width: 100%;
background-color: #222222;
position:fixed;
z-index: 10;
top:0;
left:0;
}
#btn{
position: absolute;
right:20px;
top:5px;
cursor:pointer;
}
#btn:hover{
color: coral;
}
#shade{
position: fixed;
z-index: 11;
left: 0;
top:0;
width: 100%;
height:100%;
background-color:#000;
opacity:0.5;
display:none;
}
#login{
width: 250px;
height:150px;
position: fixed;
background-color:#fff;
z-index: 13;
padding: 10px;
box-sizing: border-box;
display:none;
left:50%;
top:50%;
margin-top:-85px;
margin-left: -125px;
}
#login_form{
width: 218px;
margin: 0 auto;
}
#login_border{
width: 280px;
height:180px;
position: fixed;
background-color:#000;
z-index: 12;
opacity: 0.3;
left:50%;
top:50%;
margin-top:-100px;
margin-left: -140px;
display:none;
}
#submit{
margin-right: 10px;
}
input[type="submit"],input[type="reset"]{
cursor: pointer;
}
#btn_close{
width:15px;
height: 15px;
position:absolute;
right: 2px;
top:2px;
background-color: lightblue;
text-align: center;
line-height: 15px;
}
</style>
</head>
<body>
<div id="shade"></div>
<div id="login_border"></div>
<div id="login">
<div id="login_form">
<form>
<p>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="输入用户名" required/>
</p>
<p>
<label for="pwd">密 码:</label>
<input type="password" id="pwd" name="pwd" placeholder="输入密码" required />
</p>
<p>
<input type="submit" id="submit" value="登录" /><input type="reset" value="重置" />
</p>
</form>
</div>
</div>
<div id="head_nav">
<button id="btn">登录</button>
</div>
<div class="box_h">
<div class="box">
<div class="box1">同级埸陷</div>
<div class="box2"></div>
</div>
<div class="box">
<div class="box3">
<div class="box4">嵌套传递</div>
</div>
</div>
<div class="box">
<div class="box5">
自动挤压
</div>
</div>
</div>
<h3>解决内边距对盒中内容的影响的三种方案</h3>
<div class="box_h2">
<div class="box_pad_big">
<div class="box_pad_small">第一种</div>
</div>
<div class="box_pad_big1">
<div class="box_pad_small2">
<div class="box_pad_small">第二种</div>
</div>
</div>
<div class="box_pad_big3">
<div class="box_pad_small">第三种</div>
</div>
</div>
<div class="box_h2">
<div class="box_h2_box">
<div class="box_h2_box1">1(相对定位）</div>
<div class="box_h2_box2">2(相对定位）</div>
<div class="box_h2_box3">3(相对定位）</div>
<div class="box_h2_box4">4(相对定位）</div>
</div>
<div class="box_h2_box">
<div class="box_h2_box5">5(绝对定位）</div>
<div class="box_h2_box6">6(绝对定位）</div>
<div class="box_h2_box7">7(绝对定位）</div>
<div class="box_h2_box8">8(绝对定位）</div>
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例