CSS 最核心的四個概念

摘要：學習web前端必看，最最基礎、核心的css概念，**慕課網。

html元素可以分為兩種：

兩者的區別在於一下三點：

塊級元素會獨佔一行（即無法與其他元素一同顯示在同一行內，除非你顯示修改元素的display屬性為block），而內聯元素都會顯示在一行中；

塊級元素可以設定width 、height屬性，內聯元素設定無效；

塊級元素的width預設為100%，而內聯元素則是根據其自身的大小或其子元素的大小決定其寬度；

既想讓元素在行內顯示，又能設定寬高，可以這樣：

display:inline-block;

html **是順序執行的，乙份無任何 css 樣式的 html **最終呈現出的頁面是根據元素出現的順序和型別排列的。塊級元素就從上到下排列，遇到內聯元素則從左到右排列。這種無樣式的情況下，元素的分布叫普通流，元素出現的位置應該叫正常位置（這是我瞎起的），同時所有元素會在頁面上佔據乙個空間，空間大小由其盒模型決定。

可以顯而易見的看出盒模型由 4 部分組成。從內到外分別是：

content -> padding -> border -> margin

盒子3d模型，自上到下依次為：

border content+padding background-image background-color margin

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

每個網頁都可以看成是由一層一層頁面堆疊起來的，如下圖所示。

position 設定為 relative 的時候，元素依然在普通流中，位置是正常位置，你可以通過 left right 等移動元素。會影響其他元素的位置。

而當乙個元素的 position 值為 absolute 或 fixed 的時候，會發生三件事：

把該元素往 z 軸方向移了一層，元素脫離了普通流，所以不再佔據原來那層的空間，還會覆蓋下層的元素。該元素將變為塊級元素，相當於給該元素設定了 display: block;（給乙個內聯元素，如，設定absolute 之後發現它可以設定寬高了）。如果該元素是塊級元素，元素的寬度由原來的 width: 100%（佔據一行），變為了 auto。

由此觀之，當 position 設定為 absolute 或 fixed，就沒必要設定 display 為 block 了。而且如果你不想覆蓋下層的元素，可以設定 z-index 值達到效果。

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

最初的 float 只是用來實現文字環繞的效果，僅此而已。而現在 float 的應用已不止這個，前輩們也是寫了無數博文來深入淺出的講解它。

從本質上講解了 float 的原理。

我就不班門弄斧寫原理了，只說說 float 的幾個要點就行了：

只有左右浮動，沒有上下浮動。

元素設定 float 之後，它會脫離普通流（和 position: absolute;一樣），不再佔據原來那層的空間，還會覆蓋下一層的元素。

浮動不會對該元素的上乙個兄弟元素有任何影響。

浮動之後，該元素的下乙個兄弟元素會緊貼到該元素之前沒有設定 float 的元素之後（很好理解，因為該元素脫離普通流了，或者說不在這一層了，所以它的下乙個元素當然要補上它的位置）。

下乙個兄弟元素如果也設定了同一方向的 float，則會緊隨該元素之後顯示。

該元素將變為塊級元素，相當於給該元素設定了 display: block;（和position: absolute; 一樣）。

《完》

CSS 最核心的四個概念

CSS 最核心的幾個概念

CSS 最核心的幾個概念

jQuery四個核心函式詳解

CSS 最核心的四個概念

CSS 最核心的幾個概念

CSS 最核心的幾個概念

jQuery四個核心函式詳解

相關推薦