盒子模型：
实例
<!DOCTYPE html>
<html>
<head>
<title>盒子模型</title>
<meta charset="utf-8">
<style type="text/css">
div{
background-color: pink;
width: 400px;
height:400px;
border:2px red solid;/*边框宽2px红色实线*/
margin-top: 30px ;/*上外边距是30px*/
}
div img {
padding: 50px;/*图片的内边距上下左右都是50px*/
width:300px;
height:300px;
}
.box2{
background-color: lightgreen
}
</style>
</head>
<body>
<div><img src="images/1.jpg"></div>
<div style="width: 400px;height: 66px;background-color: wheat;" >边距：四个参数：上右下左、三个参数：上（左右）下、两个参数：（上下）（左右）一个参数：四周都一样</div>
<div class="box2"><img style="padding: 50px 0;" src="images/1.jpg" ></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
元素对齐：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素对齐方式</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: lightgrey;
}
.box1{
text-align: center;/*水平居中*/
line-height: 200px;/*单行文本垂直居中*/
}
.box2{/*多行行内元素显示模式转为单元格模式*/
display: table-cell;
vertical-align: middle; /*垂直居中*/
text-align:center; /*水平居中*/
}
.box3{
display: table-cell;
vertical-align: middle;/*垂直居中*/
}
.child{/*子元素是块显示用外边距左右auto*/
width: 100px;
height: 100px;
color: red;
background: blue;
margin: auto;/*水平居中*/
}
</style>
</head>
<body>
<h3>元素对齐方式</h3>
1.子元素是行内元素：a、span<br>
a:水平居中：在父元素应用text-align:center
b:垂直居中子元素上设置行高与父元素等高：line-height
<div>2018年8月16日 23:16:33</div><hr>
2. 子元素是多行的内联文本 <br>
a:水平居中: 在父元素应用: text-align: center;<br>
b:垂直居中: 在父元素: display:table-cell;
<div>
<span>2018年8月16日</span><br>
<span>23:16:33</span>
</div><hr>
3.子元素是块元素 <br>
a: 水平居中: 子元素设置左右外边距自动适应容器margin: auto;
b:垂直居中: 在父元素: display:table-cell;
<div>
<div></div>
</div><hr>
4. 子元素是不定宽的块元素
a: 水平居中: 子元素转为行内元素,父级加: text-align:center
b: 垂直居中: 在父元素: display:table-cell;
<div>
<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>
<style type="text/css">
li{
display: inline;
}
ul{
margin: 0;
padding-left: 0;
}
.box4{
text-align: center;
display: table-cell;
vertical-align: bottom;
}
</style>
</body>
</html>
定位练习：
实例
<!DOCTYPE html>
<html>
<head>
<title>相对定位</title>
<style type="text/css">
div{
width: 200px;
height:200px;
position: relative;/*相对定位*/
}
.a{
background-color: red;
left: 200px;/*右移200px*/
}
.b{
background-color:yellow;
}
.c{
background-color:blue;
left: 200px;
}
.d{
background-color:green;
left: 400px;
top:-400px;/*上移400px*/
}
.e{
background-color:grey;
left: 200px;
top:-600px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
