網(wǎng)頁(yè)制作之css盒模型基礎(chǔ)

一、盒模型概述

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

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

屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶樱ㄏ渥樱﹣?lái)理解，日常生活中所見(jiàn)的盒子也就是能裝東西的一種箱子，也具有這些屬性。

一個(gè)頁(yè)面由很多這樣的盒子組成，這些盒子之間會(huì)互相影響，因此掌握盒子模型需要從兩個(gè)方面來(lái)理解：一是理解單獨(dú)一個(gè)盒子的內(nèi)部結(jié)構(gòu)，二是理解多個(gè)盒子之間的相互關(guān)系。

二、標(biāo)準(zhǔn)盒模型結(jié)構(gòu)圖

三、盒模型屬性

border （邊框）元素邊框

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

padding （內(nèi)邊距）用于定義內(nèi)容與邊框之間的距離

content （內(nèi)容）可以是文字或圖片

1、內(nèi)容區(qū)

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

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

當(dāng)內(nèi)容信息太多時(shí)，超出內(nèi)容區(qū)所占范圍時(shí)，可以使用overflow溢出屬性來(lái)指定處理方法。對(duì)于overflow這個(gè)屬性，我們?cè)诤竺鏁?huì)詳細(xì)講解到。

2、內(nèi)邊距

內(nèi)邊距，指的是內(nèi)容區(qū)和邊框之間的空間，可以被看做是內(nèi)容區(qū)的背景區(qū)域。

關(guān)于內(nèi)邊距的屬性有4種，即padding-top、padding-bottom、padding-left、padding-right以及綜合了以上4個(gè)方向的簡(jiǎn)潔內(nèi)邊距屬性padding。

3、邊框

在CSS盒子模型中，邊框跟我們之前學(xué)過(guò)的邊框是一樣的。

邊框?qū)傩杂衎order-width、border-style、border-color以及綜合了3類屬性的快捷邊框?qū)傩詁order。

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

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

4、外邊距

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

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

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

5.屬性的簡(jiǎn)寫(xiě)形式：

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

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

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

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

課后練習(xí)：

Web前端開(kāi)發(fā)-CSS入門(mén)干貨01 和Web前端開(kāi)發(fā)-CSS入門(mén)干貨02介紹了CSS重要基礎(chǔ)概念選擇器和字體系列、文本系列、背景系列樣式。

其中字體、文本、背景等樣式的設(shè)置可以看作是對(duì)元素內(nèi)容的修飾；而網(wǎng)頁(yè)的布局是對(duì)元素和元素之間關(guān)系的修飾，其中重要的手段便是距離，從而引出單個(gè)元素的盒子模型，以及元素之間的浮動(dòng)、定位方式。

1.盒子模型

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

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

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

并不是，實(shí)際上CSS中的盒子模型（Box model）分為兩種：W3C標(biāo)準(zhǔn)盒子模型和IE標(biāo)準(zhǔn)盒子模型。

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

（2）W3C標(biāo)準(zhǔn)盒子模型和IE標(biāo)準(zhǔn)盒子模型的區(qū)別

W3C標(biāo)準(zhǔn)盒子模型：元素寬度 = width+padding(內(nèi)邊距)+border(邊框)+margin(外邊距)；

IE標(biāo)準(zhǔn)盒子模型：元素寬度 = width+margin(外邊距)，即width=實(shí)際內(nèi)容寬度+padding(內(nèi)邊距)+border(邊框)

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

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

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

（4）如何通過(guò)設(shè)置樣式更改盒子模型呢？

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

1）box-sizing:content-box; 將采用W3C標(biāo)準(zhǔn)的盒子模型

2）box-sizing:border-box; 將采用IE標(biāo)準(zhǔn)的盒子模型

3）box-sizing:inherit; 規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值。

（5）對(duì)于塊級(jí)元素和行內(nèi)元素，盒子模型是否有區(qū)別？

對(duì)于塊級(jí)元素盒子模型各項(xiàng)設(shè)置都有效，對(duì)于行內(nèi)元素

1）行內(nèi)元素可以設(shè)置padding，但是垂直方向padding無(wú)效

2）行內(nèi)元素可以設(shè)置border，但是垂直方向的border無(wú)效

3）行內(nèi)元素可以設(shè)置margin，但是垂直方向的margin無(wú)效

2.盒子模型中各項(xiàng)樣式

（1）內(nèi)邊距（padding）

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

2）內(nèi)邊距樣式復(fù)合式寫(xiě)法

（2）邊框（border）

1）包括三個(gè)屬性：邊框?qū)挾取⑦吙驑邮健⑦吙蝾伾?；border-width、border-style、border-color。

2）邊框樣式復(fù)合式寫(xiě)法，三個(gè)屬性沒(méi)有順序：

border: 1px  solid   red；

3）邊框的四條邊單獨(dú)設(shè)置樣式

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

4）應(yīng)用例子

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

（3）外邊距（margin）

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

2）外邊距樣式復(fù)合式寫(xiě)法同內(nèi)邊距樣式復(fù)合式寫(xiě)法

3）典型應(yīng)用

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

a）塊級(jí)元素需要指定寬度；

b）塊級(jí)元素左右的外邊距都設(shè)置為auto，其寫(xiě)法：

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

對(duì)于行內(nèi)元素或者行內(nèi)塊元素，可以為其父元素設(shè)置text-align:center樣式。

（4）CSS3中新增的樣式

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

1）圓角邊框

語(yǔ)法：border-radius:length;

2）盒子陰影

語(yǔ)法：box-shadow:h-shadow v-shadow blur spread color inset;

3）文字陰影

語(yǔ)法：text-shadow:h-shadow v-shadow blur color

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

#學(xué)問(wèn)分亨官##閃光時(shí)刻二期##閃光時(shí)刻第二期主題征文#

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

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

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

這個(gè)問(wèn)題的答案，魚(yú)頭會(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)。不同的書(shū)寫(xiě)模式(writing mode)中，可以抽取出共性的抽象概念(如開(kāi)始位置，或行)，這些邏輯抽象概念需要在不同書(shū)寫(xiě)模式下映射到左或右、上或下等物理的概念上。一些CSS布局可能依賴這些共性的邏輯概念。該 CSS 模塊給出了用于通過(guò)邏輯方式(而不是基于物理坐標(biāo)、書(shū)寫(xiě)方向和維映射等)控制布局的邏輯屬性和取值(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文本書(shū)寫(xiě)規(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>

圖示如下：

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

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

在最開(kāi)始的時(shí)候，HTML與CSS只服務(wù)于英語(yǔ)國(guó)家，但是隨著互聯(lián)網(wǎng)的發(fā)展，逐漸各個(gè)不同書(shū)寫(xiě)規(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ó)家，書(shū)寫(xiě)順序會(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)寫(xiě) */
.popup{
   position:fixed;
   inset:0 0 0 0;   /*top, right, bottom, left - in English*/
}

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ì)的概念。