若既想讓元素在行內(nèi)顯示，又能設(shè)置寬高，可以設(shè)置：

display: inline-block;

inline-block在我看來(lái)就是讓元素對(duì)外呈內(nèi)聯(lián)元素，可以和其他元素共處與一行內(nèi)；對(duì)內(nèi)則讓元素呈塊級(jí)元素，可改變其寬高。

HTML代碼是順序執(zhí)行的，一份無(wú)任何 CSS樣式的 HTML代碼最終呈現(xiàn)出的頁(yè)面是根據(jù)元素出現(xiàn)的順序和類型排列的。塊級(jí)元素就從上到下排列，遇到內(nèi)聯(lián)元素則從左到右排列。這種無(wú)樣式的情況下，元素的分布叫普通流，元素出現(xiàn)的位置應(yīng)該叫正常位置（這是我瞎起的），同時(shí)所有元素會(huì)在頁(yè)面上占據(jù)一個(gè)空間，空間大小由其盒模型決定。

盒模型

頁(yè)面上顯示的每個(gè)元素（包括內(nèi)聯(lián)元素）都可以看作一個(gè)盒子，即盒模型( box model )。請(qǐng)看 Chrome DevTools里的截圖：

可以顯而易見(jiàn)的看出盒模型由 4部分組成。從內(nèi)到外分別是：

content -> padding -> border -> margin

按理來(lái)說(shuō)一個(gè)元素的寬度（高度以此類推）應(yīng)該這樣計(jì)算：

總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

但是不同瀏覽器（你沒(méi)有猜錯(cuò)，就是那個(gè)與眾不同的瀏覽器）對(duì)寬度的詮釋不一樣。符合 W3C標(biāo)準(zhǔn)的瀏覽器認(rèn)為一個(gè)元素的寬度只等于其 content的寬度，其余都要額外算。于是你規(guī)定一個(gè)元素：

.example {

width: 200px;

padding: 10px;

border: 5px solid #000;

margin: 20px;

}

則他最終的寬度應(yīng)為：

寬度 = width(200px) + padding(10px * 2) + border(5px * 2) + margin(20px * 2) =  270px;

而在 IE（低于IE9） 下，最終寬度為：

寬度 = width(200px) + margin(20px * 2) = 240px;

我個(gè)人覺(jué)得 IE的更符合人類思維，畢竟 padding叫內(nèi)邊距，邊框算作額外的寬度也說(shuō)不下去。W3C最后為了解決這個(gè)問(wèn)題，在 CSS3中加了 box-sizing這個(gè)屬性。當(dāng)我們?cè)O(shè)置 box-sizing: border-box; 時(shí)，border和 padding就被包含在了寬高之內(nèi)，和 IE之前的標(biāo)準(zhǔn)是一樣的。所以，為了避免你同一份 css在不同瀏覽器下表現(xiàn)不同，最好加上：

*, *:before, *:after {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

這里還有兩種特殊情況：

無(wú)寬度 ——絕對(duì)定位（position: absolute;） 元素

無(wú)寬度 ——浮動(dòng)（float） 元素

它們?cè)陧?yè)面上的表現(xiàn)均不占據(jù)空間（脫離普通流，感覺(jué)像浮在頁(yè)面上層一樣，移動(dòng)它們不影響其他元素的定位）。這就涉及到另外兩個(gè)核心概念 position和 float。

position

position這個(gè)屬性決定了元素將如何定位。它的值大概有以下五種：

具體效果可以參考w3school的實(shí)例，或者自己寫(xiě)一下就明白了。

每個(gè)網(wǎng)頁(yè)都可以看成是由一層一層頁(yè)面堆疊起來(lái)的，如下圖所示。

position設(shè)置為 relative的時(shí)候，元素依然在普通流中，位置是正常位置，你可以通過(guò) left right等移動(dòng)元素。會(huì)影響其他元素的位置。

而當(dāng)一個(gè)元素的 position值為 absolute或 fixed的時(shí)候，會(huì)發(fā)生三件事：

把該元素往 Z軸方向移了一層，元素脫離了普通流，所以不再占據(jù)原來(lái)那層的空間，還會(huì)覆蓋下層的元素。

該元素將變?yōu)閴K級(jí)元素，相當(dāng)于給該元素設(shè)置了 display: block;（給一個(gè)內(nèi)聯(lián)元素，如 ，設(shè)置 absolute之后發(fā)現(xiàn)它可以設(shè)置寬高了）。

如果該元素是塊級(jí)元素，元素的寬度由原來(lái)的 width: 100%（占據(jù)一行），變?yōu)榱?auto。

由此觀之，當(dāng) position設(shè)置為 absolute或 fixed，就沒(méi)必要設(shè)置 display為 block了。而且如果你不想覆蓋下層的元素，可以設(shè)置 z-index值 達(dá)到效果。

float

float顧名思義，就是把元素浮動(dòng)，它的取值一共有四個(gè)：left right none inherit，光看名字就懂了，無(wú)需多言。

最初的 float只是用來(lái)實(shí)現(xiàn)文字環(huán)繞圖片的效果，僅此而已。而現(xiàn)在 float的應(yīng)用已不止這個(gè)，前輩們也是寫(xiě)了無(wú)數(shù)博文來(lái)深入淺出的講解它。

我就不班門弄斧寫(xiě)原理了，只說(shuō)說(shuō) float的幾個(gè)要點(diǎn)就行了：

只有左右浮動(dòng)，沒(méi)有上下浮動(dòng)。

元素設(shè)置 float之后，它會(huì)脫離普通流（和 position: absolute;一樣），不再占據(jù)原來(lái)那層的空間，還會(huì)覆蓋下一層的元素。

浮動(dòng)不會(huì)對(duì)該元素的上一個(gè)兄弟元素有任何影響。

浮動(dòng)之后，該元素的下一個(gè)兄弟元素會(huì)緊貼到該元素之前沒(méi)有設(shè)置 float的元素之后（很好理解，因?yàn)樵撛孛撾x普通流了，或者說(shuō)不在這一層了，所以它的下一個(gè)元素當(dāng)然要補(bǔ)上它的位置）。

如果該元素的下一個(gè)兄弟元素中有內(nèi)聯(lián)元素（通常是文字），則會(huì)圍繞該元素顯示，形成類似「文字圍繞圖片」的效果。

下一個(gè)兄弟元素如果也設(shè)置了同一方向的 float，則會(huì)緊隨該元素之后顯示。

該元素將變?yōu)閴K級(jí)元素，相當(dāng)于給該元素設(shè)置了 display: block;（和position: absolute;一樣）。

這里還有個(gè)東西，就是廣為人知的——清除浮動(dòng)。

關(guān)于“ CSS常用核心概念有哪些”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“ CSS常用核心概念有哪些”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。