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

叁歲伎倆 2022-09-18 02:00 172阅读 0赞

块元素和行内元素

# 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>