前端的一些概念剖析 文件流 內聯元素和塊級元素

2022-07-20 05:57:08 字數 2250 閱讀 4075

1、文件流

文件流:將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文件流.也就是說從頭到尾(自上而下,自左到右)按照文件的順序,放置元素。

每個非浮動塊級元素都獨佔一行, 浮動元素則按規定浮在行的一端. 若當前行容不下, 則另起新行再浮動.內聯元素也不會獨佔一行. 幾乎所有元素(包括塊級,內聯和列表元素)均可生成子行, 用於擺放子元素.

有三種情況將使得元素脫離文件流而存在,分別是浮動,絕對定位, 固定定位. 但是在ie中浮動元素也存在於文件流中。浮動元素不佔任何正常文件流空間,而浮動元素的定位還是基於正常的文件流,然後從文件流中抽出並盡可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當乙個元素從正常文件流中抽出後,仍然在文件流中的其他元素將忽略該元素並填補他原先的空間。浮動概念讓人迷惑根源在於瀏覽器對理論的解讀造成的。

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

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

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

固定定位, 即完全脫離文件流, 相對於視區進行偏移.

2、內聯元素和塊級元素。

《css權威指南》中文字顯示:任何不是塊級元素的可見元素都是內聯元素。其表現的特性是」 行布局」形式,這裡的」行布局」的意思就是說其表現形式始終以行進行顯示。比如,我們設定乙個內聯元素border-bottom:1px solid #000;時其表現是以每行進行重複,每一行下方都會有一條黑色的細線。如果是塊級元素那麼所顯示的的黑線只會在塊的下方出現。p、h1、或div等元素常常稱為塊級元素,這些元素顯示為一塊內容;strong,span等元素稱為行內元素,它們的內容顯示在行中,即」行內框」。(可以使用display=block將行內元素轉換成塊元素,display=none表示生成的元素根本沒有框,也既不顯示元素,不占用文件中的空間)

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

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

c:一般的 塊級元素諸如段落、標 題…、列表,、**、表單、div和body等元素。而內聯元素則如: 表單元素          、超級鏈結、影象

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

e:在css定義中屬於乙個行內元素,而是塊級元素。

用容器這一詞會更容易形象理解它們的存在與用途,行內元素相當乙個小容器,而相當於乙個大容器,大容器當然可以放乙個小容器 了。就是小容器,這樣一說你也許會在腦海中有乙個初步的印象了吧,如果我們想在大容器中裝一些清水。但我也想在裡裝一些墨水怎麼 辦?很簡單,我們把小容器拿出來裝上墨水然後放入大容器裡的清水中不就成了嗎。比如

abcdefg

用css定義字母c的樣式,因此我們就可以用到了。

abcdefg

塊元素(block element)一般是其他元素的容器元素,塊元素一般都從新行開始,它可以容納內聯元素和其他塊元素,常見塊元素是段落標籤』p」。」form」這個塊元素比較特殊,它只能用來容納其他塊元素。

如果沒有css的作用,塊元素會順序以每次另起一行的方式一直往下排。而有了css以後,我們可以改變這種html的預設布局模式,把塊元素擺放到你想要 的位置上去。而不是每次都愚蠢的另起一行。需要指出的是,table標籤也是塊元素的一種,table based layout和css based layout從一般使用者(不包括視力障礙者、盲人等)的角度來看這兩種布局,除了頁面載入速度的差別外,沒有其他的差別。但是如果普通使用者不經意點了 檢視頁面源**按鈕後,兩者所表現出來的差異就非常大了。基於良好重構理念設計的css布局頁面原始碼,至少也能讓沒有web開發經驗的普通使用者把內容快 速的讀懂。從這個角度來說,css layout code應該有更好的美學體驗吧。

內聯元素(inline element)一般都是基於語義級(semantic)的基本元素。內聯元素只能容納文字或者其他內聯元素,常見內聯元素 「a」。

塊元素(block element)和內聯元素(inline element)都是html規範中的概念。塊元素和內聯元素的基本差異是塊元素一般都從新行開始。而當加入了css控制以後,塊元素和內聯元素的這種屬 性差異就不成為差異了。比如,我們完全可以把內聯元素cite加上display:block這樣的屬性,讓他也有每次都從新行開始的屬性。

可變元素的基本概念就是他需要根據上下文關係確定該元素是塊元素或者內聯元素。可變元素還是屬於上述兩種元素類別,一旦上下文關係確定了他的類別,他就要遵循塊元素或者內聯元素的規則限制。大致的元素分類見全文。

分享一些前端chm文件

對於網路不好的人來說,離線文件更加方便。開啟速度更快。但是,離線文件一般實時性不高。對實際內容有些滯後,推薦看實際網上說明文件。看名字就知道是2014年版的。有html5和css3。不過,動態效果顯示不出來,畢竟只是乙份文件。jquery 1.4.4.chm jquery1.7 中文手冊 jquer...

有關文件流的一些注意事項

通過給文字設定行高達到垂直居中對齊效果 如下 示例 div在給文字的行高設定為與盒子高度相同時,實現垂直居中效果 在給盒子新增浮動後可以消除縫隙div在很多情況下,盒子不方便給高度,為的是在以後維護的時候繼續新增元素,所以不會把盒子的高度定死,而是通過子盒子本身的高度將父盒子撐大。但是子盒子通常時浮...

筆記 開始學前端,記一些概念

node.js 基於 chrome v8 引擎的 j ascript 執行環境 使用了乙個事件驅動 非阻塞式 i o 的模型,使其輕量又高效 類似於 j a 中的 jvm server.js 執行 node server.js npm node 的包管理工具 npm package 檔案 指定依賴包...