<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>