web前端入門到實(shí)戰(zhàn)：CSS的邏輯屬性與盒子模型

首先開(kāi)篇之前先提個(gè)問(wèn)題：

為什么Flex box跟Grid box的是以start、end為排列規(guī)則，而不是常規(guī)的top 、right 、bottom 跟left？

先不要急著往下翻，大家先思考一下。

這個(gè)問(wèn)題的答案，魚頭會(huì)在文章中給出，歡迎大家?guī)е@個(gè)問(wèn)題往下翻閱，如果已經(jīng)知道答案，也可以看看跟大家所知道的答案是否一致。

CSS的邏輯屬性

2017年5月18日，W3C的 CSS工作組(CSS Working Group) 發(fā)布了 CSS邏輯屬性和值(CSS Logical Properties and Values Level 1) 的首份工作草案(First Public Working Draft)。不同的書寫模式(writing mode)中，可以抽取出共性的抽象概念(如開(kāi)始位置，或行)，這些邏輯抽象概念需要在不同書寫模式下映射到左或右、上或下等物理的概念上。一些CSS布局可能依賴這些共性的邏輯概念。該 CSS 模塊給出了用于通過(guò)邏輯方式(而不是基于物理坐標(biāo)、書寫方向和維映射等)控制布局的邏輯屬性和取值(logical properties and values)。這個(gè)模塊來(lái)源于CSS21中關(guān)于邏輯屬性和值的特性。

對(duì)于前端來(lái)說(shuō)，我們一直習(xí)慣于使用top 、 right 、 bottom、 left來(lái)定義我們的HTML元素，這跟我們物理上的概念是一致的。但是對(duì)于CSS這個(gè)原本是為了服務(wù)于圖文展示才誕生的語(yǔ)言來(lái)說(shuō)，其實(shí)是不匹配的，為什么這么說(shuō)？

writing-mode

writing-mode：定義了文本水平或垂直排布以及在塊級(jí)元素中文本的行進(jìn)方向。

writing-mode一共有以下5個(gè)改變HTML文本書寫規(guī)則的值(還有幾個(gè)是用在SVG上的，本文不予討論)：

writing-mode: horizontal-tb;

writing-mode: horizontal-tb 定義了內(nèi)容從左到右水平流動(dòng)，從上到下垂直流動(dòng)。下一條水平線位于上一條線下方。

writing-mode: vertical-rl;

writing-mode: vertical-rl 定義了內(nèi)容從上到下垂直流動(dòng)，從右到左水平流動(dòng)。下一條垂直線位于上一行的左側(cè)。

writing-mode: vertical-lr;

writing-mode: vertical-lr定義了內(nèi)容從上到下垂直流動(dòng)，從左到右水平流動(dòng)。下一條垂直線位于上一行的右側(cè)。

writing-mode: sideways-rl; (僅Firefox41+實(shí)現(xiàn))

writing-mode: sideways-rl定義了內(nèi)容從上到下垂直流動(dòng)，所有字形，甚至是垂直腳本中的字形，都設(shè)置在右側(cè)。

writing-mode: sideways-lr;(僅Firefox41+實(shí)現(xiàn))

writing-mode: sideways-lr內(nèi)容從上到下垂直流動(dòng)，所有字形，甚至是垂直腳本中的字形，都設(shè)置在左側(cè)。

源碼如下：

.wm-htb {
    writing-mode: horizontal-tb;
}
.wm-vrl {
    writing-mode: vertical-rl;
}
.wm-vlr {
    writing-mode: vertical-lr;
}
.wm-srl {
    writing-mode: sideways-rl;
}
.wm-slr {
    writing-mode: sideways-lr;
}
.text-content {
    width: 200px;
    padding: 20px;
    border: 1px solid;
    display: inline-block;
    vertical-align: top;
    padding-right: 100px;
}

<div class="text-content wm-htb">writing-mode: horizontal-tb;</div>
<div class="text-content wm-vrl">writing-mode: vertical-rl;</div>
<div class="text-content wm-vlr">writing-mode: vertical-lr;</div>
<div class="text-content wm-srl">writing-mode: sideways-rl;</div>
<div class="text-content wm-slr">writing-mode: sideways-lr;</div>
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，PDF）

圖示如下：

從上圖可以發(fā)現(xiàn)，當(dāng)我們?cè)O(shè)置了padding-right: 100px;的時(shí)候，不同的書寫規(guī)則，展示效果是不一樣的。

在最開(kāi)始的時(shí)候，HTML與CSS只服務(wù)于英語(yǔ)國(guó)家，但是隨著互聯(lián)網(wǎng)的發(fā)展，逐漸各個(gè)不同書寫規(guī)則的國(guó)家也開(kāi)始流行了起來(lái)。

我們?cè)瓉?lái)的CSS邏輯屬性是按照物理邏輯，從上(top)、右(right)、下(bottom)、左(left)劃分的。

那么按著這個(gè)規(guī)則去修改文本屬性時(shí)，就會(huì)出現(xiàn)上述這種不符合語(yǔ)法規(guī)則的狀態(tài)。

大概也是基于這個(gè)原因，所以W3C發(fā)布了新的邏輯屬性與值。

新舊邏輯屬性對(duì)比

CSS新舊邏輯屬性是完全不同的兩種模型。

我們首先來(lái)看看新舊有的邏輯屬性的對(duì)比圖示：

左舊右新

通過(guò)上圖可以得知新舊邏輯屬性對(duì)應(yīng)關(guān)系如下：

舊的邏輯屬性 新的邏輯屬性
margin-top margin-block-start
margin-right margin-inline-end
margin-bottom margin-block-end
margin-left margin-inline-start
border-top border-block-start
border-right border-inline-end
border-bottom border-block-end
border-left border-inline-start
padding-top padding-block-start
padding-right padding-inline-end
padding-bottom padding-block-end
padding-left padding-inline-start
width inline-size
height block-size

由上表可以得知，把Y軸方向的屬性都改為了block，X軸方向的屬性都改為了inline。

對(duì)于不同語(yǔ)系的國(guó)家，書寫順序會(huì)可能有很大的差異，意思就是block跟inline的方向不同。例如：

  • 在英語(yǔ)國(guó)家 padding-inline-start = padding-left
  • 在阿拉伯padding-inline-start = padding-right
  • 在日本 padding-inline-start = padding-top

這就意味著舊的邏輯屬性，在某些國(guó)家里會(huì)變得不合常理。

CSS定位

CSS的定位屬性變化如下：

舊的邏輯屬性 新的邏輯屬性
top inset-block-start
bottom inset-block-end
left inset-inline-start
right inset-inline-end

例子如下：

/* 舊的邏輯屬性 */
.popup{
  position:fixed;  
  top:0;
  bottom:0;
  left:0;
  right:0;
}
/* 新的邏輯屬性 */
.popup{
   position:fixed;
   inset-block-start:0;  /*top - in English*/
   inset-block-end:0;    /*bottom - in English*/
   inset-inline-start:0; /*left - in English*/
   inset-inline-end:0;   /*right - in English*/
}
/* 新的邏輯屬性支持簡(jiǎn)寫 */
.popup{
   position:fixed;
   inset:0 0 0 0;   /*top, right, bottom, left - in English*/
}
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，PDF）

CSS浮動(dòng)

浮動(dòng)float的屬性也改了。

舊的邏輯屬性 新的邏輯屬性
float: left float: inline-start
float: right float: inline-end

text-align

文本text-align的屬性也改了。

舊的邏輯屬性 新的邏輯屬性
text-align: left text-align: start
text-align: right text-align: end

direction

除了writing-mode，還有一個(gè)排版屬性就是direction，跟writing-mode類似，不一樣的是writing-mode是控住網(wǎng)頁(yè)布局方向的，而direction是控制文本對(duì)齊方向的。屬性如下：

direction: ltr;

默認(rèn)值，讓文本和其他元素從左到右顯示。

direction: rtl;

讓文本和其他元素從右到左顯示。

吐槽一下，看到這里的切圖仔們，抓緊 跑路 重構(gòu)吧，等哪天此屬性正式被啟用，就真的GG了。不過(guò)我想應(yīng)該會(huì)立個(gè)屬性來(lái)選擇性開(kāi)啟物理屬性還是邏輯屬性，不然這對(duì)前端來(lái)說(shuō)將會(huì)是一場(chǎng)災(zāi)難！

CSS的盒子模型

基礎(chǔ)盒模型(CSS basic box model)

當(dāng)瀏覽器對(duì)一個(gè)render tree進(jìn)行渲染時(shí)，瀏覽器的渲染引擎就會(huì)根據(jù)基礎(chǔ)盒模型(CSS basic box model)，將所有元素劃分為一個(gè)個(gè)矩形的盒子，這些盒子的外觀，屬性由CSS來(lái)決定。

我們?cè)跒g覽器控制臺(tái)輸入如下代碼就可以看到頁(yè)面的每一個(gè)元素都是由一個(gè)矩形來(lái)包裹的，這些就是盒子

$$('*').forEach(e => {
  e.style.border = '1px solid';
})

圖示如下：

每個(gè)盒子都由四個(gè)部分組成：

內(nèi)容(content)

盒子(box) 的內(nèi)容，顯示標(biāo)簽內(nèi)一切的文本，圖案或者別的內(nèi)容。

內(nèi)邊距(padding)

盒子(box) 內(nèi)的填充物，樣式為透明，主要負(fù)責(zé)擴(kuò)展盒子內(nèi)區(qū)域大小。

外邊距(margin)

盒子(box) 外部的區(qū)域，樣式為透明，負(fù)責(zé)隔離相鄰的元素。

邊框(border)

盒子(box) 的邊界，負(fù)責(zé)隔離外邊距以及內(nèi)邊距。

盒子模型的值

盒子模型一共有三個(gè)值：

content-box

content-box為標(biāo)準(zhǔn)的盒子模型。盒子的width跟height只包括盒子本身的width與height屬性。

計(jì)算法則：

width = width

height = height

border-box

border-box為盒子模型可選的屬性之一。盒子的width跟height包括content、padding跟border。這也是當(dāng)文檔處于 Quirks模式 時(shí)Internet Explorer使用的盒模型。

計(jì)算法則：

width = width + border + padding

height = height + border + padding

padding-box

padding-box為非標(biāo)準(zhǔn)屬性，曾經(jīng)在Firefox中實(shí)現(xiàn)過(guò)，但是在Firefox 50中被刪除。padding-box的width和height 屬性包括內(nèi)容和內(nèi)邊距，但是不包括邊框和外邊距。

圖示：

這里吐槽一下，不知道為何沒(méi)有margin-box，雖然并沒(méi)有太大意義，當(dāng)真實(shí)現(xiàn)了效果估計(jì)也很詭異，但是作為一個(gè)強(qiáng)迫癥患者晚期，少了一個(gè)屬性總感覺(jué)好不舒服。

視覺(jué)格式化模型(visual formatting model)

CSS的視覺(jué)格式化模型(visual formatting model) 是根據(jù) 基礎(chǔ)盒模型(CSS basic box model) 將 文檔(doucment) 中的元素轉(zhuǎn)換一個(gè)個(gè)盒子的實(shí)際算法。

官方說(shuō)法就是：它規(guī)定了用戶端在媒介中如何處理文檔樹(shù)( document tree )。

每個(gè)盒子的布局由以下因素決定：

  • 盒子的尺寸
  • 盒子的類型：行內(nèi)盒子 (inline)、行內(nèi)級(jí)盒子 (inline-level)、原子行內(nèi)級(jí)盒子 (atomic inline-level)、塊盒子 (block)
  • 定位：普通流、浮動(dòng)、絕對(duì)定位
  • 文檔樹(shù)中當(dāng)前盒子的子元素 或 兄弟元素
  • 視口(viewport) 的尺寸 和位置
  • 盒子內(nèi)部圖片的尺寸
  • 其他某些外部因素

視覺(jué)格式化模型(visual formatting model) 的計(jì)算，都取決于一個(gè)矩形的邊界，這個(gè)矩形，被稱作是 包含塊( containing block ) 。 一般來(lái)說(shuō)，(元素)生成的框會(huì)扮演它子孫元素包含塊的角色；我們稱之為：一個(gè)(元素的)框?yàn)樗淖訉O節(jié)點(diǎn)建造了包含塊。包含塊是一個(gè)相對(duì)的概念。

例子如下：

<div>
    <table>
        <tr>
            <td>hi</td>
        </tr>
    </table>
</div>
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，PDF）

以上代碼為例，div 和 table 都是包含塊。div 是 table 的包含塊，同時(shí) table 又是 td 的包含塊，不是絕對(duì)的。

盒子的生成

盒子的生成是 CSS視覺(jué)格式化模型 的一部分，用于從文檔元素生成盒子。盒子的類型取決于CSS display 屬性。

  • 塊級(jí)元素

    • 當(dāng)元素的display 為 block、list-item 或 table 時(shí)，它就是塊級(jí)元素。

  • 塊級(jí)盒子

    • 塊級(jí)盒子用于描述它與父、兄弟元素之間的關(guān)系。
    • 每個(gè)塊級(jí)盒子都會(huì)參與塊格式化上下文（block formatting context）的創(chuàng)建。
    • 每個(gè)塊級(jí)元素都會(huì)至少生成一個(gè)塊級(jí)盒子，即主塊級(jí)盒子（principal block-level box）
    • 主塊級(jí)盒子包含由后代元素生成的盒子以及內(nèi)容，同時(shí)它也會(huì)參與定位方案。
    • 一個(gè)同時(shí)是塊容器盒子的塊級(jí)盒子稱為塊盒子（block box）。

  • 匿名盒子

    • 某些情況下需要進(jìn)行視覺(jué)格式化時(shí)，需要添加一些增補(bǔ)性的盒子，這些盒子不能被CSS 選擇器選中，也就是所有可繼承的 CSS 屬性值都為 inherit ，而所有不可繼承的 CSS 屬性值都為 initial。因此稱為匿名盒子(anonymous boxes)。

  • 行內(nèi)元素

    • 當(dāng)元素的display 為 inline、inline-block 或 inline-table 時(shí)，它就是行內(nèi)級(jí)元素。
    • 顯示時(shí)可以與其他行內(nèi)級(jí)內(nèi)容一起顯示為多行。

  • 行內(nèi)盒子

    • 行內(nèi)級(jí)元素會(huì)生成行內(nèi)級(jí)盒子，該盒子同時(shí)會(huì)參與行內(nèi)格式化上下文（inline formatting context）的創(chuàng)建。

  • 匿名行內(nèi)盒子

    • 類似于塊盒子，CSS引擎有時(shí)候也會(huì)自動(dòng)創(chuàng)建一些行內(nèi)盒子。這些行內(nèi)盒子無(wú)法被選擇符選中，因此是匿名的，它們從父元素那里繼承那些可繼承的屬性，其他屬性保持默認(rèn)值 initial。

  • 行盒子

    • 行盒子由行內(nèi)格式化上下文創(chuàng)建，用來(lái)顯示一行文本。在塊盒子內(nèi)部，行盒子總是從塊盒子的一邊延伸到另一邊（譯注：即占據(jù)整個(gè)塊盒子的寬度）。當(dāng)有浮動(dòng)元素時(shí)，行盒子會(huì)從向左浮動(dòng)的元素的右邊緣延伸到向右浮動(dòng)的元素的左邊緣。

  • run-in 盒子（在CSS 2.1的標(biāo)準(zhǔn)中移除了）

    • run-in盒子可以通過(guò)display: run-in來(lái)設(shè)置，它既可以是塊盒子，又可以是行內(nèi)盒子，這取決于它后面的盒子的類型。

定位規(guī)則

一旦形成了盒子，CSS引擎就需要定位它們來(lái)完成布局。

定位所使用的規(guī)則如下：

  • 普通流

    • 在普通流中，盒子會(huì)依次放置。
    • 在塊格式化上下文（block formatting context）中，盒子在垂直方向依次排列。
    • 在行內(nèi)格式化上下文（inline formatting context） 中，盒子則水平擺列。

  • 浮動(dòng)：當(dāng)一個(gè)盒子的float不為none，并且position為static或relative時(shí)，該盒子為浮動(dòng)定位。

    • float: left：盒子會(huì)定位到當(dāng)前行盒子的開(kāi)始位置（左側(cè)）。
    • float: right：盒子會(huì)定位到當(dāng)前行盒子的尾部位置（右側(cè)）。

  • 絕對(duì)定位：如果元素的position 為 absolute 或 fixed，該元素為絕對(duì)定位。

    • 在絕對(duì)定位中，盒子會(huì)完全從當(dāng)前流中移除，并且不會(huì)再與其有任何聯(lián)系。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容