display:Block 用法分析

來源:互聯網
上載者:User

標籤:style   http   color   strong   width   for   re   c   

 根據CSS規範的規定,每一個網頁元素都有一個display屬性,用於確定該元素的類型,每一個元素都有預設的display屬性值,比如div元素,它的預設display屬性值為“block”,成為“塊級”元素(block-level);而span元素的預設display屬性值為“inline”,稱為“行內”元素。

 區塊層級元素

      動佔據一定矩形空間,可以通過設定高度、寬度、內外邊距等屬性,來調整的這個矩形的樣子;

 行內元素

      自己的獨立空間,它是依附於其他區塊層級元素存在的,因此,對行內元素設定高度、寬度、內外邊距等屬性,都是無效的。

例子
      連結 a 元素,在預設情況下是是“行內元素”,因此對a元素設定高度、寬度等屬性,都是無效的。而比如div,p,li,img等預設情況下的display屬性值就是“block”。所以對於連結a來說只能這樣:display:block;強制將它改成塊元素。

看完概念看代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><style>span,div{background-color:#F60;margin-bottom:5px;margin-left:5px;height:50Px;}</style><div style="background-color:#F60">Div預設為 block</div><span style="display:block;">加了block屬性</span><span style="display:block;">加了block屬性</span><span style="display:block;">加了block屬性</span><span>沒加block屬性</span><span>沒加block屬性</span><span>沒加block屬性</span>
阿里云产品大规模降价
  • 最高幅度達59%,平均降幅23%
  • 核心產品降價
  • 多地區降價
undefined. /
透過 Discord 與我們聯繫
  • 安全、匿名的群聊,不受干擾
  • 隨時了解活動、活動、新產品等訊息
  • 支持您的所有問題
undefined. /
免費試用
  • 開啟從ECS到大數據的免費試用之旅
  • 只需三步 輕鬆上雲
  • 免費試用ECS t5 1C1G
undefined. /

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.