实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素对齐方式</title>
</head>
<body>
<H3>元素对齐方式</H3>
1.子元素是行内元素 如:a.span<br>
a:水平居中:在父元素应用 :text-align:center;
b:垂直居中:在行内元素中设置行高与父元素等高:line-height:200px
<style>
.box1{
width:200px;
height:200px;
background-color:#ffff0a;
text-align:center;
}
.box1 a{
line-height:200px;
}
</style>
<div class="box1">
<a href="">PHP中文网</a>
</div>
2.元素为多行内联文本
a.水平居中:在父元素中应用:text-align:center<br>
b:垂直居中:在父元素:display:table-cell;
<style>
.box2{
width:200px;
height:200px;
background-color:yellowgreen;
text-align:center;/*水平居中*/
display:table-cell; /*将多行文本修改为列表模式*/
vertical-align: middle;/*表格样式中的垂直居中*/
}
</style>
<div class="box2">
<span>PHP中文网</span><br>
<span>www.php.com</span>
</div>
3.元素为块元素
a.水平居中:在父元素中应用:text-align:center<br>
b:垂直居中:在父元素:display:table-cell;
<style>
.box3{
width:200px;
height:200px;
background-color:yellowgreen;
text-align:center;
display:table-cell;
vertical-align: middle;/*表格样式中的垂直居中*/
}
.box3 .child{
width:100px;
height:100px;
background-color:red;
display:inline-block;
}
</style>
<div class="box3">
<div class="child"></div>
</div>
4.元素为多行元素
1.将行元素转化为行内块元素
2.行内块元素转化为块元素
a.水平居中:在父元素中应用:text-align:center<br>
b:垂直居中:在父元素:display:table-cell;
<style>
.box4{
width:200px;
height:200px;
background-color:yellowgreen;
text-align:center;
display:table-cell;
vertical-align: bottom;
}
.box4 ul{
display:inline-block;
padding:0;
}
.box4 li{
display:block;
}
</style>
<div class="box4">
<li>
<ul>1</ul>
<ul>2</ul>
<ul>3</ul>
<ul>4</ul>
<ul>5</ul>
</li>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
.box1{
width:200px;
height:200px;
background-color: lightcoral;
position:relative;/*设定相对定位*/
left:200px;
top:0
}
.box2{
width:200px;
height:200px;
background-color: lightgreen;
}
.box3{
width:200px;
height:200px;
background-color: yellow;
position:relative;/*设定相对定位*/
left:400px;
top:-200px;
}
.box4{
width:200px;
height:200px;
background-color: lightblue;
position:relative;/*设定相对定位*/
left:200px;
top:-200px;
}
.box5{
width:200px;
height:200px;
background-color: lightseagreen;
position:relative;/*设定相对定位*/
left:200px;
top:-600px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
</head>
<style>
body{
/*margin:0;*/
}
.box{
width:600px;
height:600px;
position: relative;
/*background-color:coral;*/
}
.box1{
width:200px;
height:200px;
background-color: lightcoral;
position:absolute;/*设定绝对定位 会脱离文档流*/
left:200px;
}
.box2{
width:200px;
height:200px;
background-color: lightgreen;
position:absolute;
top:200px;
}
.box3{
width:200px;
height:200px;
background-color: yellow;
position:absolute;
left:400px;
top:200px;
}
.box4{
width:200px;
height:200px;
background-color: lightblue;
position:absolute;
left:200px;
top:400px;
}
.box5{
width:200px;
height:200px;
background-color: lightseagreen;
position:absolute;
left:200px;
top:200px;
}
}
</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>运行实例 »
点击 "运行实例" 按钮查看在线实例
盒子模型:内容 conter 外边距 padding 边框 dorder 外边距 margin
编写顺序 TOP->right->botton->left
内容\边框可设置颜色及宽度
简写规则:像素.线条类型.线条颜色
外边距垂直方向会发生坍塌,以数值较大的为准