今天jquery博客遇上CSS文檔流與塊級元素(block)內(nèi)聯(lián)元素(inline)之間的關系,最近一直加班,睡眠不好,有點糊涂了,簡單的問題復雜化了。
項目多了,有些需要和同事們齊心協(xié)力,有些放進去出錯,頭大啊。
文檔流
將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流。
每個非浮動塊級元素都獨占一行, 浮動元素則按規(guī)定浮在行的一端。 若當前行容不下, 則另起新行再浮動。
內(nèi)聯(lián)元素也不會獨占一行。 幾乎所有元素(包括塊級,內(nèi)聯(lián)和列表元素)均可生成子行, 用于擺放子元素。
有三種情況將使得元素脫離文檔流而存在,分別是浮動,絕對定位, 固定定位。
基于文檔流, 我們可以很容易理解以下的定位模式:
相對定位, 即相對于元素在文檔流中位置進行偏移。 但保留原占位。
絕對定位, 即完全脫離文檔流, 相對于position屬性非static值的最近父級元素進行偏移。
固定定位, 即完全脫離文檔流, 相對于視區(qū)進行偏移。
《CSS權威指南》中文字顯示:任何不是塊級元素的可見元素都是內(nèi)聯(lián)元素。其表現(xiàn)的特性是“行布局”形式,這里的“行布局”的意思就是說其表現(xiàn)形式始終以行進行顯示。比如,我們設定一個內(nèi)聯(lián)元素border-bottom:1px solid #000;時其表現(xiàn)是以每行進行重復,每一行下方都會有一條黑色的細線。如果是塊級元素那么所顯示的的黑線只會在塊的下方出現(xiàn)。
1 行內(nèi)就是在一行內(nèi)的元素,只能放在行內(nèi);塊級元素,就是一個四方塊,可以放在頁面上任何地方。
2 說白了,行內(nèi)元素就好像一個單詞;塊級元素就好像一個段落,如果不另加定義的話,它將獨立一行出現(xiàn)。
3 一般的 塊級元素諸如段落<p>、標 題<h1><h2>…、列表。<ul><ol><li> 、表格<table>、表單<form>、DIV<div>和BODY<body>等元素。而內(nèi)聯(lián)元素則如: 表單元素<input>、超級鏈接<a>、圖像<img>、<span> ……..
4 塊級無素的顯著特點是:每個塊級元素都是從一個新行開始顯示,而且其后的無素也需另起一行進行顯示。
5 <span>在CSS定義中屬于一個行內(nèi)元素,而<div>是塊級元素。
主要列出一些常見的啊,不怎么見就拉倒了
塊元素(block element)
div? dl ul? h1 h2 h3 h4 h5 h6 hr ol table
內(nèi)聯(lián)元素(inline element)
b img span
本文名稱:關于CSS文檔流與塊級元素(block)內(nèi)聯(lián)元素(inline)那點事
鏈接分享:http://redsoil1982.com.cn/news8/312208.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供定制網(wǎng)站、靜態(tài)網(wǎng)站、品牌網(wǎng)站建設、搜索引擎優(yōu)化、自適應網(wǎng)站、電子商務
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)