编程实现盒模型的基本要素: 内容，内外边距与边框，并背诵padding与margin的简写规则；
实例
<!DOCTYPE html> <html> <head> <title>实现盒模型的基本要素</title> <style type="text/css"> div{ width: 200px; height: 200px; background-color: pink; border-style: solid; padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; } </style> </head> <body> <div></div> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
说明：盒子模型主要记住padding，margin，border这三个属性，对应的是内边距，外边距，边框。
2. 编程实现最常用的四种元素对齐方案；
实例
<!DOCTYPE html>
<html>
<head>
<title>编程实现最常用的四种元素对齐方案</title>
</head>
<body>
1:子元素是单行的行内元素时；<br>
a:水平居中：是在父元素中设置属性text-align: center;<br>
b:垂直居中：对子元素设置行高属性line-height和父级元素同高；
<style type="text/css">
.box1{
background-color: #6666;
width: 200px;
height: 200px;
text-align: center;
}
.box1 a{
line-height: 200px;
}
</style>
<div class="box1">
<a href="http://www.baidu.com">百度</a>
</div>
<hr>
2:子元素是多行的行内元素时；<br>
a:水平居中：是在父元素中设置属性text-align: center;<br>
b:垂直居中：对父元素转化为表格的单元格display: table-cell;vertical-align: middle;
<style type="text/css">
.box2{
background-color: pink;
width: 200px;
height: 200px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
<div class="box2">
<span>www.baidu.com</span><br>
<span>百度</span>
</div>
<hr>
3:子元素是块级元素时；<br>
a:水平居中：在子元素里设置margin: auto;<br>
b:垂直居中：对父元素转化为表格的单元格display: table-cell;vertical-align: middle;
<style type="text/css">
.box3{
background-color: red;
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
}
.box3 div{
background-color: black;
width: 50px;
height: 50px;
margin: auto;
}
</style>
<div class="box3">
<div></div>
</div>
<hr>
4:子元素是不定宽的块级元素时；<br>
a:水平居中：在子元素里设置margin: auto;<br>
b:垂直居中：对父元素转化为表格的单元格display: table-cell;vertical-align: middle;
<style type="text/css">
.box4{
background-color: green;
width: 200px;
height: 200px;
display: table-cell;
vertical-align: bottom;
}
.box4 li{
display: inline;
}
.box4 ul{
margin: 0px;
padding: 0px;
text-align: center;
}
</style>
<div class="box4">
<ul>
<li><a href="">1</a> </li> <!-- li是块级元素 -->
<li><a href="">2</a> </li> <!-- li是块级元素 -->
<li><a href="">3</a> </li> <!-- li是块级元素 -->
<li><a href="">4</a> </li> <!-- li是块级元素 -->
<li><a href="">5</a> </li> <!-- li是块级元素 -->
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
说明：主要是这四种，子元素分为：单行行内元素，多行行内元素，块元素，不定宽块元素。
3. 编程实现用五个色块制作一个十字架(相对定位和绝对定位任选一种实现即可)
a:相对定位实现：
实例
<!DOCTYPE html>
<html>
<head>
<title>实现用五个色块制作一个十字架</title>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<style type="text/css">
/*利用相对定位，相对于自身的位置*/
.box1{
width: 200px;
height: 200px;
background-color: red;
position: relative;/*定义相对定位*/
margin-left: 200px;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
}
.box3{
width: 200px;
height: 200px;
background-color: pink;
position: relative;
margin-left: 200px;
margin-top: -200px;
}
.box4{
width: 200px;
height: 200px;
background-color: blue;
position: relative;
margin-left: 200px;
}
.box5{
width: 200px;
height: 200px;
background-color: black;
position: relative;
margin-left: 400px;
margin-top: -400px;
}
</style>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
说明：定义position: relative;相对定位是相对于自身位置而言！！！
发现一个问题把position: relative;属性注释掉也能实现？？？？
b:绝对定位实现：
实例
<!DOCTYPE html>
<html>
<head>
<title>实现用五个色块制作一个十字架</title>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<!-- /*a:利用相对定位，相对于自身的位置*/ -->
<!-- <style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
/*position: relative;*//*定义相对定位*/
margin-left: 200px;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
}
.box3{
width: 200px;
height: 200px;
background-color: pink;
/*position: relative;*/
margin-left: 200px;
margin-top: -200px;
}
.box4{
width: 200px;
height: 200px;
background-color: blue;
/*position: relative;*/
margin-left: 200px;
}
.box5{
width: 200px;
height: 200px;
background-color: black;
/*position: relative;*/
margin-left: 400px;
margin-top: -400px;
}
</style> -->
<!-- 利用绝对定位实现，绝对定位是相对于浏览器的左上角的那个位置 -->
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
margin-left: 200px;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
margin-top: 200px;
}
.box3{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
margin-top: 200px;
margin-left: 200px;
}
.box4{
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
margin-top: 200px;
margin-left: 400px;
}
.box5{
width: 200px;
height: 200px;
background-color: black;
position: absolute;
margin-top: 400px;
margin-left: 200px;
</style>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
说明：position: absolute;利用绝对定位实现，绝对定位是相对于浏览器的左上角的那个位置
总结：
实现最常用的四种元素对齐方案
1:子元素是单行的行内元素时；<br>
a:水平居中：是在父元素中设置属性text-align: center;<br>
b:垂直居中：对子元素设置行高属性line-height和父级元素同高；
2:子元素是多行的行内元素时；<br>
a:水平居中：是在父元素中设置属性text-align: center;<br>
b:垂直居中：对父元素转化为表格的单元格display: table-cell;vertical-align: middle;
3:子元素是块级元素时；<br>
a:水平居中：在子元素里设置margin: auto;<br>
b:垂直居中：对父元素转化为表格的单元格display: table-cell;vertical-align: middle;
4:子元素是不定宽的块级元素时；<br>
a:水平居中：在子元素里设置text-align: center;<br>
b:垂直居中：对父元素转化为表格的单元格display: table-cell;vertical-align: middle;
定位：相对定位；绝对定位
a:利用相对定位，相对于自身的位置；position: relative;
b:利用绝对定位实现，绝对定位是相对于浏览器的左上角的那个位置；position: absolute;
