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

在css的發(fā)展歷程中，有兩種版本的盒模型，一個(gè)叫IE盒模型（又叫怪異盒模型），一個(gè)叫W3C標(biāo)準(zhǔn)盒模型，在早期的微軟出的IE瀏覽器中采用的是自己的盒模型標(biāo)準(zhǔn)成為IE盒模型或者叫怪異盒模型(此模型只會(huì)出現(xiàn)在IE5.5及其更早的版本中。只要為文檔設(shè)置一個(gè)DOCTYPE，就會(huì)使得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）幾個(gè)要素。

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

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

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

元素框的總寬度 = 元素（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 外邊距合并（疊加）

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

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

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

?

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

?

* {

? margin: 0;

? padding: 0;

}

3、box-sizing屬性介紹

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

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值其實(shí)是除margin外的border+padding+element的總寬度。盒子的width包含border+padding+內(nèi)容

　 即總寬度=margin+width

很多CSS框架，都會(huì)對(duì)盒子模型的計(jì)算方法進(jìn)行簡(jiǎn)化。

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

?

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

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

?

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

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

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

接下來看下他們的定義：

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

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

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

?

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

1.1.1塊級(jí)元素

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

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

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

1.1.2 行內(nèi)元素

1.一行可以顯示多個(gè)；

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

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

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

?

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

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

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

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

?

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

?

在CSS中是有三種定位機(jī)制的：普通文檔流、浮動(dòng)和絕對(duì)定位

?

深入css布局（3）—— 元素的定位與浮動(dòng)

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

1.文檔流

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

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

2.定位描述

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

2.1相對(duì)定位

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

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

2.2絕對(duì)定位

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

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

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

?

2.3????? fixed固定定位

1. 固定的參照對(duì)像是可視窗口而并非是body或是父級(jí)元素，fixed定位的元素不會(huì)隨著窗口的滾動(dòng)而滾動(dòng)。

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

3.浮動(dòng)

3.1什么是 CSS Float（浮動(dòng)）？

CSS的Float（浮動(dòng)），會(huì)使元素向左或向右移動(dòng)，其周圍的元素也會(huì)重新排列。

Float（浮動(dòng)），往往是用于圖像，但它在布局時(shí)一樣非常有用。

?

float: left | right | none | inherit

?

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

當(dāng)框 1 向左浮動(dòng)時(shí)，它脫離文檔流并且向左移動(dòng)，直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中，所以它不占據(jù)空間，實(shí)際上覆蓋住了框 2，使框 2 從視圖中消失。

?

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

?

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

3.2清除浮動(dòng)

首先為什么要清除浮動(dòng)？

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

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

?

如何清除浮動(dòng)？

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

?

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

?

清除浮動(dòng)的特殊作用

清除浮動(dòng)可以解決父元素高度塌陷問題。當(dāng)一個(gè)元素包裹了一些float元素的時(shí)候，由于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偽元素時(shí)，會(huì)發(fā)現(xiàn)clearfix的高度為0，只有邊框會(huì)顯示出來。我們通過設(shè)置clearfix的after偽元素來讓我們?cè)诓恍枰略鰳?biāo)簽的情況下就可以清除掉浮動(dòng)，并且clearfix類還可以復(fù)用。

注意點(diǎn)：

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

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

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

?

?

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

?

?

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

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

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

?

?

?

?

?

?

?

?