元素型別
html 的元素可以分為兩種：
塊級元素（block level element）
內聯元素（inline element 有的人也叫它行內元素）
兩者的區別在於以下三點：
塊級元素會獨佔一行（即無法與其他元素顯示在同一行內，除非你顯式修改元素的 display 屬性），而內聯元素則都會在一行內顯示。
塊級元素可以設定 width、height 屬性，而內聯元素設定無效。
塊級元素的 width 預設為 100%，而內聯元素則是根據其自身的內容或子元素來決定其寬度
具體來說一下吧,12
34.example
我們為 設定上面的樣式，是有效果的，因為其是塊級元素，而對 設定上面的樣式是沒用的。要想讓 也可以改變寬高，可以通過設定 display: block; 來達到效果。當 display 的值設為 block 時，元素將以塊級形式呈現；當 display 值設為 inline 時，元素將以內聯形式呈現。
若既想讓元素在行內顯示，又能設定寬高，可以設定：
1display: inline-block;
inline-block 在我看來就是讓元素對外呈內聯元素，可以和其他元素共處與一行內；對內則讓元素呈塊級元素，可改變其寬高。
html **是順序執行的，乙份無任何 css 樣式的 html **最終呈現出的頁面是根據元素出現的順序和型別排列的。塊級元素就從上到下排列，遇到內聯元素則從左到右排列。這種無樣式的情況下，元素的分布叫普通流，元素出現的位置應該叫正常位置（這是我瞎起的），同時所有元素會在頁面上佔據乙個空間，空間大小由其盒模型決定。
盒模型頁面上顯示的每個元素（包括內聯元素）都可以看作乙個盒子，即盒模型( box model )。請看 chrome devtools 裡的截圖：
可以顯而易見的看出盒模型由 4 部分組成。從內到外分別是：
1content -> padding -> border -> margin
按理來說乙個元素的寬度（高度以此類推）應該這樣計算：
1總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
但是不同瀏覽器（你沒有猜錯，就是那個與眾不同的瀏覽器）對寬度的詮釋不一樣。符合 w3c 標準的瀏覽器認為乙個元素的寬度只等於其 content 的寬度，其餘都要額外算。於是你規定乙個元素：12
3456
.example
則他最終的寬度應為：
1寬度 = width(200px) + padding(10px * 2) + border(5px * 2) + margin(20px * 2) = 270px;
而在 ie（低於ie9） 下，最終寬度為：
1寬度 = width(200px) + margin(20px * 2) = 240px;
我個人覺得 ie 的更符合人類思維，畢竟 padding 叫內邊距，邊框算作額外的寬度也說不下去。w3c 最後為了解決這個問題，在 css3 中加了 box-sizing 這個屬性。當我們設定 box-sizing: border-box; 時，border 和 padding 就被包含在了寬高之內，和 ie 之前的標準是一樣的。所以，為了避免你同乙份 css 在不同瀏覽器下表現不同，最好加上：12
345*, *:before, *:after
這裡還有兩種特殊情況：
無寬度 —— 絕對定位（position: absolute;） 元素
無寬度 —— 浮動（float） 元素
它們在頁面上的表現均不佔據空間（脫離普通流，感覺像浮在頁面上層一樣，移動它們不影響其他元素的定位）。這就涉及到另外兩個核心概念 position 和 float。
position
position 這個屬性決定了元素將如何定位。它的值大概有以下五種：
position 值 如何定位
static position的預設值。元素將定位到它的正常位置（上文提到過），其實也就相當於沒有定位。元素在頁面上佔據位置。不能使用 top right bottom left 移動元素位置。
relative 相對定位，相對於元素的正常位置來進行定位。元素在頁面佔據位置。可以使用 top right bottom left 移動元素位置。
absolute 絕對定位，相對於最近一級的 定位不是 static 的父元素來進行定位。元素在頁面不佔據位置。 可以使用 top right bottom left 移動元素位置。
fixed 絕對定位，相對於瀏覽器視窗來進行定位。其餘和 absolute 一樣，相當於一種特殊的 absolute。
inherit 從父元素繼承 position 屬性的值。
具體效果可以參考w3school的例項，或者自己寫一下就明白了。
每個網頁都可以看成是由一層一層頁面堆疊起來的，如下圖所示。
來自網路
來自網路
position 設定為 relative 的時候，元素依然在普通流中，位置是正常位置，你可以通過 left right 等移動元素。會影響其他元素的位置。
而當乙個元素的 position 值為 absolute 或 fixed 的時候，會發生三件事：
把該元素往 z 軸方向移了一層，元素脫離了普通流，所以不再佔據原來那層的空間，還會覆蓋下層的元素。
該元素將變為塊級元素，相當於給該元素設定了 display: block;（給乙個內聯元素，如 ，設定 absolute 之後發現它可以設定寬高了）。
如果該元素是塊級元素，元素的寬度由原來的 width: 100%（佔據一行），變為了 auto。
由此觀之，當 position 設定為 absolute 或 fixed，就沒必要設定 display 為 block 了。而且如果你不想覆蓋下層的元素，可以設定 z-index 值 達到效果。
float
float 顧名思義，就是把元素浮動，它的取值一共有四個：left right none inherit，光看名字就懂了，無需多言。
最初的 float 只是用來實現文字環繞的效果，僅此而已。而現在 float 的應用已不止這個，前輩們也是寫了無數博文來深入淺出的講解它。
淺如：深如：
css float浮動的深入研究、詳解及拓展(一)
css float浮動的深入研究、詳解及拓展(二)
從本質上講解了 float 的原理。
我就不班門弄斧寫原理了，只說說 float 的幾個要點就行了：
只有左右浮動，沒有上下浮動。
元素設定 float 之後，它會脫離普通流（和 position: absolute; 一樣），不再佔據原來那層的空間，還會覆蓋下一層的元素。
浮動不會對該元素的上乙個兄弟元素有任何影響。
浮動之後，該元素的下乙個兄弟元素會緊貼到該元素之前沒有設定 float 的元素之後（很好理解，因為該元素脫離普通流了，或者說不在這一層了，所以它的下乙個元素當然要補上它的位置）。
如果該元素的下乙個兄弟元素中有內聯元素（通常是文字），則會圍繞該元素顯示，形成類似「文字圍繞」的效果。（可參考css float浮動的深入研究、詳解及拓展(一)中的講解）。這個我還是實踐了一下的：
下乙個兄弟元素如果也設定了同一方向的 float，則會緊隨該元素之後顯示。
該元素將變為塊級元素，相當於給該元素設定了 display: block;（和position: absolute; 一樣）。
CSS 最核心的幾個概念
html 的元素可以分為兩種 兩者的區別在於以下三點 塊級元素會獨佔一行 即無法與其他元素顯示在同一行內，除非你顯示修改元素的 display 屬性 而內聯元素則都會在一行內顯示。塊級元素可以設定 width height 屬性，而內聯元素設定無效。塊級元素的 width 預設為 100 而內聯元素...
CSS核心的幾個概念
盒模型 position float。他們是css的基礎，之間看似獨立卻又相輔相成。元素型別 塊級元素 內聯元素 他們之間有以下區別 1 塊級元素獨佔一行，除非顯示的修改display屬性。而內聯元素都會在一行內顯示。2 塊級元素可以設定width height屬性，而內聯元素不行。3 塊級元素的w...
CSS 最核心的四個概念
摘要 學習web前端必看，最最基礎 核心的css概念，慕課網。html元素可以分為兩種 兩者的區別在於一下三點 塊級元素會獨佔一行 即無法與其他元素一同顯示在同一行內，除非你顯示修改元素的display屬性為block 而內聯元素都會顯示在一行中 塊級元素可以設定width height屬性，內聯元...