display:Block 用法分析

時間 2019-11-11

標籤 display block 用法分析欄目 CSS 简体版

原文原文鏈接

根據CSS規範的規定，每個網頁元素都有一個display屬性，用於肯定該元素的類型，每個元素都有默認的display屬性值，好比div元素，它的默認display屬性值爲「block」，成爲「塊級」元素(block-level)；而span元素的默認display屬性值爲「inline」，稱爲「行內」元素。

塊級元素：html

動佔據必定矩形空間，能夠經過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣子；web

行內元素：spa

本身的獨立空間，它是依附於其餘塊級元素存在的，所以，對行內元素設置高度、寬度、內外邊距等屬性，都是無效的。
code

例子：
連接 a 元素，在默認狀況下是是「行內元素」，所以對a元素設置高度、寬度等屬性，都是無效的。而好比div，p，li，img等默認狀況下的display屬性值就是「block」。因此對於連接a來講只能這樣：display:block;強制將它改爲塊元素。orm

看完概念看代碼：htm

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。