1.盒子模型实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">
body{
padding:0;
}
.box{
width:300px;
height:300px;
background-color:lightsteelblue;
border:10px dotted #fff;
color:#fff;
text-align:center;
/*display:table-cell;*/
/*vertical-align: middle;*/
line-height:300px;
padding:50px;
margin:50px;
}
</style>
</head>
<body>
<div class="box">
盒子模型
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.元素对齐实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素对齐</title>
<style>
.box1,.box2,box3{margin-bottom:10px;}
.box1{width:200px;height:200px;background-color:lightgreen;text-align:center;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:lightgray;display:table-cell;vertical-align:middle;}
.box3 .b3{background-color:lightpink;text-align:center;margin:auto;width:150px;height:150px;}
.box4{width:200px;height:200px;background-color:crimson;text-align:center; display:table-cell;vertical-align:bottom;padding-bottom: 50px;}
.box4 ul{
padding: 0;
margin: 0;}
.box4 ul li{display:inline; background-color:#fff; padding:8px;margin-bottom:8px;}
</style>
</head>
<body>
<!--1.行内对齐-子元素是单行行内元素如a、span、br-->
<!--水平居中text-align:center;垂直居中line-height行内子元素设置等高父元素值-->
<div class="box1">
<p>php中文网</p>
</div>
<!--2. 子元素是多行的内联文本 <br>-->
<!--a:水平居中: 在父元素应用: text-align: center;-->
<!--b:垂直居中: 在父元素: display:table-cell;-->
<div class="box2">
<p>php中文网php中文网<br>php中文网php中文网</p>
</div>
<!--3.子元素是块元素-->
<div class="box3">
<div class="b3"></div>
</div>
<div class="box4">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.绝对定位与相对定位制作+实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位与绝对定位</title>
</head>
<style>
.box1{width:100px;height:100px;background-color:#0388f1;position:relative;left:100px;top:0;}
.box2{width:100px;height:100px;background-color:#ff00ff;position:relative;left:0;top:0;}
.box3{width:100px;height:100px;background-color:#03ffff;position:relative;left:100px;top:0;}
.box4{width:100px;height:100px;background-color:#666666;position:relative;left:100px;top:-200px;}
.box5{width:100px;height:100px;background-color:#FFE80E;position:relative;left:200px;top:-300px;}
.boxs{width:300px;height:300px;position: relative; margin-left:400px;top:-500px;}/*background-color:#ccc;border-radius:50%*/
.boxs1{width:100px;height:100px;background-color:#0388f1;position:absolute;top:0;left:100px;}
.boxs2{width:100px;height:100px;background-color:#ff00ff;position:absolute;top:100px;left:0;}
.boxs3{width:100px;height:100px;background-color:#03ffff;position:absolute;left:100px;top:200px;}
.boxs4{width:100px;height:100px;background-color:#666666;position:absolute;left:100px;top:100px;}
.boxs5{width:100px;height:100px;background-color:#FFE80E;position:absolute;left:200px;top:100px;}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="boxs">
<div class="boxs1"></div>
<div class="boxs2"></div>
<div class="boxs3"></div>
<div class="boxs4"></div>
<div class="boxs5"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
学习总结：
今日主要学习盒子模型，元素在盒子中的对齐方式，以及相当定位和绝对定位！
