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

 

转载于:https://www.cnblogs.com/an1129/p/5885597.html