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

最新推荐文章于 2024-07-31 10:15:00 发布

forwardNow

最新推荐文章于 2024-07-31 10:15:00 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签： DIV+CSS 块元素行内元素

本文链接：https://blog.csdn.net/wuqinfei_cs/article/details/14104345

版权

前端专栏收录该内容

268 篇文章 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>