盒子模型：
实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style>
.zero{background: #7F5DD0;
width: 500px;
height: 500px;
margin: 0;
padding: 50px;
}
.one{background: #B34B4D;
width: 200px;height: 200px;
border: 3px solid black;
margin: 10px;
padding: 10px;
}
.two{background: #57CD7B;
width: 200px;height: 200px}
</style>
</head>
<body>
<div class="zero">
<div class="one">11</div>
<div class="two">11</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
十字架
实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>十字架</title>
<style type="text/css">
.big{background: #ccc;
height: 600px;
width: 600px;
position: relative;
margin: auto;
padding: auto}
.one{background: #4ABD45;
width: 200px;
height: 200px;
position: absolute;
left: 200px;
margin: auto
}
.two{background: #CF383B;
width: 200px;
height: 200px;
position: absolute;
top: 200px}
.three{background: #4487C5;
width: 200px;
height: 200px;
position: absolute;
top: 200px;left: 400px}
.four{background: #E35AAB;
width: 200px;
height: 200px;
position: absolute;
top: 200px;left: 200px}
.five{background: #150C32;
width: 200px;
height: 200px;
position: absolute;
top: 400px; left: 200px}
</style>
</head>
<body>
<div class="big">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四种元素对齐方式
实例
<!doctype html> <html> <head> <meta charset="utf-8"> <title>四种元素对齐方式</title> </head> <body> <b>1. 子元素是单行行内元素（a,span）</b><br> a. 水平居中：在父元素应用：text-align：center<br> b. 垂直居中：设置行内元素行高line-height=height <div style="height: 100px; width: 100px; background: red; text-align: center"> <a style="line-height: 100px">行元素</a> </div> <br> <br> <b>2.子元素的多行行内文本</b><br> a.水平居中：在父元素应用：text-align：center<br> b.垂直居中：在父元素应用display:table-cell和vertical-align: middle <div style="height: 100px; width: 100px; background: red; text-align: center; display: table-cell; vertical-align: middle" > <a>这是一个多行元素</a> </div> <br><br> <b>3.子元素是块元素</b><br> a.水平居中：子元素设置margin：auto<br> b.垂直居中：在父元素应用display:table-cell和vertical-align: middle <div style="width: 200px;height: 200px;background: #7F7ED5;display: table-cell; vertical-align: middle"> <div style="height: 100px;width: 100px;background: #DC3E27;margin: auto"></div> </div><br><br> <b>4.子元素是不定宽的块元素（变化的）</b><br> a.水平居中：子元素转化为行元素，父级加text-align：center <br> b.垂直居中:父元素应用dispaly:table-cell;vertical-align-center <br> <div style="width: 200px;height: 200px;background: #B87C7D; text-align: center;display: table-cell;vertical-align: middle"> <ul style="margin: 0;padding-left: 0"> <li style="display: inline">1</li> <li style="display: inline">2</li> <li style="display: inline">3</li> <li style="display: inline">4</li> <li style="display: inline">5</li> <li style="display: inline">6</li> </ul> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
个人总结：
盒子模型是很重要的一个知识点，从内到外依次是content,border,padding,margin.
绝对定位是相对于父元素；相对定位是相对于元素应处的位置
四种元素对齐方式：1.行内单行元素。2.行内多行元素。3.块级元素。4.块级不定宽元素
