CSS核心的幾個概念

盒模型、position、float。他們是css的基礎，之間看似獨立卻又相輔相成。

元素型別

塊級元素、內聯元素

他們之間有以下區別：

1、塊級元素獨佔一行，除非顯示的修改display屬性。而內聯元素都會在一行內顯示。

2、塊級元素可以設定width、height屬性，而內聯元素不行。

3、塊級元素的width預設為100%，而內聯元素則根據自身的內容或子元素來決定寬度 。

 

內聯元素不可以設定高度，但可以通過設定display:block;來達到效果。這時元素將以塊級形式呈現。

當display:inline;時，元素以內聯形式呈現。

要讓元素在行內顯示，又能設定高度，可以設定：display:inline-block; 

盒模型

頁面上顯示的每個元素都可以看做一個盒子，即盒模型。

盒模型由四部分組成：content->padding->border->margin

元素寬度的計算…

 

另外兩種特殊情況

絕對定位、浮動（position、float） 

1、position

 這個屬性決定了元素將如何定位。大致有以下五種：

 ·static：預設值，元素相當於沒有定位，在頁面佔據位置，不能使用top、right、botton、left移動元素。

 ·relative：相對定位，沒有定位，在頁面佔據位置，可以使用top、right、botton、left移動元素。

 ·absolute：絕對定位，相對於最近一級的定位不是static的父元素進行定位，元素在頁面不佔據位置，可以使用top、right、botton、left移動元素。

 ·fixed：絕對定位，相對於瀏覽器視窗進行定位，其餘和absolute一樣。

 ·inhenit：從父元素繼承position的值。 

2、float

 顧名思義，就是把元素浮動起來，取值共四個：left、right、none、inherit。

 最初的float是用來實現文字環繞的，現在它的應用非常廣泛。

css學習資料大全：http://www.imooc.com/article/3450