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

 

posted @ 2016-01-02 09:54  马小宝  阅读(330)  评论(0编辑  收藏