CSS文檔流與區塊層級元素(block)內嵌元素(inline)

來源:互聯網
上載者:User

將表單自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文檔流。

每個非浮動區塊層級元素都獨佔一行, 浮動元素則按規定浮在行的一端。 若當前行容不下, 則另起新行再浮動。

內嵌元素也不會獨佔一行。 幾乎所有元素(包括塊級,內聯和列表元素)均可產生子行, 用於擺放子項目。

有三種情況將使得元素脫離文檔流而存在,分別是浮動,絕對位置, 固定定位。

 

基於文檔流, 我們可以很容易理解以下的定位元模式:

相對定位, 即相對於元素在文檔流中位置進行位移。 但保留原佔位。

絕對位置, 即完全脫離文檔流, 相對於position屬性非static值的最近父級元素進行位移。

固定定位, 即完全脫離文檔流, 相對於視區進行位移。

《CSS權威指南》中文字顯示:任何不是區塊層級元素的可見元素都是內嵌元素。其表現的特性是“行布局”形式,這裡的“行布局”的意思就是說其表現形式始終以行進行顯示。比如,我們設定一個內嵌元素border-bottom:1px solid #000;時其表現是以每行進行重複,每一行下方都會有一條黑色的細線。如果是區塊層級元素那麼所顯示的的黑線只會在塊的下方出現。

1 行內就是在一行內的元素,只能放在行內;區塊層級元素,就是一個四方塊,可以放在頁面上任何地方。

2 說白了,行內元素就好像一個單詞;區塊層級元素就好像一個段落,如果不另加定義的話,它將獨立一行出現。

3 一般的 區塊層級元素諸如段落<p>、標 題<h1><h2>…、列表。<ul><ol><li> 、表格<table>、表單<form>、DIV<div>和BODY<body>等元素。而內嵌元素則如: 表單元素<input>、超級連結<a>、映像<img>、<span> ……..

4 塊級無素的顯著特點是:每個區塊層級元素都是從一個新行開始顯示,而且其後的無素也需另起一行進行顯示。

5 <span>在CSS定義中屬於一個行內元素,而<div>是區塊層級元素。

 

主要列出一些常見的啊,不怎麼見就拉倒了

 

塊元素(block element)

 

div dl ul h1 h2 h3 h4 h5 h6 hr ol table

 

內嵌元素(inline element)

 

b img span

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.