利用css定位属性中的绝对定位positon:absolute对同一元素指定相对的偏移量属性可以暗示所需的尺寸大小
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style type="text/css">
body{
font:12px 宋体;
background:lightyellow;
}
div.offset-four{
background:yellow;
border:1px solid rgb("128,128,128");
position:absolute;
top:20px;
right:20px;
bottom:20px;
left:20px;
}
p{
margin:0;
padding:5px;
border:1px solid black;
}
p.offset-x{
position:absolute;
bottom:5px;
left:5px;
right:123px;
background:gold;
}
p.offset-y{
position:absolute;
top:5px;
right:5px;
bottom:5px;
width: 100px;
background:khaki;
}
p.offset-copy{
border:none;
margin-right:123px;
}
</style>
</head>
<body>
<div class="offset-four">
<p class="offset-x">检方公诉书显示，自2002年以来，袁诚家、杜德福等人采取“以商养黑”“以黑护商”等非法手段将触角伸向辽宁本溪、鞍山和云南省香格里拉县的矿山开采、选矿加工、房地产开发、房屋建筑等经济领域，疯狂敛财、扩张资本，至案发前，总资产累计达20亿元。</p>
<p class="offset-y">检方公诉书显示，自2002年以来，袁诚家、杜德福等人采取“以商养黑”“以黑护商”等非法手段将触角伸向辽宁本溪、鞍山和云南省香格里拉县的矿山开采、选矿加工、房地产开发、房屋建筑等经济领域，疯狂敛财、扩张资本，至案发前，总资产累计达20亿元。</p>
<p class="offset-copy">检方公诉书显示，自2002年以来，袁诚家、杜德福等人采取“以商养黑”“以黑护商”等非法手段将触角伸向辽宁本溪、鞍山和云南省香格里拉县的矿山开采、选矿加工、房地产开发、房屋建筑等经济领域，疯狂敛财、扩张资本，至案发前，总资产累计达20亿元。</p>
</div>
</body>
</html>分析：该html中应用css定位样式把文本通过绝对定位的方式设置了相关的尺寸大小，同时对此进行拓展，我们可以由此想到利用此种方式制作固定的页眉页脚和边栏，如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作固定的页眉页脚和边栏</title>
<style type="text/css">
body{
background:pink;
font:20px 宋体;
margin:0;
padding:0;
}
h1,div#footer{
position:absolute;
right:0;
left:0;
background:white;
margin:0;
padding:5px;
height: 20px;
}
div#footer{
bottom:0;
font-size:20px;
text-align:center;
border-top:1px solid rgb(200,200,200);
}
h1{
top:0;
font-weight:normal;
font-size:18px;
border-bottom:1px solid rgb(200,200,200);
}
div#left,div#right{
position:absolute;
top:31px;
bottom:31px;
width: 200px;
background:white;
padding:5px;
}
div#left{
left:0;
border-right:1px solid rgb(200,200,200);
}
div#right{
right:0;
border-left:1px solid rgb(200,200,200);
}
div#container{
position:absolute;
top:31px;
right:21px;
bottom:31px;
left:211px;
overflow:auto;
padding:0 10px;
line-height: 2em;
}
div#footer p{
margin:0;
}
</style>
</head>
<body>
<h1>固定页眉</h1>
<div id="left">左侧边栏</div>
<div id="right">右侧边栏</div>
<div id="container">
<p>对于舆论对袁诚家“黑老大”身份的关注，王殿学显得很淡然，“这都是依法提出的要求，<br>申请国家赔偿和当事人是不是‘黑老大’其实没有多大关系，而且这几年来中央在产权保护<br>领域也不断出台了新政策,只要是应该偿还的，就应该依法偿还。”</p>
<p>王殿学律师向《中国经济周刊》记者介绍，按法院判决，当年被办案机关查封扣押的财产中<br>应该返还的主要包括被认定与黑社会犯罪无关的17家企业及其收益、袁诚家及家人账户和非<br>涉黑企业账户上的存款、包括银行入股金在内的对外投资款、袁诚家2003年黑社会性质组织<br>成立前的资产2000万元以及包括300箱茅台酒在内的物品</p>
</div>
<div id="footer">
<p>固定页脚</p>
</div>
</body>
</html>
利用此种方法，我们将其拓展化，可以将其在此基础上设置多栏情况，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background:lightyellow;
font:20px 宋体;
margin:0;
padding:0 20px;
}
div#heading,div#container,div#footer{
border:1px solid black;/*加上边框防止设置外边距的时候发生父元素塌陷情况*/
max-width:1000px;
min-width:600px;
background:rgb(244,244,244);
}
div#container{
position:relative;
margin:0 auto;
}
div#heading{
margin:10px auto -1px auto;
}
div#heading h1{
margin:5px;
}
div#left{
position:absolute;
top:0;
bottom:0;
left:0;
width:200px;
background:rgb(234,234,234);
padding:5px;
border-right:1px solid black;
}
div#content{
margin-left:211px;/*200（宽度）+5*2（两个水平填充）+1（一个边框）=211*/
background:white;
border:1px solid white;
padding:10px;
}
div#footer{
margin:-1px auto 10px auto;
}
div#footer p{
margin:5px;
font:20px 宋体;
}
</style>
</head>
<body>
<div id="heading">
<h1>带有页眉和页脚的多栏布局</h1>
</div>
<div id="container">
<div id="left">左侧边栏</div>
<div id="content">
<h4>知识点分析</h4>
<p>在多栏布局中添加了页眉和页脚相当简单，只需要简单在左侧分栏留出空间，其他元素会各就各位。如此程序演示结果</p>
<p>在本例中有一些重要的概念需要了解，首先看页眉和页脚的样式。页眉和页脚元素中都包含了一个应用margin属性的元素。页眉中嵌套了应用margin属性的h1元素，其属性值为5像素，页脚中嵌套了margin属性的p元素，其属性值也是5像素。页眉和页脚也都有1个像素的黑色实线边框。这样做不仅仅出于美观原因，因为没有边框，嵌套元素的外边距和其父元素的外边距相互折叠。我们都知道，只要元素的上下外边距接触到父元素或者相邻元素的上下边距，就会发生外边距折叠。本例为了阻止外边距发生折叠，就需要为父元素——即id名为heading和footer的<div>元素添加边框。如果去掉边框，则会发生外边距折叠现象。</p>
</div>
</div>
<div id="footer">
<p>页脚位置</p>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background:lightyellow;
font:16px sans-serif;
width: 500px;
height: 1000px;
margin:0 auto;
}
div#dialogue{
position:absolute;
width: 200px;
height: 200px;
background:yellow;
border:1px solid gold;
top:50%;
left:50%;
margin:-56px 0 0 -106px;
padding:5px;
}
p{
margin:0;
}
</style>
</head>
<body>
id名为dialogue的<div>的元素在浏览器的窗口里垂直和水平居中。看到该技术，您或许想知道这能否在宽度和高度变化的内容中实现，即id名为dialogue的<div>元素没有固定的宽度和高度。答案是否，应用此技术的元素必须要有固定的宽度和高度。但对于绝大多数情况下，这不是问题。因为可以允许内容溢出，如果有必要的话通过overflow属性提供滚动条id名为dialogue的<div>的元素在浏览器的窗口里垂直和水平居中。看到该技术，您或许想知道这能否在宽度和高度变化的内容中实现，即id名为dialogue的<div>元素没有固定的宽度和高度。答案是否，应用此技术的元素必须要有固定的宽度和高度。但对于绝大多数情况下，这不是问题。因为可以允许内容溢出，如果有必要的话通过overflow属性提供滚动条id名为dialogue的<div>的元素在浏览器的窗口里垂直和水平居中。看到该技术，您或许想知道这能否在宽度和高度变化的内容中实现，即id名为dialogue的<div>元素没有固定的宽度和高度。答案是否，应用此技术的元素必须要有固定的宽度和高度。但对于绝大多数情况下，这不是问题。因为可以允许内容溢出，如果有必要的话通过overflow属性提供滚动条id名为dialogue的<div>的元素在浏览器的窗口里垂直和水平居中。看到该技术，您或许想知道这能否在宽度和高度变化的内容中实现，即id名为dialogue的<div>元素没有固定的宽度和高度。答案是否，应用此技术的元素必须要有固定的宽度和高度。但对于绝大多数情况下，这不是问题。因为可以允许内容溢出，如果有必要的话通过overflow属性提供滚动条id名为dialogue的<div>的元素在浏览器的窗口里垂直和水平居中。看到该技术，您或许想知道这能否在宽度和高度变化的内容中实现，即id名为dialogue的<div>元素没有固定的宽度和高度。答案是否，应用此技术的元素必须要有固定的宽度和高度。但对于绝大多数情况下，这不是问题。因为可以允许内容溢出，如果有必要的话通过overflow属性提供滚动条id名为dialogue的<div>的元素在浏览器的窗口里垂直和水平居中。看到该技术，您或许想知道这能否在宽度和高度变化的内容中实现，即id名为dialogue的<div>元素没有固定的宽度和高度。答案是否，应用此技术的元素必须要有固定的宽度和高度。但对于绝大多数情况下，这不是问题。因为可以允许内容溢出，如果有必要的话通过overflow属性提供滚动条
<div id="dialogue">
<p>利用此种绝对定位方法配合Javascript使用可以创建弹出式对话框，当然那些在屏幕上到处浮动的弹出式广告很令人讨厌。很遗憾的是，类似于这样的弹出式窗口也有很多合理之处，因此浏览器不能禁用他们</p>
</div>
</body>
</html>
465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
