深入css布局（1）—— 盒模型

在css的發(fā)展歷程中，有兩種版本的盒模型，一個叫IE盒模型（又叫怪異盒模型），一個叫W3C標(biāo)準(zhǔn)盒模型，在早期的微軟出的IE瀏覽器中采用的是自己的盒模型標(biāo)準(zhǔn)成為IE盒模型或者叫怪異盒模型(此模型只會出現(xiàn)在IE5.5及其更早的版本中。只要為文檔設(shè)置一個DOCTYPE，就會使得IE遵循標(biāo)準(zhǔn)兼容模式的方式工作

)。

?

IE5.5及更早的版本使用的是IE盒模型，后來微軟也慢慢轉(zhuǎn)向了W3C的標(biāo)準(zhǔn)，在IE6以后支持了W3C標(biāo)準(zhǔn)盒模型。在我們現(xiàn)在的主流瀏覽器里面默認(rèn)都是使用w3c標(biāo)準(zhǔn)盒模型。

?

1、css盒子模型概念

CSS css盒子模型 又稱框模型 (Box Model) ，包含了元素內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）幾個要素。

?????????????????????

1.1標(biāo)準(zhǔn)盒子模型

圖中最內(nèi)部的框是元素的實際內(nèi)容，也就是元素框，緊挨著元素框外部的是內(nèi)邊距padding，其次是邊框（border），然后最外層是外邊距（margin），整個構(gòu)成了框模型。通常我們設(shè)置的背景顯示區(qū)域，就是內(nèi)容、內(nèi)邊距、邊框這一塊范圍。而外邊距margin是透明的，不會遮擋周邊的其他元素。

元素框的總寬度 = 元素（element）的width + padding + margin +border；

元素框的總高度 = 元素（element）的height + padding +margin +border。

?

CSS中的寬（width）=內(nèi)容（content）的寬

CSS中的高（height）=內(nèi)容（content）的高

?

1.2 IE盒子模型

　CSS中的寬（width）=內(nèi)容（content）的寬+（border+padding）

　CSS中的高（height）=內(nèi)容（content）的高+（border+padding）

2、css 外邊距合并（疊加）

兩個上下方向相鄰的元素框垂直相遇時，外邊距會合并，合并后的外邊距的高度等于兩個發(fā)生合并的外邊距中較高的那個邊距值，如圖：

比較容易理解，所以在頁面中有時候遇到實際情況是需要考慮這個因素的。當(dāng)然外邊距合并其實也有存在的意義，如下圖：

需要注意的是：只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。行內(nèi)框、浮動框或絕對定位之間的外邊距不會合并。

?

注意點：許多瀏覽器都有自己默認(rèn)的margin和padding值，我們可以通過將元素的margin和padding設(shè)置為0來覆蓋原本的瀏覽器樣式。

?

* {

? margin: 0;

? padding: 0;

}

3、box-sizing屬性介紹

box-sizing屬性是用戶界面屬性里的一種，之所以介紹它，是因為這個屬性跟盒子模型有關(guān)，而且在css reset中有可能會用到它。

box-sizing : content-box|border-box|inherit;

(1)?content-box?,默認(rèn)值，可以使設(shè)置的寬度和高度值應(yīng)用到元素的內(nèi)容框。盒子的width只包含內(nèi)容。

　　即總寬度=margin+border+padding+width

(2)?border-box?, 設(shè)置的width值其實是除margin外的border+padding+element的總寬度。盒子的width包含border+padding+內(nèi)容

　 即總寬度=margin+width

很多CSS框架，都會對盒子模型的計算方法進行簡化。

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

?

關(guān)于border-box的使用：

1 一個box寬度為100%，又想要兩邊有內(nèi)間距，這時候用就比較好
2 全局設(shè)置 border-box 很好，首先它符合直覺，其次它可以省去一次又一次的加加減減，它還有一個關(guān)鍵作用——讓有邊框的盒子正常使用百分比寬度。

?

深入css布局（2）——元素分類

1.1塊級元素 & 行內(nèi)元素 & 行內(nèi)塊級元素

元素除了自己的盒模型外還有自己的分類。從元素的布局特性來分，主要可以分為三類元素：塊級元素，行內(nèi)元素，行內(nèi)塊級元素。

接下來看下他們的定義：

塊級元素：display屬性取block、table、flex、grid和list-item的元素。

行內(nèi)級元素：display屬性取inline的元素。

行內(nèi)塊級元素：display屬性取inline-block、inline-table、inline-flex和inline-grid的元素

?

每個元素初始都會帶有一些樣式屬性，例如：div默認(rèn)的display是block，span的display是inline。我們可以在css中設(shè)置他們的display屬性去改變他們的類型。

1.1.1塊級元素

?1.獨占一行顯示（width默認(rèn)為100%，height為0）；

2.可以設(shè)置尺寸屬性（width、height等）；

常見的塊級元素有：div、p、h1~h6、ul、li、ol、dd、dt、dl、table、hr、blockquote、address、pre、menu

1.1.2 行內(nèi)元素

1.一行可以顯示多個；

2. 元素的高度、寬度及頂部和底部邊距不可設(shè)置；

3. 元素的寬度就是它包含的文字或圖片的寬度，不可改變

4. ?內(nèi)聯(lián)元素之間的間距問題：當(dāng)行內(nèi)元素之間有“回車”、“tab”、“空格”時就會出現(xiàn)間隙。解決方法：寫在一行，之間不要有空格之類的符號。

?

常見的行內(nèi)元素有：span、img、input、a、label、button、select、textarea、sup、sub、abbr、s、i、em、u、strong、small

1.1.3行內(nèi)塊級元素

1、和其他元素都在一行上；（而塊狀元素是另起一行）

2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。

?

如果想讓一個元素可以設(shè)置寬度高度，又讓它以行內(nèi)形式顯示，我們可以設(shè)置display的值為inline-block。

?

在CSS中是有三種定位機制的：普通文檔流、浮動和絕對定位

?

深入css布局（3）—— 元素的定位與浮動

上篇我們講解了不同類型元素的特點，我們可以隨意的排列組合他們來達到我們想要的效果。但是他們都是基于一個二維平面的，如果我們想在布局中有遮擋，重疊之類的更豐富效果，我們就需要使用到定位和浮動的相關(guān)知識。

1.文檔流

文檔流就是按照頁面元素書寫的順序，將頁面元素按從左到右，從上至下的一般順序行排列。那么也就可以理解成我們剛才所說的一個二維平面的概念。

那么如果我想要實現(xiàn)更豐富的效果，就需要脫離文檔流，在一個新的平面上去顯示，這樣我們就可以在屏幕上有多個平面疊加顯示的效果了，那么這就是浮動和定位的工作了。

2.定位描述

用position屬性將一個元素相對于它或者它的祖先元素甚至是瀏覽器窗口通過top、left、right、bottom屬性進行偏移，根據(jù)position屬性的值，元素可以分為靜態(tài)定位元素static（默認(rèn)值）、相對定位元素relative、絕對定位元素absolute和固定定位元素fixed。

2.1相對定位

1.元素根據(jù)其在當(dāng)前文檔流所在位置作為參考系，進行偏移。

2.設(shè)置相對定位之后原來元素在文檔流中的位置會被空出來，不會被其他元素所占據(jù)。

2.2絕對定位

1.元素會將其帶有position為非static的祖先元素作為參考系進行偏移。

2.如果祖先元素里沒有帶有position為非static的，則會以body作為參考系。

3.定位后，元素脫離文檔流，不占據(jù)文檔流的位置，可以理解為漂浮在文檔流的上方，相對于上一個設(shè)置了定位的父級元素來進行定位，如果找不到，則相對于body元素進行定位。

?

2.3????? fixed固定定位

1. 固定的參照對像是可視窗口而并非是body或是父級元素，fixed定位的元素不會隨著窗口的滾動而滾動。

2.跟absolute定位一樣，定位后，原來在文檔流中占據(jù)的位置，會被其他元素所占據(jù)。

3.浮動

3.1什么是 CSS Float（浮動）？

CSS的Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。

Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。

?

float: left | right | none | inherit

?

當(dāng)把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：

當(dāng)框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據(jù)空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。

?

如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。

?

如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當(dāng)它們向下移動時可能被其它浮動元素“卡住”：

3.2清除浮動

首先為什么要清除浮動？

由于浮動元素會脫離文檔流顯示，所以在浮動元素后面的塊級元素會默認(rèn)占據(jù)這些元素的位置，就會造成這些塊級元素會在浮動元素的下層顯示，出現(xiàn)浮動元素蓋住后面正常文檔流元素的效果，但這往往不是我們想要的結(jié)果。

其作用是改變?使用清除浮動的這個元素?與?前一個聲明的浮動元素?之間的默認(rèn)布局規(guī)則，讓?使用清除浮動的這個元素?在新的一行中顯示。

?

如何清除浮動？

clear屬性，其值為left?|?right?|?both。

?

浮動元素或者非浮動元素的塊級元素都可以使用這個屬性來清除浮動（我們之前說inline和inline-block元素可以自動識別浮動，所以他們不需要清除浮動）， 他們的作用對象是前一個聲明的浮動元素。如果使用?clear:left | right?則是清除前一個float為left或者right的元素的浮動，clear：both則是清除前一個浮動元素，無論它是向哪邊移動。那么使用clear屬性的元素會在浮動元素的下方新開一行顯示。

?

清除浮動的特殊作用

清除浮動可以解決父元素高度塌陷問題。當(dāng)一個元素包裹了一些float元素的時候，由于float元素脫離文檔流顯示，所以父元素?zé)o法被這些元素?fù)伍_高度，導(dǎo)致父元素高度為0。

那么最常用的一種解決方案是：設(shè)置父元素的after偽元素的clear屬性?來讓其撐開父元素的高度。

?????? .clearfix:after,

??????? .clearfix::after{

??????????? content: " ";

??????????? display: block;

??????????? clear: both;

??????????? visibility: hidden;

??????????? height: 0;

??????? }

?

·??????? 當(dāng)我們沒有設(shè)置clearfix的after偽元素時，會發(fā)現(xiàn)clearfix的高度為0，只有邊框會顯示出來。我們通過設(shè)置clearfix的after偽元素來讓我們在不需要新增標(biāo)簽的情況下就可以清除掉浮動，并且clearfix類還可以復(fù)用。

注意點：

·??????? content和display屬性會將after偽元素渲染出來，加上clear: both實現(xiàn)一個真實標(biāo)簽清除浮動的效果。

·??????? 在一般瀏覽器中不設(shè)置visibility和height是沒有問題的，但為了增加代碼健壯性和規(guī)范性，建議加上。

·??????? :after 和 ::after的區(qū)別：:after的寫法是css2的，可以兼容到IE8，::after的寫法是css3中規(guī)定的，用以區(qū)分偽類(:hover)和偽元素(::before)。

?

?

在css知識體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識外，css布局相關(guān)的知識才是css比較核心和重要的點

?

?

相關(guān)學(xué)習(xí)站點：

https://www.runoob.com/css/css-boxmodel.html

http://www.w3school.com.cn/

?

?

?

?

?

?

?

?