内外边距：
实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="Keywords" content="关键字">
<meta name="Description" content="描述">
<title>内外边距</title>
<style>
*{margin:0;padding:0;}
.box{
width:400px;
height:400px;
background:#003399;
/* margin-top:20px; 顺时针：上 右 下 左
margin-left:30px;
margin-right:40px;
margin-bottom:50px; */
margin:20px 40px 50px 30px;/* margin 简写 */
border-top:10px solid #66cc00;
border-left:20px solid #6633ff;
border-bottom:30px solid #99cc66;
border-right:40px solid #ff0000;
/* padding-top:20px; 顺时针：上 右 下 左
padding-left:30px;
padding-bottom:40px;
padding-right:50px; */
padding:20px 50px 40px 30px; /* paddign 简写 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
常用的四个方式的元素对齐方式：
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="Keywords" content="关键字">
<meta name="Description" content="描述">
<title>元素对齐方式</title>
</head>
<body>
<!-- 子元素对齐方式 -->
<style>
/* 子元素对齐方式：在父级元素 填写：text-align:center; line-height:200px; 实现对齐 */
.box{
width:200px;
height:200px;
margin:auto;
background:#669966;
font-size:20px;
text-align:center;/* 水平居中 */
line-height:200px;/* 垂直居中 */
}
.box a{
color:#fff;
}
</style>
<div class="box">
<a href="#">php中文网</a>
</div>
<!-- 子元素是多行的内联文本 -->
<style>
/* 子元素是多行的内联文本时: 在父元素填写: text-align: center;display:table-cell; vertical-align:来对齐 */
.box1{
width:200px;
height:200px;
background:#669966;
font-size:20px;
color:#fff;
text-align:center;/* 水平居中 */
display:table-cell; /* 设置此属性，margin失效 */
vertical-align:middle;/* 垂直居中 */
}
.box1 p{
margin:0;
}
</style>
<div class="box1">
<p>php中文网</p>
<p>免费学习平台</p>
</div>
<!-- 子元素是块元素 -->
<style>
/* 子元素是块元素：在父级元素填写 display:table-cell;
vertical-align:middle;
子元素填写：margin:auto; 来对齐
*/
.box3{
width:200px;
height:200px;
background:#ff3333;
display:table-cell;
vertical-align:middle;
}
.box3 p{
width:50px;
height:50px;
background:#eee;
margin:auto;
}
</style>
<div class="box3">
<p>块元素</p>
</div>
<!-- 子元素是不定宽的块元素 -->
<style>
/* 在父级元素填写：display:table-cell;vertical-align:center;
子元素转为行内元素：display:inline; */
.box4{
width:500px;
height:150px;
background:#663399;
margin-top:20px;
padding-left:0;
display:table-cell;
vertical-align:bottom; /* 顶部对齐 */
font-size:20px;
color:#fff;
}
.box4 li{
display:inline;
}
</style>
<ul class="box4">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
用5个不同色块，使用定位属性来写十字架：
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>十字架</title>
<style>
*{margin:0;padding:0;}
.box{
width:800px;
height:600px;
border:1px solid red;
margin:auto;
position:relative;
background-color:#eee;
}
.box1{
width:70px;
height:160px;
background:#006600;
margin:auto;
}
.box2{
width:70px;
height:70px;
background:#990099;
margin:auto;
}
.box3{
width:180px;
height:70px;
background:#66ffcc;
position:absolute;
left:185px;
top:160px;
}
.box4{
width:180px;
height:70px;
background:#ff0033;
position:absolute;
top:160px;
right:185px;
}
.box5{
width:70px;
height:160px;
background:#0000cc;
margin:auto;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
