实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
<hr>
<div class="box3">
<h3>父元素是块元素：根据子元素不同分为以下几种</h3>
<h4>1.子元素是行内元素:在父元素设置text-align: center水平居中；垂直居中设置子元素和父元素行号一样line-height</h4>
<div class="box4">
<span>行内元素</span>
</div>
<h4>2.子元素是多行内联元素:在父元素设置text-align: center水平居中；垂直居中设置子父元素display: table-cell;vertical-align: middle;</h4>
<div class="box5"><span>多行内联元素</span><br><span>多行内联元素</span></div>
<h4>3.子元素是块元素:子元素设置margin:auto 水平居中；垂直居中设置子父元素display: table-cell;vertical-align: middle;</h4>
<box class="box6">
<div class="box7">
<p>块元素</p>
</div>
</box>
<h4>4.子元素是不定宽块元素:<br>父元素div和子元素ul设置text-align:center水平居中<br>垂直居底设置子父元素divdisplay: table-cell;vertical-align: middle;<br>设置li行内显示dispaly:inline</h4>
<div class="box8">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<hr>
<div class="box9">
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="center"></div>
</div>
<style>
body{font-family: "微软雅黑"}
.box{width: 200px;height: 170px;border: solid 2px #880000;padding-top: 30px;}
.box1{width:140px;height: 140px;background: blueviolet;margin-left: 30px;}
.box3{}
h3,h4{font-weight: normal}
h3{color: #880000;}
.box4{width:200px;height: 200px;background: chocolate;text-align: center;line-height: 200px;}
.box4 span{color:#FFF;}
.box5{width:200px;height: 200px;text-align: center;display: table-cell;vertical-align: middle;background: #4288ce;}
.box5 span{color: #f8cbcb}
.box6{width:200px;height: 200px;background: coral;display: table-cell;vertical-align: middle}
.box7{width:100px;height:100px;background: lightblue;line-height: 100px;margin: auto;text-align: center;}
.box8{width:200px;height: 200px;background:#880000;text-align: center;display: table-cell;vertical-align:bottom}
.box8 ul{text-align: center;margin:0;padding: 0;}
.box8 ul li{list-style: none;display: inline;color: darkturquoise;}
.box9{width:330px;height: 330px;position: relative;margin:0;padding: 0;background: #f8cbcb;}
/*父元素相对定位*/
.box9 div{position: absolute;}
/*子元素绝对定位*/
.left,.right{width:150px;height: 30px;}
.top,.bottom{width:30px;height:150px;}
.center{width:30px;height:30px;}
.left{background: coral;top:150px;left:0;}
.right{background: cornflowerblue;top:150px;left:180px;}
.top{background: darkturquoise;top:0;left:150px;}
.bottom{background: blueviolet;top:180px;left:150px;}
.center{background: crimson;top:150px;left:150px;}
</style>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
