盒模型
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
.demo1{
background: #aaccff;
width: 200px;
height: 200px;
border-style:dashed;
border-color: red;
border-width: 20px 30px 10px ;
padding:10px;
margin: 5px 6px;
}
</style>
</head>
<body>
<div class="demo1"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
对齐方式
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素对齐方法</title>
<style type="text/css">
/*子元素是单行行内元素*/
/*1、水平居中：在父元素使用，text-align:center;*/
/*2、垂直居中：在子元素上设置行高与父元素等高，line-height:200px;*/
.demo1{
width: 200px;
height: 200px;
background: greenyellow;
text-align: center;
}
.demo1 span{
line-height: 200px;
}
/*子元素是多行行内元素*/
/*1、水平居中：在父元素使用，text-align:center;*/
/*2、垂直居中：在父元素使用，display:table-cell; vertical-align:middle;*/
.demo2{
width: 200px;
height: 200px;
background: greenyellow;
text-align: center;
display:table-cell; /*将此元素设置为表格*/
vertical-align: middle; /*将此元素放置在父元素的中部*/
}
/*子元素是块元素*/
/*1、水平居中：在子元素设置左右外边距自动适应，margin:auto;*/
/*2、垂直居中：在父元素使用，display:table-cell; vertical-align:middle;*/
.demo3{
width: 200px;
height: 200px;
background: greenyellow;
display:table-cell;
vertical-align: middle;
}
.demo33{
width: 50px;
height: 50px;
background: red;
margin:auto;
}
/*子元素是不定宽块元素*/
/*1、水平居中：将子元素转为行内元素，在父级使用，text-align:center;*/
/*2、垂直居中：在父元素使用，display:table-cell; vertical-align:middle;*/
.demo4{
width: 200px;
height: 200px;
background: greenyellow;
display:table-cell;
vertical-align: bottom;
text-align:center;
}
.demo4 li{
display:inline;
}
.demo4 ul{
margin:0;
padding: 0;
}
</style>
</head>
<body>
<div class="demo1">
<span>单行文本对齐</span>
</div>
<hr>
<div class="demo2">
<span>多行文本对齐</span>
<br>
<span>多行文本对齐</span>
</div>
<hr>
<div class="demo3">
<div class="demo33"></div>
</div>
<hr>
<div class="demo4">
<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>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
绝对定位
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
body{
margin: 0;
}
.demo1 {
width: 200px;
height:200px;
background:coral;
position: absolute;
top:0;
left:200px;
}
.demo2 {
width: 200px;
height:200px;
background:lightcoral;
position: absolute;
top:200px;
left: 0;
}
.demo3 {
width: 200px;
height:200px;
background:cornflowerblue;
position: absolute;
top:200px;
left: 200px;
}
.demo4 {
width: 200px;
height:200px;
background:lightseagreen;
position: absolute;
top:200px;
left: 400px;
}
.demo5 {
width: 200px;
height:200px;
background:lightgreen;
position: absolute;
top:400px;
left: 200px;
}
</style>
</head>
<body>
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
