今天jquery博客遇上CSS文檔流與塊級元素(block)內聯元素(inline)之間的關係，最近一直加班，睡眠不好，有點糊塗了，簡單的問題複雜化了。
項目多了，有些需要和同事們齊心協力，有些放進去出錯，頭大啊。
文檔流
將窗體自上而下分成一行行， 並在每行中按從左至右的順序排放元素，即爲文檔流。
每個非浮動塊級元素都獨佔一行， 浮動元素則按規定浮在行的一端。 若當前行容不下， 則另起新行再浮動。
內聯元素也不會獨佔一行。 幾乎所有元素(包括塊級，內聯和列表元素）均可生成子行， 用於擺放子元素。
有三種情況將使得元素脫離文檔流而存在，分別是浮動，絕對定位， 固定定位。
基於文檔流， 我們可以很容易理解以下的定位模式：
相對定位， 即相對於元素在文檔流中位置進行偏移。 但保留原佔位。
絕對定位， 即完全脫離文檔流， 相對於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
原文地址 前端開發http://www.jqueryba.com/204.html
CSS文檔流與塊級元素(block)內聯元素(inline)那點事
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章