您的位置：首页 > Web前端 > CSS

08-DIV+CSS-块元素和行内元素

2013-11-03 13:33 423 查看
块元素和行内元素

1. 概念

- 行内元素(inline element), 又叫内联元素

内联元素只能容纳文本或者其他内联元素,

即, 值栈内容宽度,默认不换行

常见内联元素<span><a>

- 块元素(block element)

块元素一般都从新行开,可以容纳文本 内联元素 块元素,

即, 块元素中内容即使不满一行,块元素也要占整行,要换行.

常见块元素 <div> <p>

2. 区别

1)宽度

行内元素只占内容的宽度,

块元素内容不管内容多少都要占全行

2)内容

行内元素只能容纳文本和其他行内元素

块元素可以容纳 文本 行内元素 块元素

3)有效性

一些css属性对行内元素不生效,

如 margin left right width height等

建议尽可能使用块元素.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <title>css1.html</title>
      <meta http-equiv="keywords" content="value1,value2,...">
      <meta http-equiv="content-type" content="text/html;charset=UTF-8">

    <style type="text/css">
      
      .spanCls {
        background-color: pink;
        border: 1px solid red;
      }

      .divCls {
        background-color: gray;
        border: 2px solid red;
      }
     
      .pCls {
        background-color: green;
        border: 3px solid red;
      }

      #innerDiv {
        background-color: black;
        width: 200px;
        color: white;
      }

    </style>

  </head>
  <body>
    
    <span class="spanCls">我是span1</span>
    <span class="spanCls">我是span2</span>
    <span class="spanCls">我是span3</span>
    
    <br/><hr/><br/>
    
    <div class="divCls">我是div1</div>
    <div class="divCls">我是div2</div>
    <div class="divCls">我是div3</div>

    <br/><hr/><br/>
    
    <p class="pCls">我是p1</p>
    <p class="pCls">我是p2</p>
    <p class="pCls">我是p3</p>

    <br/><hr/><br/>
    
    <div class="divCls">
        outer div
        <div id="innerDiv">inner div</div>
    </div>
    

  </body>
</html>


3. 相互转化

1) 语法

display:inline ==> 转为行内元素

display:block ==> 转为块元素

注: 仅样式的转换

2) 举例 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <title>css2.html</title>
      <meta http-equiv="keywords" content="value1,value2,...">
      <meta http-equiv="content-type" content="text/html;charset=UTF-8">

    <style type="text/css">
      
     div {
        background-color: green;
        display: inline;
     }

     span {
        background-color: gray;
        display: block;
     }

    </style>

  </head>
  <body>
    
    <div>其实, 我是div</div>

    <hr/>

    <span>其实, 我是span</span>

  </body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航