首页 > 代码库 > display、position、float----笔记

display、position、float----笔记

1、元素分为行元素(span、input。。。)和块元素(div、ul。。。)

     行元素:在一行中平行排列,不能改变其宽度和高度,自身高度被其内容撑开。

     块元素:垂直排列,可以修改其宽和高(top、right、bottom、left),自身带有自动换行功能。

2、display

      display的常用属性:

      (1)none:脱离文档流,内容和空间都隐藏(overflow:hidden;内容隐藏,空间依然显示)

      (2)inline:行内元素

      (3)block:块元素

      (4)inline-block:行内块元素(水平显示的块元素)

3、position

     position的常用属性:

    (1)inhert:规定应该从父元素继承 position 属性的值。

    (2)static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

    (3)relative:生成相对定位的元素,相对于元素本身正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

    (4)absolute:绝对定位。如果父元素设置了相对定位,则相对于父元素的位置进行绝对定位;如果父元素没有设置相对定位,则相对于body进行绝对定位。

    (5)fixed:也是绝对定位。相对于浏览器窗口的定位。通过top、left、right、bottom来设置。

eg:position的例子

<!--普通流-->
        <div style="width: 300px;border: 2px solid greenyellow;">
            <div style="width: 100px; height: 100px; "></div>
            <div style="width: 100px; height: 100px; "></div>
            <div style="width: 100px; height: 100px; "></div>
        </div>
        <br />

技术分享

 

<!--相对定位-->
        <div style="width: 300px;border: 2px solid greenyellow;">
            <div style="width: 100px; height: 100px; "></div>
            <div style="width: 100px; height: 100px; position: relative; top:20px; left: 20px;"></div>
            <div style="width: 100px; height: 100px; "></div>
        </div>

技术分享

        相对定位:相对于自己改变位置,通过移动位置后,原来占据的空间依然还在。只是表现形式变了。

 

 

<!--相对父元素的绝对定位-->
        <div style="width: 300px;border: 2px solid greenyellow;position: relative;">
            <div style="width: 100px; height: 100px; "></div>
            <div style="width: 100px; height: 100px; position: absolute; top:20px; left: 20px;"></div>
            <div style="width: 100px; height: 100px; "></div>
        </div>

 技术分享

      绝对定位:该元素不占据文档流空间,脱离文档流。不给其设置top和left值(如下),该元素不会显示出来。因为脱离文档流,所以可以覆盖在其他元素上,可以设置z-index值。

技术分享

 

 

相对于body的绝对定位:

技术分享

技术分享

 

  fixed属性:不管浏览器如何滚动,该属性一直在浏览器窗口的左下方

<div style="width: 300px;border: 2px solid greenyellow; ">
            <div style="width: 100px; height: 100px; "></div>
            <div style="width: 100px; height: 100px; position: fixed; bottom: 20px;"></div>
            <div style="width: 100px; height: 100px; "></div>
        </div>

技术分享

 

4、浮动:float(left | right)---------元素脱离文档流,不会影响不浮动元素

   (1)技术分享

          红框左移,覆盖蓝框

技术分享

 

   (2)都左移

技术分享

技术分享

  该例子父元素没有设置高度。浮动元素不会撑开父元素的高度。

(1.可以设置清除浮动   2.给父元素设置BFC    这二者可以撑开父元素高度-----待续)

清除浮动方法:1.在父元素里最后设置一个空div-----一般不建议使用

技术分享

2.:after伪类---不需要再多加div来清除

技术分享

 

 

父元素的内容会撑开父元素的高度:

技术分享

 

(3)父元素空间不够

技术分享

(4)子元素其中高度太高被挤

技术分享

 

(5)非浮动元素有内容(这个div被称为行框---文档流中元素)

技术分享

      这是正常div显示效果

当给第一个div加左浮动后:红色覆盖在蓝色上面,行框会像浮动元素一样不存在,但是内容会受浮动元素影响,为浮动元素腾出空间。

(用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。)

技术分享

 

要想阻止行框内容被挤,需要在该div加清除浮动:

技术分享

 

 

技术分享

引用------http://www.cnblogs.com/baimiaolei/p/5627755.html

 

display、position、float----笔记