一，盒模型：基本要素：内容，外边距、内边距、边框；
实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
.box1{
width:200px;
height:200px;
background-color:blue;
border:10px solid #666;/*边框设置*/
padding-top: 50px;/*内边距-上*/
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
margin-top: 20px;/*外边距设置*/
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
/*内边距简写规则：
padding:10px 20px 30px;代表 上:10px 左右:20px 下：30px;
padding:10px 20px ;代表 上下:10px 左右:20px;
padding:10px;代表 上下左右都是10px；
外边距也是同样的规则写法
*/
}
.box2{
width:200px;
height:200px;
background-color:pink;
border:1px solid #841562;
padding: 50px;
margin-top: 50px;
}
.box{
width:600px;
height:600px;
background-color:skyblue;
}
body{
margin:0;
padding:0;
}
</style>
</head>
<body><div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二：四种元素对齐方案
实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>元素对齐方式</title>
<style>
.box1 {
width:200px;
height:200px;
background-color:#0388F1;
text-align:center;
}
.box1 a {
line-height:200px;
}
.box2 {
width:200px;
height:200px;
background-color: #f16f5e;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.box3{
width:200px;
height:200px;
background-color: yellow;
display:table-cell;
vertical-align:middle;
}
.box3 .child{
width:100px;
height:100px;
background-color: #ff50ef;
margin:auto;
}
.box4 {
width:200px;
height:200px;
background-color: #ff50ef;
text-align:center;
display:table-cell;
vertical-align:bottom;
}
.box4 li{
display:inline;
}
.box4 ul{
padding:0;
margin:0;
}
</style>
</head>
<body>
<h3>元素对齐方式</h3>
<!--1.子元素是行内元素如a span
1水平居中：在父元素应用，text-align：center；
2垂直居中：在行内子元素上设置行高等于父元素等高；
2.子元素是多行的内联文本
1水平居中：在父元素应用，text-align：center；
2垂直居中：在父元素：display：table-cell;
3子元素是块元素
1水平居中：子元素设置左右外边距自动适应容器margin：auto；
2.垂直居中：在父元素：display：table-cell;vertical-align:middle;
4.子元素是不定款的块元素
水平：子元素转为行内元素，父元素加：text-align:center;
-->
<div class="box1">
<a href="http://www.php.cn">php中文网</a>
</div>
<hr>
<div class="box2">
<span>php中文网</span><br>
<span>第三期培训</span>
</div>
<hr>
<div class="box3">
<div class="child"></div>
</div>
<hr>
<div class="box4">
<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="zh">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
body{
margin:0;
}
.box{
width:600px;
height:600px;
background-color: #daeaff;
/*定位父级必须设置定位属性*/
position:relative;
}
.box1{
width:200px;
height:200px;
background-color: #ff50ef;
/*绝对定位会脱离文档流*/
position:absolute;
left:200px;
}
.box2{
width:200px;
height:200px;
background-color: #5557ff;
position:absolute;
top:200px;
}
.box3{
width:200px;
height:200px;
background-color: #ffd55c;
position:absolute;
top:200px;
left:400px;
}
.box4{
width:200px;
height:200px;
background-color: #85ff79;
position:absolute;
top:400px;
left:200px;
}
.box5{
width:200px;
height:200px;
background-color: #ff374d;
position:absolute;
top:200px;
left:200px;
}
div{
text-align:center;
}
span{
font-size:80px;
line-height:200px;
}
</style>
</head>
<body>
<h1 >十字架</h1>
<div class="box">
<div class="box1"><span>金</span></div>
<div class="box2"><span>木</span></div>
<div class="box3"><span>水</span></div>
<div class="box4"><span>火</span></div>
<div class="box5"><span>土</span></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
