盒子模型：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<title>盒子模型</title>
<body>
内边距：padding 上右下左 padding-top padding-right padding-bottom padding-left (顺时针)
外边距：margin
内边距和外边距都是透明的
页面上看到所有的元素都是盒子
块级盒子，行内盒子/内联盒子 块级盒子是容器
文档流：元素排列方式，总是水平排列
<style>
.box1{
width:200px;
height:200px;
background-color:skyblue;
/*padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;*/
padding:10px 20px; /*第一个参数上下 第二个参数左右*/
/*border-top:5px solid red;
border-right:7px solid green;
border-bottom:10px dashed blue;
border-left:15px solid #000;*/
border:5px solid red;
margin-top:20px;
margin-right:50px;
margin-bottom:80px;
margin-left:100px;
}
.box2{
width:300px;
height:300px;
background-color:lightgreen;
margin-bottom:50px;
}
.box3{
width:300px;
height:300px;
background-color:lightgoldenrodyellow;
margin-top:30px;
}
/*外边距在垂直方向上会产生塌陷，以数值大的为准，向数值大的方向走*/
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
居中对齐
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<title>元素的对齐方式</title>
<body>
<style>
.box1{
width:200px;
height:200px;
background-color:skyblue;
text-align:center;
}
.box1 a{
line-height:200px;
}
.box2{
width:200px;
height:200px;
background-color:green;
text-align:center;
display:table-cell;/*变成单元格*/
vertical-align:middle; /*垂直居中*/
}
.box3{
width:200px;
height:200px;
background-color:lightgreen;
display:table-cell;/*变成单元格*/
vertical-align:middle; /*垂直居中*/
}
.box4{
width:100px;
height:100px;
background-color:red;
margin:0 auto; /*水平居中*/
}
.box5{
width:200px;
height:200px;
background-color:skyblue;
text-align:center;
display:table-cell;/*变成单元格*/
/* vertical-align:middle; 垂直居中*/
vertical-align:bottom; /*位于底部*/
}
.box5 ul{
margin:0;
padding:0;
}
.box5 ul li{
display:inline;
}
</style>
<h3>元素对齐方式</h3>
1.子元素是行内元素 如a,span <br />
a:水平居中 在父元素使用text-align:center<br />
b:垂直居中 在子元素设置行高与父元素等高line-height
<div class="box1"><a href="">php中文网</a></div>
<hr />
2.子元素是多行的内联文本<br />
a:水平居中 在父元素使用text-align:center<br />
b:垂直居中 在父元素中修改display:table-cell <br />
<div class="box2">
<span>PHP中文网</span>
<span>http://www.php.cn</span>
</div>
<hr />
3.子元素是块元素 <br />
a:水平居中 设置子元素外边距自动适应 margin:0 auto <br />
b:垂直居中
<div class="box3">
<div class="box4"></div>
</div>
<hr />
4.子元素不定宽的块元素
a:水平居中：子元素转为行内元素 text-align:center
<div class="box5">
<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">
</head>
<title>相对定位于绝对定位</title>
<body>
<style>
body{
margin:0;
}
.box1{
width:200px;
height:200px;
background-color:skyblue;
position:relative;
left:200px;
}
.box2{
width:200px;
height:200px;
background-color:lightcoral;
/*相对定位：相对自身原始的位置改变*/
/* position:relative;
top:20px;
left:50px;*/
}
.box3{
width:200px;
height:200px;
background-color:lightpink;
position:relative;
left:200px;
}
.box4{
width:200px;
height:200px;
background-color:greenyellow;
position:relative;
left:400px;
top:-400px;
}
.box5{
height:200px;
width:200px;
background-color:skyblue;
/*绝对定位元素会脱离文档流*/
position: absolute;
top:0;
left:200px;
}
.box6{
height:200px;
width:200px;
background-color:lightcoral;
position: absolute;
top:200px;
left:0;
}
.box7{
height:200px;
width:200px;
background-color:lightpink;
position: absolute;
top:400px;
left:200px;
}
.box8{
height:200px;
width:200px;
background-color:greenyellow;
position: absolute;
top:200px;
left:400px;
}
.box{
width:600px;
height:600px;
/*background-color:#ccc;*/
/*定位父级必须设置定位属性*/
position:relative;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box">
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
