CSS塊狀元素和內聯元素

餘二五發表於2017-11-15
CSS

在用CSS佈局頁面的時候，我們會將HTML標籤分成兩種，塊狀元素和內聯元素（我們平常用到的div和p就是塊狀元素，連結標籤a就是內聯元素）

塊狀元素
一般是其他元素的容器，可容納內聯元素和其他塊狀元素，塊狀元素排斥其他元素與其位於同一行，寬度(width)高度(height)起作用。常見塊狀元素為div和p。

內聯元素
內聯元素只能容納文字或者其他內聯元素，它允許其他內聯元素與其位於同一行，但寬度(width)高度(height)不起作用。常見內聯元素為“a”


 塊狀元素 內聯元素
是否允許其他元素同處一行 no yes
width和height是否起作用 yes no

塊元素(block element)包括：

address – 地址

blockquote – 塊引用

center – 舉中對齊塊

dir – 目錄列表

div – 常用塊級容易，也是CSS layout的主要標籤

dl – 定義列表

fieldset – form控制組

form – 互動表單

h1 – 大標題

h2 – 副標題

h3 – 3級標題

h4 – 4級標題

h5 – 5級標題

h6 – 6級標題

hr – 水平分隔線

isindex – input prompt

menu – 選單列表

noframes – frames可選內容，（對於不支援frame的瀏覽器顯示此區塊內容

noscript – 可選指令碼內容（對於不支援script的瀏覽器顯示此內容）

ol – 排序表單

p – 段落

pre – 格式化文字

table – 表格

ul – 非排序列表

內聯元素(inline element)包括

a – 錨點

abbr – 縮寫

acronym – 首字

b – 粗體(不推薦)

bdo – bidi override

big – 大字型

br – 換行

cite – 引用

code – 計算機程式碼(在引用原始碼的時候需要)

dfn – 定義欄位

em – 強調

font – 字型設定(不推薦)

i – 斜體

img – 圖片

input – 輸入框

kbd – 定義鍵盤文字

label – 表格標籤

q – 短引用

s – 中劃線(不推薦)

samp – 定義範例計算機程式碼

select – 專案選擇

small – 小字型文字

span – 常用內聯容器，定義文字內區塊

strike – 中劃線

strong – 粗體強調

sub – 下標

sup – 上標

textarea – 多行文字輸入框

tt – 電傳文字

u – 下劃線

var – 定義變數

 

* 塊狀元素 和 內聯元素 相互轉化

塊狀元素轉化為內聯元素：css設定display:inline ;

內聯元素轉化為塊狀元素：css設定display:block ;

 

例子：

 

block inline : 線上演示檢視原始碼

HTML :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
    </head>
    <body>
        <div id="div1">
            <div id="div2"></div>
            <div id="div3"></div>
            <a href="#">可容納內聯元素和其他塊狀元素</a>
        </div>
    </body>
</html>

CSS :

1
2
3
4
#div1{width:300px; height:300px; background:#999999;}
#div2{width:100px; height:100px; background:#993366;}
#div3{width:100px; height:100px; background:#6666FF;}
a{color:#fff; background:#669999;width:100px;height:100px; display:block;}

本文轉自 yntmdr 51CTO部落格，原文連結：http://blog.51cto.com/yntmdr/1941111，如需轉載請自行聯絡原作者


相關文章