实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7月5日作业</title>
<link rel="stylesheet" href="0705.css">
<style>
.question{
border-style:dashed;
border-color:lightcoral;
}
#one1{
width:100px;
height:100px;
border-width:1px;
border-style:dashed;
background-color:gray;
margin-bottom:50px
}
#one2{
width:100px;
height:100px;
border-width:1px;
border-style:solid;
background-color:lightblue;
margin-top:30px;
}
#two1{
width:200px;
height:200px;
border-width:1px;
/*border-style:solid;*//*父级添加边框后嵌套传递失效*/
background-color:lightgray;
}
#two2{
width:100px;
height:100px;
border-width:1px;
border-style:dashed;
background-color:teal;
margin-top:50px;
}
#three1{
width:100px;
height:100px;
background-color:lightgreen;
/*margin-left:auto;
margin-right:auto;*/
margin:auto;/*简写*/
}
#four1{
width:300px;
padding:50px;
background-color:lightcoral;
}
#four2{
width:200px;
height:200px;
background-color:lawngreen;
}
#four1{
width:200px;
}
#five1{
padding:50px;
background-color:lightcoral;
}
#five2{
width:200px;
height:200px;
background-color:lawngreen;
}
#five3{
width:300px;
}
#six1{
width:300px;
box-sizing:border-box;
padding:50px;
background-color:lightcoral;
}
#six2{
width:200px;
height:200px;
background-color:lawngreen;
}
#seven1{
width:100px;
height:100px;
background-color:lightgreen;
float:left;
}
#seven2{
width:200px;
height:200px;
background-color:lightblue;
float:left;
}
#seven3{
width:200px;
height:200px;
background-color:lightseagreen;
float:right;
}
#seven4{
width:100%;
height:100px;
background-color:gray;
clear:both;
}
#eight1{
width:100px;
height:100px;
background-color:lightgreen;
position:relative;
left:100px;
}
#eight2{
width:100px;
height:100px;
background-color:lightseagreen;
}
#eight3{
width:100px;
height:100px;
background-color:lawngreen;
position:relative;
left:100px;
}
#eight4{
width:100px;
height:100px;
background-color:gold;
position:relative;
left:100px;
bottom:200px;
}
#eight5{
width:100px;
height:100px;
background-color:dodgerblue;
position:relative;
left:200px;
bottom:300px;
}
#eight6{
width:300px;
height:300px;
position:relative;
border-style:solid;
border-width:1px;
}
#eight7{
width:100px;
height:100px;
background-color:lightgreen;
position:absolute;
left:100px;
}
#eight8{
width:100px;
height:100px;
background-color:lightseagreen;
position:absolute;
top:100px;
}
#eight9{
width:100px;
height:100px;
background-color:lawngreen;
position:absolute;
left:100px;
top:200px;
}
#eight10{
width:100px;
height:100px;
background-color:gold;
position:absolute;
left:100px;
top:100px;
}
#eight11{
width:100px;
height:100px;
background-color:dodgerblue;
position:absolute;
left:200px;
top:100px;
}
</style>
</head>
<body>
一、理解并写出外边距的三个特征: 同级塌陷,嵌套传递,自动挤压的案例
<br />
<div class="question">
同级塌陷:div-one2 的margin-top 30px塌陷到 div-one1的margin-bottom 50px之中
<div id="one1"></div>
<div id="one2"></div>
</div>
<br />
<div class="question">
嵌套传递：子div的margin会传递到父级div，父级添加边框或文字后嵌套传递失效
<div id="two1">
<div id="two2">
</div>
</div>
</div>
<br />
<div class="question">
自动挤压:通过margin左右auto挤压实现div元素水平居中
<div id="three1"></div>
</div>
<br />
<hr>
二、 写案例,并分析内边距对盒中内容的影响,以及解决的三种方案是什么?
内边距会增加盒子的厚度，将盒子撑大，对此有3种解决方案
<div class="question">
1、重新设置原来盒子的宽度
<div id="four1">
<div id="four2"></div>
</div>
</div>
<br />
<div class="question">
2、宽度分离
<div id="five3">
<div id="five1">
<div id="five2"></div>
</div>
</div>
</div>
<br />
<div class="question">
3、box-sizing 盒尺寸
<div id="six1">
<div id="six2"></div>
</div>
</div>
<br />
<hr>
<div class="question">
三、 浮动的实现原理与清除的技巧
<br />
<div id="seven1">左浮动</div>
<div id="seven2">左浮动</div>
<div id="seven3">右浮动</div>
<div id="seven4">清除浮动</div>
</div>
<br />
<hr>
<div class="question">
四、相对定位与绝对定位的区别与联系,并实例演示
<br />
相对定位：
<div id="eight1"></div>
<div id="eight2"></div>
<div id="eight3"></div>
<div id="eight4"></div>
<div id="eight5"></div>
</div>
<br />
<hr>
<div class="question">
绝对定位：
<div id="eight6">
<div id="eight7"></div>
<div id="eight8"></div>
<div id="eight9"></div>
<div id="eight10"></div>
<div id="eight11"></div>
</div>
</div>
<br />
<hr>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟php中文网登陆(遮罩+绝对定位)和固定定位广告的展示方式</title>
<link rel="stylesheet" href="0705-1.css">
<style>
body{
margin:0;
background-image:url(http://www.kmtest.top/phpstudy/0705/images/php.jpg);
background-repeat:no-repeat;
background-size:cover;
}
#shade{
width:100%;
height:100%;
background-color:black;
position:absolute;
left:0;
top:0;
opacity:0.7;
}
#login img{
width:380px;
height:460px;
}
#login{
background-color:white;
position:absolute;
left:50%;
top:50%;
margin-left:-190px;
margin-top:-230px;
}
.ads{
width:350px;
height:250px;
background-color:lightgreen;
position:fixed;
right:0;
bottom:0;
}
button{
width:20px;
height:20px;
float:right;
margin-top:10px;
margin-right:20px;
color:red;
border:none;
background:none;
font-size:2em;
}
</style>
</head>
<body>
<div id="shade"></div>
<div id="login">
<img src="http://www.kmtest.top/phpstudy/0705/images/login.jpg" alt="登录">
</div>
<div class="ads">
<button onclick="this.parentNode.style.display ='none'">X</button>
<h2>php中文网第六期线上班</h2>
<h1>招生进行中...</h1>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例