今晚知识点：
元素的内边距设置、外边距设置
元素的对齐方法
元素的定位方法
一、元素内边距设置
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:300px;
height:300px;
background:lightblue;
padding:10px 20px; /*设置内边距为上下10个像素，左右20个像素*/
/*padding-top:10px;padding-bottom:10px;padding-left:20px;padding-right:20px; 这是分别设置上下左右内边距的写法*/
}
</style>
</head>
<body>
<div class="box">
<img src="http://e.hiphotos.baidu.com/image/pic/item/b151f8198618367a2e8a46ee23738bd4b31ce586.jpg" width="100px;">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、设置元素外边距
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:300px;
height:300px;
background:lightblue;
padding:10px 20px; /*设置内边距为上下10个像素，左右20个像素*/
/*padding-top:10px;padding-bottom:10px;padding-left:20px;padding-right:20px; 这是分别设置上下左右内边距的写法*/
margin:10px; /*设置上下左右外边距为10个像素，这是简写方法*/
}
.box2{
width:300px;
height:300px;
background:lightgreen;
padding:10px;
/*分别设置上下左右外边距为10px*/
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<div class="box">
<img src="http://e.hiphotos.baidu.com/image/pic/item/b151f8198618367a2e8a46ee23738bd4b31ce586.jpg" width="100px;">
</div>
<div class="box2">
<img src="http://e.hiphotos.baidu.com/image/pic/item/b151f8198618367a2e8a46ee23738bd4b31ce586.jpg" width="100px;">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、元素四种对齐方式
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对齐方式</title>
</head>
<style>
/*
1、子元素为单行行内元素
水平居中：给父元素设置：text-align:center;
垂直居中：给子元素设置:line-height:父元素高度
*/
.box{
width:300px;
height:100px;
background:lightblue;
text-align:center;
}
.box p{
line-height:100px;
}
/*
2、子元素为多行文本行内元素
水平居中：给父元素设置：text-align:center;
垂直居中：给父元素设置：display:table-cell;vertical-align:middle;
*/
.box2{
width:300px;
height:100px;
background:lightgreen;
text-align:center;
display:table-cell;
vertical-align:middle;
}
/*
3、子元素为块级元素
水平居中：子元素设置:margin:0 auto;
垂直居中：给父元素设置：display:table-cell;vertical-align:middle;
*/
.box3{
width:300px;
height:300px;
background:#ccc;
display:table-cell;
vertical-align:middle;
}
.box3 .sub{
width:100px;
height:100px;
background:#f00;
margin:0 auto;
line-height:100px;
text-align:center;
}
/*
4、子元素为多个块级元素
水平居中：子元素设置:margin:0 auto;
垂直居中：给父元素设置：display:table-cell;vertical-align:middle;
*/
.box4{
width:300px;
height:300px;
background:lightgreen;
display:table-cell;
vertical-align:middle;
}
.box4 .sub2{
width:100px;
height:100px;
background:#f00;
margin:0 auto;
text-align:center;
line-height:100px;
}
</style>
<body>
<div class="box">
<p>我是单行子元素</p>
</div>
<br>
<div class="box2">
<p>我是多行文本</p>
<p>我是多行文本</p>
</div>
<br>
<div class="box3">
<div class="sub">块级元素</div>
</div>
<br>
<div class="box4">
<div class="sub2">块级元素</div>
<div class="sub2">块级元素</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三、使用相对定位实现十字架布局
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>十字架</title>
<style>
.box{
width:200px;
height:200px;
position:relative;
}
.box1{
background:red;
left:200px;
}
.box2{
background:#0f0;
}
.box3{
background:#00f;
top:-200px;
left:200px;
}
.box4{
background:#ccc;
top:-400px;
left:400px;
}
.box5{
background:yellow;
top:-400px;
left:200px;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
