阿C雷人的CSS试验-Padding与Float

<html>
<head>
    <title></title>
    <style type="text/css">
        #father
        {
            border: solid 1px #0f0;
        }
        #father div
        {
            background-color: #eeb0b0;
            padding: 25px;
            border: dashed 3px #000;
        }
        div.special
        {
            float: left;
        }
    </style>
</head>
<body>
    <div id="father">
        <div class="special">
            This is a devision!</div>
        <div class="special">
            This is a devision!</div>
        <div style="padding-left: 500px;">
            This is a devision!</div>
        <div>
            This is a devision!</div>
      <p>
        This is a paragraph!        This is a paragraph!        This is a paragraph!        This is a paragraph!        This is a paragraph!
        This is a paragraph!        This is a paragraph!        This is a paragraph!        This is a paragraph!        This is a paragraph!
        This is a paragraph!        This is a paragraph!
    </p>
    </div>
</body>
</html>
试验一:为什么每设置一个Div的浮动,都会加一段红色框的距离?
      猛然很雷的很发现,原来这个鬼东西在设置成Float以后,设置Float的这个Div实际上会保留padding的设置,而跟在它屁股后面的Div则抢点floatDiv的这一行,由于Padding-left的距离小于float Div的宽长,默认就紧贴着FloatDiv的长度后面了,很无法这个

试验二:为了证明上一个想法,看这个图,前两个Float的Div都保留着自己的padding,由于第三个div它抢占了这一行,而自己的左padding又不够大,只能紧挨着第二个Div

试验三:在第三个Div中加入padding-left:500;后,第三个Div就隔出来了

总结:就这样了.

posted on 2009-08-25 08:56 阿C's 阅读(731) 评论(0) 收藏举报