webbasic之元素的显示方式

#块

1.块独立成行,垂直排列

2.块有宽高

举例:hn/p/div/ol/ul/table

#行内

1.行内元素不独立成行,即左右排列

2.没有宽高

举例:span/b/a/strong/i/em/u/del

#行内块

1.不独立成行,即左右排列

2.有宽高

举例:img/input/select/textarea

#修改显示方式

1.通过display修改

  -block

  -inline

  -inline-block

  -none:元素将被隐藏,并且释放空间。

  实例:

<!doctype html>
<html>
  <head>
     <meta charset="utf-8"/>
     <title>display</title>
     <style>
       p{
         display:inline;
       }
       span{
         display:block;
       }
       img{
         display:block;
       }
       img{
         display:none;
       }
     </style>
  </head>
  <body>
    <div>
      <p>nnaskcn</p>
      <p>sacaaca</p>
      <p>ascacaca</p>
    </div>
    <div>
      <span>111</span>
      <span>222</span>
      <span>333</span>
    </div>
    <div>
       <img src="../images/01.jpg"/>
       <img src="../images/02.jpg"/>
       <img src="../images/03.jpg"/>
    </div>
  </body>
</html>

posted @ 2016-03-31 20:38  野生猿  阅读(224)  评论(0编辑  收藏  举报