实例1盒子模型 外边距、内边距、边框、内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: lightgreen;
/* margin-bottom: 30px; */
padding: 50px;
margin: 50px;
border: 5px solid red;
}
.box2 {
width: 200px;
height: 200px;
background-color: lightcyan;
margin-top: 50px;
}
</style>
</style>
</head>
<body>
<div class="box1">
<h3>内容</h3>
</div>
<div class="box2"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例2四种元素对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素四种对齐方式</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color:yellow;
text-align:center; /*水平居中*/
}
.box1 a{
line-height:200px;
}
.box2{
width: 200px;
height: 200px;
background-color:lightgreen;
text-align:center; /*水平居中*/
display:table-cell; /*将块级元素转换为单元格*/
vertical-align: middle; /*垂直居中*/
}
.box3{
width: 200px;
height: 200px;
background-color:blue;
display: table-cell;
vertical-align:middle;
}
.box3 .aa{
width: 50px;
height: 50px;
background-color:pink;
margin: auto; /*水平居中*/
}
.box4{
width: 200px;
height: 200px;
background-color:cyan;
text-align: center; /*水平j居中*/
display: table-cell;
vertical-align:middle;
}
ul{
margin: 0;
padding: 0;
}
.box4 li{
display: inline; /*将块级元素转换为行内元素*/
}
</style>
</head>
<body>
<!-- 1、子元素是行内元素：如a,span
a:水平居中：在父级元素应用：text-align:center;
b:垂直居中：行内子元素上设置行高与父级元素等高即可：line-height:父级高度
-->
<div class="box1">
<a href="">php中文网</a>
</div>
<!-- 2、子元素是多行的内联文本（行内文本）
a:水平居中：在父级元素应用：text-align:center;
b:垂直居中：在父元素，先将父级块级转换为表格单元格：display:table-cell
在设置垂直居中：vertical-align:middle
-->
<div class="box2">
<span>php中文网</span><br>
<span>www.php.cn</span>
</div>
3、子元素是块元素:
a:水平居中：在子元素内应用：margin:auto
b:垂直居中：在父元素，先将父级块级转换为表格单元格：display:table-cell
在设置垂直居中：vertical-align:middle
<div class="box3">
<div class="aa"></div>
</div>
4、子元素是不定宽的块元素
a:水平居中：子元素转为行内元素，在父级元素应用：text-align:center;
b:垂直居中：在父元素，先将父级块级转换为表格单元格：display:table-cell
在设置垂直居中：vertical-align:middle
<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>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例3 相对定位-十字架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
.box{width:200px;
height:200px;
background-color:yellow;
position:relative;
left: 200px;
}
.box1{width:200px;
height:200px;
background-color:cyan;
position:relative;
}
.box2{width:200px;
height:200px;
background-color:pink;
position:relative;
left:200px;
top:-200px;
}
.box3{width:200px;
height:200px;
background-color:green;
position:relative;
left: 400px;
top:-400px;
}
.box4{width:200px;
height:200px;
background-color:red;
position:relative;
left:200px;
top:-400px;
}
</style>
</head>
<body>
相对定位：是相对于元素本身的位置发生变化的
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
1、盒子模型：
内容
内边距：padding：上右下左，可撑开元素，将父级变大
边框：border：属性值 （可见）
外边距：margin：上右下左
2、元素四种对齐方式
1.子元素是行内元素：如a,span
a:水平居中：在父级元素应用：text-align:center;
b:垂直居中：行内子元素上设置行高与父级元素等高即可：line-height:父级高度
2.子元素是多行的内联文本（行内文本）
a:水平居中：在父级元素应用：text-align:center;
b:垂直居中：在父元素，先将父级块级转换为表格单元格：display:table-cell
在设置垂直居中：vertical-align:middle
3.子元素是块元素:
a:水平居中：在子元素内应用：margin:auto
b:垂直居中：在父元素，先将父级块级转换为表格单元格：display:table-cell
在设置垂直居中：vertical-align:middle
4.子元素是不定宽的块元素
a:水平居中：子元素转为行内元素，在父级元素应用：text-align:center;
b:垂直居中：在父元素，先将父级块级转换为表格单元格：display:table-cell
在设置垂直居中：vertical-align:middle
3、相对定位：是相对于元素本身的位置发生变化的
4、绝对定位：
1.元素会脱离文档流（是页面上元素排列的方式，自左至右，自上而下自动排列，直至排满）
2.该元素绝对定位后，它后面的元素会自动顶上占据绝对定位元素的位置
3.是相对于父级元素定位的
4.必须使用定位父级，在父级中使用相对定位属性
