CSS - display属性

用法

display 属性规定元素应该生成的框的类型;
每个元素的display都有一个默认值.

display属性值

display属性值.png

默认值为block的元素:

  p,form,header,footer,section,div,table,pre, h1~h6, dl, ol, ul

1.block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。

2.block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

3.block元素可以设置margin和padding属性。

栗子:

    <div>p,form,header,footer,section : 我们都是块级元素</div>

浏览器显示效果:

块级元素效果图.png

默认值为inline的元素:

span, a, strong, em,label,input, select, textarea, img, br

1.inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。

2.inline元素设置width,height属性无效。

3.inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

栗子:

 <span>span, a, strong, em,label,input, select, textarea,
 img, br都是行 内元素</span>

浏览器显示效果:

行内元素效果图.png

默认值为none的元素:

    script

一些专门的元素，如脚本使用none作为他们的默认值;
此元素不会被显示。

<i>与visibility:hidden的区别</i>:

• visibility是控制元素是否显示出来，它并不控制元素是以块、单元格、行或者其他的外观。

• 当你想隐藏一个元素的时候，如果用display:none的话，这个元素就完全不显示，也不占位置，不遮盖比它z-index小的元素。但是如果你用visibility:hidden的时候，元素虽然不会显示在网页上，但是元素还是会占位，而且也会覆盖比它z-index小的元素，visibility:hidden只是让元素变得不可见而已。
  栗子:

   <div id="a" style="z-index:2;">A</div>
   <div id="b" style="z-index:1;">B</div>
   <div id="c" style="z-index:0;">C</div>
   #b{display: none;}

display-none效果.png

  <div id="a" style="z-index:2;">A</div> 
  <div id="b" style="z-index:1;">B</div> 
  <div id="c" style="z-index:0;">C</div> 
  #b{visibility:hidden;}

visibility-hidden效果.png

display:inline-block

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。
栗子:

   <div id="a" style="z-index:2;">A</div>
   <div id="b" style="z-index:1;">B</div>
   <div id="c" style="z-index:0;">C</div>

   #a{ background-color: aqua;    
         width: 20px;    
        height: 80px;
       }

   #b{ display: inline-block;    
         background-color: aqua;    
         width: 20px;     
         height: 80px;
      }

在浏览器显示效果:

display-inline-block.png

<i>关于z-index的介绍,将会在之后的文章中更新</i>