<html>
<head>
<meta charset="utf-8">
<title>隐藏元素、浮动元素、定位元素</title>
<style>
p{
width:300px;
background:pink;
}
#column{
background:pink;
width:33%;
float:left;
border-top:1px solid white;
border-left:2px solid white;
text-align:center;
}
#center{
position:absolute;
top:120%;
left:30%;
border:1px solid red;
}
#content{
position:relative;
top:40px;
left:60px;
border:1px solid green;
width:200px;
height:250px;
}
</style>
</head>
<body>
<!--
block：单独占据一行，与前后不在同一行
block：块对象的默认值。对象之后添加新行。
none：隐藏对象。隐藏的对象不占据物理空间。
inline：内联对象的默认值。对象后不添加行。
display:none不占据页面空间
visibility:hidden 占据页面空间
type="hidden" 不占据页面空间
-->
<h1>显示隐藏元素 </h1>
<p>1111111111111111<span style="display:block">AAAAAAA</span>11111111</p><hr/>
<p>1111111111111111<span style="display:none">AAAAAAA</span>11111111</p><hr/>
<p>1111111111111111<span style="display:inline">AAAAAAA</span>11111111</p><hr/>
<p>1111111111111111<span style="visibility:visible">AAAAAAA</span>11111111</p><hr/>
<p>1111111111111111<span style="visibility:hidden">AAAAAAA</span>11111111</p><hr/>
<h1>浮点元素</h1>
<div style="background:red;width=100px;height:20px;border:1px solid red"></div>
<div id="column">￥￥￥￥￥</div>
<div id="column">$$$$$$$$$</div>
<div id="column">#########</div>
<br/>
<br/>
<h1>定位元素经典案例</h1>
<div id="center">
<div id="content">
文德皇后
文德郭皇后（184年－235年），名不明，字女王，安平广宗人，荆州南郡太守郭永次女，三国曹魏的第一位皇后。少即秀慧，父郭永奇之曰：“此乃我女中王也。”遂以女王为字。早失父母，丧乱流离，29岁嫁与曹丕，有智数，曹丕定为太子，郭氏有谋。220年曹丕即位魏王，郭氏被封做魏王夫人，魏受禅册封贵嫔，位次皇后，黄初三年（222年）入主中宫。嬖异宠而无子嗣，养平原王曹叡。曹叡继位，尊其为皇太后，称永安宫。青龙三年（235年）于许昌逝世，在位十二年。合葬魏文帝首阳陵，谥号“德皇...
</div>
</div>
<p>
align ：规定 div 元素中的内容的水平对齐方式。
text-align：规定“元素中”的文本的水平对齐方式。
问题：center的边框哪去了？
答案：content是absolute定位，也即是从文档流中拖出来了，不占据页面控件，所有没有把center撑开。
</p>
</body>
</html>
时间： 2024-08-25 04:30:19