<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