網頁制作之css盒模型基礎

一、盒模型概述

在“CSS盒子模型”理論中，所有頁面中的元素都可以看成一個盒子，并且占據著一定的頁面空間。

盒子模型是由content（內容）、padding（內邊距）、margin（外邊距）和border（邊框）這四個屬性組成的。

屬性我們可以把它轉移到我們日常生活中的盒子（箱子）來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性。

一個頁面由很多這樣的盒子組成，這些盒子之間會互相影響，因此掌握盒子模型需要從兩個方面來理解：一是理解單獨一個盒子的內部結構，二是理解多個盒子之間的相互關系。

二、標準盒模型結構圖

三、盒模型屬性

border （邊框）元素邊框

margin （外邊距）用于定義頁面中元素與元素之間的距離

padding （內邊距）用于定義內容與邊框之間的距離

content （內容）可以是文字或圖片

1、內容區

內容區是CSS盒子模型的中心，它呈現了盒子的主要信息內容，這些內容可以是文本、圖片等多種類型。內容區是盒子模型必備的組成部分，其他的3部分都是可選的。

內容區有3個屬性：width、height和overflow。使用width和height屬性可以指定盒子內容區的高度和寬度。在這里注意一點，width和height這兩個屬性是針對內容區而言，并不包括padding部分。

當內容信息太多時，超出內容區所占范圍時，可以使用overflow溢出屬性來指定處理方法。對于overflow這個屬性，我們在后面會詳細講解到。

2、內邊距

內邊距，指的是內容區和邊框之間的空間，可以被看做是內容區的背景區域。

關于內邊距的屬性有4種，即padding-top、padding-bottom、padding-left、padding-right以及綜合了以上4個方向的簡潔內邊距屬性padding。

3、邊框

在CSS盒子模型中，邊框跟我們之前學過的邊框是一樣的。

邊框屬性有border-width、border-style、border-color以及綜合了3類屬性的快捷邊框屬性border。

其中border-width指定邊框的寬度，border-style指定邊框類型，border-color指定邊框的顏色。

“border-width:1px;border-style:solid;border-color:gray;”等價于“border:1px solid gray;”。

4、外邊距

外邊距，指的是兩個盒子之間的距離，它可能是子元素與父元素之間的距離，也可能是兄弟元素之間的距離。

外邊距使得元素之間不必緊湊地連接在一起，是CSS布局的一個重要手段。

外邊距的屬性也有4種，即margin-top、margin-bottom、margin-left、margin-right以及綜合了以上4個方向的簡潔內邊距屬性margin。

5.屬性的簡寫形式：

方法是按照規定的順序，給出2個、3個或者4個屬性值，它們的含義將有所區別，具體含義如下：

* 如果給出2個屬性值，前者表示上下邊框的屬性，后者表示左右邊框的屬性，如padding:20px 30px;/*上下、左右*/；

*如果給出3個屬性值，前者表示上邊框的屬性，中間的數值表示左右邊框的屬性，后者表示下邊框的屬性，如padding:30px 20px 10px;/*上、左右、下*/；

*如果給出4個屬性值，依次表示上、右、下、左邊框的屬性，即順時針排序，如padding:30px 20px 10px 40px;/*上、右、下、左*/。

課后練習：

Web前端開發-CSS入門干貨01 和Web前端開發-CSS入門干貨02介紹了CSS重要基礎概念選擇器和字體系列、文本系列、背景系列樣式。

其中字體、文本、背景等樣式的設置可以看作是對元素內容的修飾；而網頁的布局是對元素和元素之間關系的修飾，其中重要的手段便是距離，從而引出單個元素的盒子模型，以及元素之間的浮動、定位方式。

1.盒子模型

HTML中所有元素都可以看成一個盒子，從內到外包括實際內容（如100x50占據的空間）、內邊距（padding）、邊框（border）、外邊距（margin）四部分，這些盒子的組成都是元素的樣式。

內邊距是指實際內容到邊框的距離（分為上下左右四個分量），外邊距是指元素的邊框到另一個元素的邊框的距離（也分為上下左右四個分量），邊框是線（線也是有寬度的）。

（1）盒子模型對于所有瀏覽器都是通用的嗎？

并不是，實際上CSS中的盒子模型（Box model）分為兩種：W3C標準盒子模型和IE標準盒子模型。

大多數的瀏覽器都采用W3C標準盒子模型，然而IE5.5及更早的版本使用的是IE盒模型，IE6及其以上的版本在標準兼容模式下使用的是W3C的盒模型標準，所以如果瀏覽器使用IE內核但不是兼容模式下的話，該瀏覽器采用的還有可能是IE標準盒子模型。

（2）W3C標準盒子模型和IE標準盒子模型的區別

W3C標準盒子模型：元素寬度 = width+padding(內邊距)+border(邊框)+margin(外邊距)；

IE標準盒子模型：元素寬度 = width+margin(外邊距)，即width=實際內容寬度+padding(內邊距)+border(邊框)

（3）如何查看當前瀏覽器采用的是哪種盒子模型呢？

直接新建一個html文件，在body中新建一個div標簽，然后設置其樣式如下，通過瀏覽器查看盒子模型參數，便可以確定在該html文檔中采用的盒子模型。

div {
      background-color: chocolate;
      width: 100px;
      height: 100px;
      padding: 10px;
       border: 2px solid red;
 }

（4）如何通過設置樣式更改盒子模型呢？

在CSS3中提供了box-sizing樣式，

1）box-sizing:content-box; 將采用W3C標準的盒子模型

2）box-sizing:border-box; 將采用IE標準的盒子模型

3）box-sizing:inherit; 規定應從父元素繼承 box-sizing 屬性的值。

（5）對于塊級元素和行內元素，盒子模型是否有區別？

對于塊級元素盒子模型各項設置都有效，對于行內元素

1）行內元素可以設置padding，但是垂直方向padding無效

2）行內元素可以設置border，但是垂直方向的border無效

3）行內元素可以設置margin，但是垂直方向的margin無效

2.盒子模型中各項樣式

（1）內邊距（padding）

1）包括四個屬性：左內邊距、右內邊距、上內邊距、下內邊距；padding-left、padding-right、padding-top、padding-bottom。

2）內邊距樣式復合式寫法

（2）邊框（border）

1）包括三個屬性：邊框寬度、邊框樣式、邊框顏色；border-width、border-style、border-color。

2）邊框樣式復合式寫法，三個屬性沒有順序：

border: 1px  solid   red；

3）邊框的四條邊單獨設置樣式

上邊框（border-top）、下邊框（border-bottom）、左邊框（border-left）、右邊框（border-right）

4）應用例子

在表格邊框中，為避免相鄰單元格的邊框疊加變粗，與整體樣式不符，可以利用border-collasps:collasps樣式；其可以將單元格相鄰邊框進行合并，而只顯示一個邊框的寬度。

（3）外邊距（margin）

1）包括四個屬性：左外邊距、右外邊距、上外邊距、下外邊距；margin-left、margin-right、margin-top、margin-bottom。

2）外邊距樣式復合式寫法同內邊距樣式復合式寫法

3）典型應用

外邊距可以讓塊級元素水平居中，需要滿足兩個條件：

a）塊級元素需要指定寬度；

b）塊級元素左右的外邊距都設置為auto，其寫法：

margin-left:auto;margin-right:auto;或者margin:auto;或者margin: 0 auto;

對于行內元素或者行內塊元素，可以為其父元素設置text-align:center樣式。

（4）CSS3中新增的樣式

以下在IE9及以上版本中有效

1）圓角邊框

語法：border-radius:length;

2）盒子陰影

語法：box-shadow:h-shadow v-shadow blur spread color inset;

3）文字陰影

語法：text-shadow:h-shadow v-shadow blur color

要注意的是html所有元素都可以看作盒子，可以用盒子模型進行理解。

#學問分亨官##閃光時刻二期##閃光時刻第二期主題征文#

先開篇之前先提個問題：

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

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

這個問題的答案，魚頭會在文章中給出，歡迎大家帶著這個問題往下翻閱，如果已經知道答案，也可以看看跟大家所知道的答案是否一致。

CSS的邏輯屬性

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

對于前端來說，我們一直習慣于使用top 、 right 、 bottom、 left來定義我們的HTML元素，這跟我們物理上的概念是一致的。但是對于CSS這個原本是為了服務于圖文展示才誕生的語言來說，其實是不匹配的，為什么這么說？

writing-mode

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

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

writing-mode: horizontal-tb;

writing-mode: horizontal-tb 定義了內容從左到右水平流動，從上到下垂直流動。下一條水平線位于上一條線下方。

writing-mode: vertical-rl;

writing-mode: vertical-rl 定義了內容從上到下垂直流動，從右到左水平流動。下一條垂直線位于上一行的左側。

writing-mode: vertical-lr;

writing-mode: vertical-lr定義了內容從上到下垂直流動，從左到右水平流動。下一條垂直線位于上一行的右側。

writing-mode: sideways-rl; (僅Firefox41+實現)

writing-mode: sideways-rl定義了內容從上到下垂直流動，所有字形，甚至是垂直腳本中的字形，都設置在右側。

writing-mode: sideways-lr;(僅Firefox41+實現)

writing-mode: sideways-lr內容從上到下垂直流動，所有字形，甚至是垂直腳本中的字形，都設置在左側。

源碼如下：

.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>

圖示如下：

從上圖可以發現，當我們設置了padding-right: 100px;的時候，不同的書寫規則，展示效果是不一樣的。

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

在最開始的時候，HTML與CSS只服務于英語國家，但是隨著互聯網的發展，逐漸各個不同書寫規則的國家也開始流行了起來。

我們原來的CSS邏輯屬性是按照物理邏輯，從上(top)、右(right)、下(bottom)、左(left)劃分的。

那么按著這個規則去修改文本屬性時，就會出現上述這種不符合語法規則的狀態。

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

新舊邏輯屬性對比

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

我們首先來看看新舊有的邏輯屬性的對比圖示：

左舊右新

通過上圖可以得知新舊邏輯屬性對應關系如下：

舊的邏輯屬性新的邏輯屬性 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。

對于不同語系的國家，書寫順序會可能有很大的差異，意思就是block跟inline的方向不同。例如：

在英語國家 padding-inline-start = padding-left
在阿拉伯padding-inline-start = padding-right
在日本 padding-inline-start = padding-top

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

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*/
}
/* 新的邏輯屬性支持簡寫 */
.popup{
   position:fixed;
   inset:0 0 0 0;   /*top, right, bottom, left - in English*/
}

CSS浮動

浮動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，還有一個排版屬性就是direction，跟writing-mode類似，不一樣的是writing-mode是控住網頁布局方向的，而direction是控制文本對齊方向的。屬性如下：

direction: ltr;

默認值，讓文本和其他元素從左到右顯示。

direction: rtl;

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

吐槽一下，看到這里的切圖仔們，抓緊跑路重構吧，等哪天此屬性正式被啟用，就真的GG了。不過我想應該會立個屬性來選擇性開啟物理屬性還是邏輯屬性，不然這對前端來說將會是一場災難！

CSS的盒子模型

基礎盒模型(CSS basic box model)

當瀏覽器對一個render tree進行渲染時，瀏覽器的渲染引擎就會根據基礎盒模型(CSS basic box model)，將所有元素劃分為一個個矩形的盒子，這些盒子的外觀，屬性由CSS來決定。

我們在瀏覽器控制臺輸入如下代碼就可以看到頁面的每一個元素都是由一個矩形來包裹的，這些就是盒子

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

圖示如下：

每個盒子都由四個部分組成：

內容(content)

盒子(box) 的內容，顯示標簽內一切的文本，圖案或者別的內容。

內邊距(padding)

盒子(box) 內的填充物，樣式為透明，主要負責擴展盒子內區域大小。

外邊距(margin)

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

邊框(border)

盒子(box) 的邊界，負責隔離外邊距以及內邊距。

盒子模型的值

盒子模型一共有三個值：

content-box

content-box為標準的盒子模型。盒子的width跟height只包括盒子本身的width與height屬性。

計算法則：

width = width

height = height

border-box

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

計算法則：

width = width + border + padding

height = height + border + padding

padding-box

padding-box為非標準屬性，曾經在Firefox中實現過，但是在Firefox 50中被刪除。padding-box的width和height 屬性包括內容和內邊距，但是不包括邊框和外邊距。

圖示：

這里吐槽一下，不知道為何沒有margin-box，雖然并沒有太大意義，當真實現了效果估計也很詭異，但是作為一個強迫癥患者晚期，少了一個屬性總感覺好不舒服。

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

CSS的視覺格式化模型(visual formatting model) 是根據 基礎盒模型(CSS basic box model) 將 文檔(doucment) 中的元素轉換一個個盒子的實際算法。
官方說法就是：它規定了用戶端在媒介中如何處理文檔樹( document tree )。

每個盒子的布局由以下因素決定：

盒子的尺寸
盒子的類型：行內盒子 (inline)、行內級盒子 (inline-level)、原子行內級盒子 (atomic inline-level)、塊盒子 (block)
定位：普通流、浮動、絕對定位
文檔樹中當前盒子的子元素 或 兄弟元素
視口(viewport) 的尺寸和位置
盒子內部圖片的尺寸
其他某些外部因素

視覺格式化模型(visual formatting model) 的計算，都取決于一個矩形的邊界，這個矩形，被稱作是 包含塊( containing block ) 。一般來說，(元素)生成的框會扮演它子孫元素包含塊的角色；我們稱之為：一個(元素的)框為它的子孫節點建造了包含塊。包含塊是一個相對的概念。