CSS中display属性

      一开始觉得挺简单的，要么是块的，自己在这个桌上吃饭了了，别人就不能在这个桌上吃饭了，要么是内联的，自己在这个桌上吃饭，只要桌上有空座，别人还是可以坐到这儿的。等到了使用的时候发现并没有那么简单啊~

   一、HTML元素分类

    1、内联元素（inline）

       ①元素显示方式：“文本方式”，1个接着1个，不单独占一个桌吃饭。

       ②内嵌元素也必须是内联元素：如<a></a>,不能在里面嵌套<div></div>等块级元素。

       ③常见的标签有：<a>,<input>,<lable>,<img>等。

   2、块元素（block）

       ①元素显示方式：每个元素独自占有一行，相当于前后都带有换行符，一个人占一个桌。

       ②内嵌元素可以是内联或块级元素。

       ③常见的标签：<h1>--<h6>,<div>,<hr>等等。

  二、HTML元素布局展示

    1、默认展示（未添加width 和 height 属性）

        ①HTML元素在浏览器展示的方式是：从上到下，从左到右。

        ②内联元素是根据浏览器的宽度以及自身的width来填充。若当前行剩余空白区域不够就会换下一行。

        ③块级元素根据内联元素的展示方式展示大概区域。当浏览器宽度减少时，会自动扩充会计元素的height属性的值，以容纳内嵌元素的展示。

   2、块级元素增加width属性

        浏览器的宽度小于Div的宽度时，height不会变，出现滚动条。

   3、结论

       ①当块级元素未设置width属性时，浏览器宽度的变更，会压缩块元素内嵌元素的排版。

       ②设置块级元素的width属性时，浏览器的width属性值变更，不会影响到块级元素里的内嵌元素的布局，内嵌元素受父级块级元素的影响。

       ③举例：导航条（导航条里有多个a标签，可放在一个div里，并给div附加width属性，以免浏览器缩小，造成导航排版乱掉。）

  三、CSS display 属性

       主要的值：

          none：此元素不被显示

          block：此元素按块级元素显示：前后自带换行符（内联元素→块级元素）

          inline：按内联元素显示，一个挨着一个。块元素→内联元素

 

       ！ 文章参照于@polk6。