學習css的單位之前我們要知道css都可以填哪些值呢？
1.數 ：例如：width:25px
2.百分比：相對於預設值或著父容器而言，例如：width:70% 佔父容器寬度的70%。font-size:150%，是預設字型的150%。
3.顏色：
直接填單詞，例如：color:red
填寫十六進製製碼，例如：color:#ff3366
填寫rgb函式，（紅色0~255，綠色0~255，藍色0~255）例如：color: rgb(255,0,0);
填寫hsl函式，與rgb不同的是hsl代表的是（色相0~360，飽和度%，透明度%）例如：color: hsl(255,36%,50%);
rgb和hsl都可以新增另外乙個引數透明度，rgba和hsla。透明度的範圍是0~1 。例如：color: hsla(255,36%,50%,0.5);
當然透明度也可以單獨設定，使用opacity關鍵字，範圍也是0~1 例如：opacity:0.5;
4.函式：例如：background-image:url('photo.png')
css單位：
px：畫素，畫素相對於顯示器螢幕解析度。最常用單位。
em：相對於當前物件內文字的字型尺寸。如當前行內文字的字型尺寸未被設定，則相對於瀏覽器的預設字型尺寸。
ex：相對於字元「x」的高度，通常為字型尺寸的一半。如當前對行內文字的字型尺寸未被設定，則相對於瀏覽器的預設字型尺寸。
in英吋，cm厘公尺，mm公釐，pt點，pc派卡
1 in=2.54 cm=25.4 mm=72 pt=6 pc
css的盒模型：
為了除錯網頁的css樣式，我們把html的大部分元素都看成乙個盒子，這樣我們就容易設定該元素出現的位置。
大多數的元素結構如下圖：
margin外邊距，padding內邊距，border邊框，width寬度，height高度
每個屬性又有上下左右四個區域。
以margin來言：margin-top頂部外邊距，margin-bottom底部外邊距，margin-left左邊外邊距，margin-right右邊外邊距。除了width寬度，height高度都可以如此拆分。
然後我們來看看，
盒子的實際寬度=margin-left左邊外邊距+border-left左邊邊框+padding-left左邊內邊距+width寬度+padding-right右邊內邊距+border-right右邊邊框+margin-right右邊外邊距
那麼盒子的實際高度你也一定會計算了。記住這個法則，你以後就會避免很多類似於，兩個盒子的高度設定的一樣為什麼他們的高度不一樣的問題。
明天開始我會學習div+css的網頁基礎布局，進度慢的話請大家理解。
網頁布局基礎 css布局學習總結
1.標準文件流 從上到下，從左到右輸出文件內容 2.浮動 3.絕對定位 需要注意的是塊級元素如div p ul 等 行級元素如span strong img input等 塊級元素與行級元素都是盒子模型，下面說下盒子模型 盒子模型是網頁布局的基石，border padding margin 下面給出...
css入門教程之學習網頁布局 1
原文 從本篇開始講述如何用css實現網頁的布局，即如何用css控制網頁內各個元素的顯示位置。如果你是乙個初學者，很可能覺得www.cppcns.com做乙個網頁的第一步就是布局。其實不然，css網頁的設計過程可以參考分為以下幾步 平面設計 頁面切割 布局 細節控制 平面設計是乙個網頁的精髓所在，讀者...
簡單的CSS網頁布局
一列布局小案例 重點 margin 0 auto 上下0px,左右auto自適應，能讓div居中 body 清除預設樣式 兩列布局小案例 三列布局 左右各設定絕對定位 中間自適應 left 設計首頁的第一步是設計版面布局。就象傳統的報刊雜誌編輯一樣，我們將網頁看作一張報紙，一本雜誌來進行排版布局。雖...