行內格式化

2021-08-31 01:25:36 字數 1571 閱讀 6713

相對於熟知的塊級格式化上下文,行內格式化上下文更加的複雜難明。行內元素不像塊級元素那樣直來直去,乙個塊級元素佔據一行,其他塊級元素在垂直方向依次向下排列即可。行內元素不同,多個行內元素可以在一行顯示,那麼,在一行中多個行內元素是怎麼排布的,下面就試著解釋一下。

首先我們來理解一行由哪些東西構成:

>

xem>

行內框span

>

style

="width

: 40px;

height

: 40px;

margin

: 10px;

" src="

" />

p>

上面有乙個匿名文字,乙個行內框也就是行內非替換元素,乙個行內替換元素是指沒有元素包裹直接暴露在父元素下的文字。

這些文字應該占多大的地方?其實每乙個文字字元都會有乙個em框(見圖:1-1),那麼em框有了,多個em框就組成了乙個內容區(見圖1-1)。好,我們上面的匿名文字就先這樣,當然還沒有完事,下面繼續。

em框是在字型中定義的,並且高度和font-size的值一致。

span這樣的行內元素會形成乙個行內框(匿名文字也會形成),這個行內框是按照上面匿名文字形成內容區域的步驟形成內容區域後在加上行間距形成的。又出現了乙個行間距。

行間距又是**來的?行間距是行高(line-height)減去內容區高度得到的。

我們得到了行間距,然後將行間距再除以2分別放在內容區上面和下面形成了行內框(見圖:1-2)。

img元素是乙個替換元素,替換元素會形成乙個內容區,並且行高不能作用於替換元素,所以對於替換元素來說不存在行間距這個東西。那麼替換元素內容區域的高度是咋計算的?計算方式和非替換元素計算方式不同,不僅有替換原宿自身寬高還包括了padding,border和margin的值。我們都知道非替換元素垂直方向margin,padding和border是不佔位置的,但是替換元素是佔位置的(見圖:1-3)。

行框中存在了上面幾個元素(不是指的標籤),那麼怎麼計算行框所佔據的高度?行框會計算,基線與行框最高點,和行框最低點距離即可。

通過這個描述就能看出來,line-height只能表示乙個行的最小高度,不是乙個行的高度(見圖:1-4)。

基線位置是使用的字型決定的,一般是小寫字母x的下邊緣。

行內格式化完成。

格式化,強調 數值格式化

聚合函式返回的的數值型別的值有個特點就是沒有被格式化。通過前面的帶 sum 聚合函式的示例,我們可以看到這一點 注意合計值 命令,或者在物件檢視器中選中 displayformat 屬性。在上節的示例中,格式化操作是針對一物件或物件內的表示式,在物件內僅有乙個表示式時它還能正常工作,不過當物件內不有...

python 格式化和format格式化

格式 name flags width precision typecode name 可選,用於選擇指定的key flags 可選,可提供的值有 右對齊,整數前加正號,負數前加負號 左對齊,正數錢無符號,負數前加負號 空格 右對齊 正數前加空格,負數前加負號 0 右對齊,正數前無符號,負數前加負號...

塊元素和行內元素 文字格式化標籤

在html頁面中建立一條水平線。可以在視覺上將文件分隔成各個部分。1.align 水平對齊方式,預設居中 2.width 水平線的長度,可取畫素 px 和百分比 3.size 水平線的高度 4.color 顏色 示例 使水平線在頁面中間顯示,它的寬度為頁面的50 hr align center wi...