今天学习了盒子模型和定位的使用方法，要注意的是页面上看到的所有元素，都是盒子，文档流是元素的排列方式，总是水平排列，外边距在垂直方向上会发生塌陷，以数值大的为准，向大数值方向走
作业代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒元素的基本要素</title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: red;
padding-top:10px;
padding-right:20px;
padding-bottom: 30px;
padding-left: 40px;
border:1px solid blue;
margin-bottom:20px;
}
.div2{
width: 200px;
height: 200px;
background-color: green;
margin-top:50px;
border-left-width: 10px;
border-left-style: dashed;
border-left-color: black;
}
</style>
</head>
<body>
<div class="div1">123</div>
<div class="div2">321</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
代码2：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>四种元素的对齐方案</title>
<style>
.div1{
width: 400px;
height: 400px;
background-color: red;
text-align: center;
/*line-height: 400px;*/
}
.div1 span{
line-height: 400px;
}
.div2{
width: 400px;
height: 400px;
background-color: blue;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.div3{
width: 400px;
height: 400px;
background-color: yellow;
display: table-cell;
vertical-align: middle;
}
.div3 .div3-1{
width: 200px;
height: 200px;
background-color: grey;
margin:0 auto;
}
.div4{
width: 400px;
height: 400px;
background-color: pink;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.div4 ul{
margin:0;
padding:0;
}
.div4 li{
display: inline;
}
</style>
</head>
<body>
<!-- //单行行内元素对齐 -->
<div class="div1">
<span>123</span>
</div>
<br>
<!-- //多行行内元素对齐 -->
<div class="div2">
<span>123</span><br>
<span>321</span>
</div>
<br>
<!-- //子元素是块元素对齐 -->
<div class="div3">
<div class="div3-1">123456</div>
</div>
<br>
<!-- 子元素为不定宽的块元素 -->
<div class="div4">
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
代码三：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>十字架</title>
<style>
body{
margin:0;
padding: 0;
}
.box{
width: 600px;
position: relative;
}
.div1{
width:200px;
height: 200px;
background-color: red;
position: absolute;
top:0;
left:200px;
}
.div2{
width:200px;
height: 200px;
background-color: yellow;
position: absolute;
top:200px;
left:0;
}
.div3{
width:200px;
height: 200px;
background-color: blue;
position: absolute;
top:200px;
left:200px;
}
.div4{
width:200px;
height: 200px;
background-color: green;
position: absolute;
top:200px;
left:400px;
}
.div5{
width:200px;
height: 200px;
background-color: grey;
position: absolute;
top:400px;
left:200px;
}
</style>
</head>
<body><div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
