盒子的浮动与定位（下）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>盒子的浮动与定位</title>
</head>
<style type="text/css">
body{
   margin:20px;
   font::Arial 12px;
}
#father{
    background-color:#a0c8ff;
border:1px dashed #000000;
padding:15px;
position:relative;
}
#block0{
    background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
}
#block1{
    background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:relative;
left:30px;
top:30px;
/*
right:30px;
bottom:30px;
*/
}
#block2{
    background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:absolute;
right:30px;
top:30px;
}
#block3{
    background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:fixed;
right:500px;
top:30px;
}
</style>
<body>
static标准流
<div id="father">
    <div id="block0">Box-1</div>
</div>
<div id="father">
    <div id="block1">relative 相对定位</div>
</div>
<div id="father">
    <div id="block0">Box-1</div>
<div id="block2">absolute 绝对定位</div>
    <div id="block0">Box-1</div>
</div>
<div id="block3"> fixed 固定定位
</div>
<h1>块级元素和行内元素</h1>
<div style="display:inline">把块级元素设置成行内元素（inline）</div>
<div style="display:inline">把块级元素设置成行内元素（inline）</div>
<div style="display:inline">把块级元素设置成行内元素（inline）</div>
<span style="display:block">把行内元素设置成块级元素（block）</span>
<span style="display:block">把行内元素设置成块级元素（block）</span>
<span style="display:block">把行内元素设置成块级元素（block）</span>
<a href="#" onclick="document.getElementById('dis').style.display == 'none' ? document.getElementById('dis').style.display = '' :document.getElementById('dis').style.display = 'none'">点击</a>
<div id="dis" style="display:none">把行内元素设置成块级元素（block）</div>
</body>
</html>

盒子的浮动与定位（下）

相关推荐