檔案流能拿到寬高嗎 理解標準文件流特點

2021-10-17 06:41:34 字數 1602 閱讀 7928

在我們遇到的 html 元素中,有的標籤元素如

、 等在瀏覽器中載入時必須獨自佔滿一行,有的標籤元 素如 、等則不會獨佔一行,原因是什麼?

這就是標準文件流的特點,接下來給大家解釋標準文件流,指的是元素排版布局過程中,元素會預設自動從左往右,從上往下的 流式排列方式。前面內容發生了變化,後面的內容位置也會隨著發生變化。

html就是一種標準文件流檔案。

html中的標準文件流特點通過兩種方式體現:微觀現象和元素等級。

微觀現象空白摺疊現象(不管你打幾個空格都會展示乙個空格)。

文字類的元素如果排在一行會出現一種高低不齊、底邊對齊效果。

自動換行,元素內一行內容寫滿元素的 width 時會自動進行換行。

有無生 成有無

乙個空格乙個回車和多空格多個回車都會摺疊成乙個空格顯示在頁面上,他摺疊的空格是當前父元素的文字字型大小

元素等級

在標準流中,大部分元素是區分等級的,習慣將元素劃分為幾種常見的載入級別: 塊級元素、行內元素、行內塊元素等。

塊級元素:大部分容器級標籤包括p標籤都是塊級元素,比如

行內元素:大部分的文本級標籤,比如 、、等。

行內塊元素:比如 、 等。

各種等級的元素有自己的載入特點。

塊級元素塊級元素可以設定寬高,在瀏覽器中正常載入。

塊級元素必須獨佔一行,不能與其他任何標籤併排一行。

塊級元素如果不設定寬度,會自動撐滿父級的 width 區域;高度不設定,會被內 容自動撐開高度。

常見的塊級元素有:div,h1-h6,p,pre,ul,ol,li,form,table,label等。

行內元素行內元素不能正常載入寬度和高度屬性,其他的盒模型屬性雖然能設定,但是容 易出現載入問題。

行內元素可以與其他的行內或行內塊元素併排一行顯示。

行內元素不論是否設定寬高,寬度和高度都只能被內容自動撐開。

常見的行內元素有:a,span,i(斜體),em(強調),sub(下標),sup(上標)等。

行內塊元素行內塊元素可以設定寬度和高度。

行內塊元素可以與其他的行內或行內塊併排一行顯示。

行內塊元素如果不設定寬高,要麼以原始尺寸載入要麼被內容自動撐開。

行內塊依舊具有標準流的微觀性質,例如空白摺疊現象。

常見的行內塊元素有(button,input,textarea,select), img等。

設定瀏覽器載入模式

標準流中的元素有自己預設的瀏覽器載入模式,但是載入模式不是一成不變的,後期可以通過 display 屬性更改乙個標籤的顯示模式。

屬性值:元素根據屬性值不同,可以載入對應元素等級的顯示模式的特點。屬性值作用

block表示元素要以塊級元素模式載入,具備塊級特點

inline表示元素要以行內元素模式載入,具備行內特點

inline­block表示標籤要以行內塊模式載入,具備行內塊特點

none表示標籤及內部內容直接隱藏,讓出原有標準流的位置

脫離標準流

display 屬性更改的顯示模式並沒有改變標準流本質性質,頁面還是只能從上往下 載入,存在空白摺疊現象等微觀性質。要想實現更多的介面布局效果需要脫離標準流的限制。標籤元素脫離標準流的方法包括:浮動、絕對定位、固定定位。

行內元素能設定寬高嗎

除了行內非替換元素,table rows,and row groups 其他元素都能設定寬 除了行內非替換元素,table colums,colum groups 其他元素都能設定高 行內元素包含行內替換元素 img等 和行內非替換元素 a span等 行內替換元素是可以設定寬高的,行內非替換元素是...

RCaller 樹高和樹寬相關嗎?

介紹 correlation tree heigh diameter.fmwt 源資料 csv檔案publictrees.csv包含城市樹木的各種屬性。使用data inspector檢視源csv資料 說明 讀取源資料 使用csv讀模組讀取publictrees.csv.新增乙個rcaller 對於...

antd upload上傳獲取檔案寬高

專案新加的需求,需要判斷上傳的寬高,查了一下antd upload元件貌似不支援這個查詢,因此需要使用外部的api,直接上 beforeupload 方法 handlebeforeupload async file,filelist this.component.props const isinra...