一、知识点：盒子模型、定位技术：相对定位和绝对定位；
二、作业代码：
1、编程实现盒模型：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒模型</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
<style type="text/css">
#box1{
width: 10rem;
height: 10rem;
background:#0d0;
margin-left:2rem ;
margin-right: 2rem;
margin-top: 1rem;
margin-bottom: 1rem;
padding-top: 1rem ;
padding-right: 2rem;
padding-bottom: 3rem;
padding-left: 4rem;
}
#box2{
width: 10rem;
height: 10rem;
background: skyblue;
margin: 1rem 2rem; /*上下，左右*/
padding: 1rem 2rem 3rem 4rem; /*上右下左，顺时针方向*/
}
#box3{
width: 10rem;
height: 10rem;
background: #c00;
padding: 2rem; /*四面相同*/
margin: 2rem; /*四面相同*/
}
</style>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、编程实现四种对齐方式
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>元素的对齐方式</title>
</head>
<style>
#box1{
width:500px;
height: 60px;
text-align: center;
background: #0c0;
}
#box1 span{
line-height: 60px;
}
#box2{
width: 500px;
height: 200px;
text-align: center;
display: table-cell;
vertical-align: middle;
background: #e22;
}
#box3{
width: 500px;
height: 200px;
text-align: center;
background: #00e;
display:table-cell;
vertical-align: middle;
color: #fff;
}
#box4{
width: 500px;
height: 30px;
background: #d00;
text-align: center;
display: table-cell;
vertical-align: middle;
}
ul{
margin: 0;
padding: 0;
}
#box4 li{
list-style-type: none;
display: inline;
}
</style>
<body>
<h2>元素的对齐方式：水平居中，垂直居中</h1>
<h3>1、水元素是单行行内元素时</h2>
<div id="box1">
<span>子元素是行内元素</span>
</div>
<hr>
<h3>2、子元素是多行内联元素时</h3>
<div id="box2">
<span>第一行内联文本</span><br>
<span>第二行内联文本</span>
</div>
<hr>
<h3>3、子元素是块元素时</h3>
<div id="box3">
<p>
我是块元素
</p>
<h4>我也是块元素</h4>
</div>
<hr>
<h3>4、子元素是不定宽的块元素时</h3>
<div id="box4">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3、编程实现十字架，相对定位和绝对定位
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>相对定位和绝对定位</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
color: #fff;
text-align: center;
}
#box1{
background: #00c;
position: relative;
left:0;
top:200px;
display: table-cell;
vertical-align: middle;
}
#box2{
background: #0c0;
position: relative;
left:200px;
top:200px;
}
#box3{
background: #c00;
position: relative;
left:200px;
top:-400px;
}
#box4{
background: #ccc;
position: relative;
left:400px;
top:-400px;
}
#box5{
background: #00c;
position: absolute;
top:1000px;
left:0;
display: table-cell;
vertical-align: middle;
}
#box6{
background: #0c0;
position: absolute;
top:1200px;
left:200px;
}
#box7{
background: #c00;
position: absolute;
top:1000px;
left:400px;
}
#box8{
background: #ccc;
position: absolute;
top:800px;
left:200px;
}
</style>
<body>
<div id="box1"><h2>相对定位</h2></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"><h2 >绝对定位</h2></div>
<div id="box6"></div>
<div id="box7"></div>
<div id="box8"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三、总结：
1 、关于盒子模型：
页面上看到的所有元素，都是盒子，块级盒子，行内盒子/内联盒子，块级盒子当容器
文档流是元素的排列方式，总是水平排列；
内容content, 边框border, 内边距padding, 外边距margin
外边距在垂直方向上会发生塌陷，以数值大的为准，向大数值方向走
2、关于对齐方式：
水平对齐：在父元素中用：text-align:center; 子元素是块元不时 还可对子元素用margin:auto;
垂直对齐：子元素是单行行内元素时，父子元素同行高；子元素是多行内联元素时，父元素设display:table-cell;verticcal-algin:middle;子元素是不定宽时，行转为行内元素，再处理；
3、绝对定位与相对定位、固定定位：绝对定位相对于父元素；相对定位则相对于自已；固定定位相对于body
