为什么要使用div标签

1.更多的配置项,那就意味着更灵活,当然,难度也更高;

2.可以方便的容纳其他html标签;

    static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖以前的定义时才需要显示指定;relative 就是相对元素static定位时的位置进行偏移,如果指定static时top是50象素,那么指定relative并指定top是10象素时,元素实际top就是60象素了。absolute绝对定位,直接指定top,left,right,bottom。有意思 的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢,容器就是离元素最近的一个定位好的“祖先”,定位好的意思就是其 Position是absolute或fixed或relative。如果没有这个容器,那就使用浏览器初始的,也就是body或者html元素。标准是 说只需要指定left和right,width可以自动根据容器宽度计算出来,可惜ie不支持。fixed:fixed才是真正的绝对定位,其位置永远相对浏览器位置来计算。而且就算用户滚动页面,元素位置也能相对浏览器保持不变,也就是说永远可以看到,这个做一些彩单的时候可以用。可惜的是ie还不支持。

    可以用“流”的概念来理解div的position属性,一个html文档可以看成一棵树,relative和static是在流中的,讲究先后顺序,位置和父节点及前面的兄弟节点是相关的,而absolute和fixed不在流中,不讲先后顺序,只和父节点相关。

float属性

    float指定了div的浮动模式,可取none|left|right,并使div丢失clear:both和display:block的样式,并使div不会向“自动高度”的父div索要位置,在下面自动高度里有讲到。

height属性

    height指定里div的高度,如果指定里height属性,就算高度不够容纳所有子元素,也不会被撑开。

自动高度

    未指定height属性时,div就会自动计算自己的高度。使用好div的自动高度,并不是一件很容易的事,我总结了一条原则:必须高到足够容纳最后一个向自己“索要”位置的子元素。一般子元素都认为会向div索要位置,但设置了float属性的div标签是不会的

    代码:

<div style="width:200px;border:1px solid red;">
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>

    效果:

html中div使用自动高度,即不设置height属性要注意的问题

    可以看到,红色边框的div并没有被撑开。

    下面我们加点代码:

<div style="width:200px;border:1px solid red;">
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="clear:both;"></div>
</div>

    效果:

html中div使用自动高度,即不设置height属性要注意的问题

    把红色的代码上移试试:

<div style="width:200px;border:1px solid red;">
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="clear:both;"></div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>

    效果:

html中div使用自动高度,即不设置height属性要注意的问题

    现在,读者应该理解:必须高到足够容纳最后一个向自己“索要”位置的子元素的意义了。

    如果父元素也设置float属性呢?代码:

<div style="float:left;width:200px;border:1px solid red;">
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>

    效果:

html中div使用自动高度,即不设置height属性要注意的问题

    这下红框的div撑开了,但它把问题抛给了它的上级。

    如果不想在每段代码的地方都加一个空的div,那就用css来解决吧,css代码:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;

  overflow:hidden;

    visibility: hidden;
}

    html代码:

<div style="width:200px;border:1px solid red;" class="clearfix">
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>

    效果也会撑开父div。就不贴图了。注意:某些windows系统下的某些版本可能并不支持通过css这样设置。

原博客地址:html中div使用自动高度,即不设置height属性要注意的问题



上一篇:css控制文字自动换行
下一篇:没有了