实例
<!DOCTYPE html>
<html>
<head>
<title>盒子模型+元素对齐方式+定位</title>
<meta charset="utf-8">
<style type="text/css">
.box1{
width:100px; /*父元素设置为width:200px; height: 200px;子元素会把父元素撑开，可修改父元素的宽高来修改*/
height: 100px;
border:5px solid #111;
background: #ccc;
padding: 50px;
}
.box2{
width:100px;
height: 100px;
background: green;
}
#box{
width:300px;
height: 300px;
background: #ccc;
position: relative; /*相对定位，父级元素可设为相对定位，否则绝对定位就已body为参照物*/
}
#one{
width: 100px;
height: 100px;
background: lightblue;
position: absolute; /*绝对定位，相对于他的父级元素*/
left: 100px;
top: 0;
}
#two{
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 200px;
top: 100px;
}
#three{
width: 100px;
height: 100px;
background: lightgreen;
position: absolute;
left: 100px;
top: 200px;
}
#four{
width: 100px;
height: 100px;
background: coral;
position: absolute;
left: 0;
top: 100px;
}
#five{
width: 100px;
height: 100px;
background: brown;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<h2>盒子模型</h2>
<div class="box1">
<div class="box2"></div>
</div>
<hr>
<h2>元素对齐方式</h2>
<h4>1.子元素是行内元素</h4>
<p>水平居中：在父元素中设置text-align:center</p>
<p>垂直居中：在子元素中设置行高</p>
<div class="demo1">
<span>我会居中</span>
<!-- 如果文本过长，超出部分会不显示，可将行内元素转换为块级元素，按块级元素的居中来设置 -->
</div>
<style type="text/css">
.demo1{
width: 200px;
height: 200px;
background: #ccc;
text-align: center; /*水平居中：在父元素中设置text-align:center；*/
}
.demo1 span{
line-height: 200px; /*垂直居中：在子元素中设置行高*/
}
</style>
<h4>2.子元素是多行的内联元素</h4>
<p>水平居中：在父元素中设置text-align:center</p>
<p>垂直居中：在父元素中设置display: table-cell;vertical-align: middle;</p>
<div class="demo2">
<span>我会居中</span><br>
<span>我也会居中</span>
</div>
<style type="text/css">
.demo2{
width: 200px;
height: 200px;
background: #ccc;
text-align: center; /*水平居中*/
display: table-cell; /*设置为table-cell表格单元格显示*/
vertical-align: middle; /*垂直居中*/
}
</style>
<h4>3.子元素是块级元素</h4>
<p>水平居中：子元素设置左右外边距自动适应容器margin: auto;</p>
<p>垂直居中：在父元素中设置display: table-cell;vertical-align: middle;</p>
<div class="demo3">
<div class="child"></div>
</div>
<style type="text/css">
.demo3{
width: 200px;
height: 200px;
background: #ccc;
display: table-cell;
vertical-align: middle;
}
.demo3 .child{
width: 100px;
height: 100px;
background: lightgreen;
/*margin-left: auto;
margin-right: auto;*/
margin: auto;
}
</style>
<h4>4.子元素是不定宽的块级元素</h4>
<p>水平居中：将子元素转换为行内元素display:inline;,再将父元素文本居中text-align:center</p>
<p>垂直居中：在父元素中设置display: table-cell;vertical-align: middle;</p>
<div class="demo4">
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
</ul>
</div>
<style type="text/css">
.demo4{
width: 200px;
height: 200px;
background: #ccc;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.demo4 ul{
margin: 0; /*清除ul默认样式*/
padding-left: 0;
}
.demo4 ul li{
display: inline;/*将块级转换为行内*/
}
</style>
<hr>
<h2>定位</h2>
<div id="box">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
