邊框相關屬性
width 寬
height 高
border-width 邊框寬度
border-style 邊框樣式
border-color 邊框顏色 以上三條可簡寫爲一條border：寬度 樣式 顏色如：border:2px solid red;
border-bottom（left/right/top） 可以只設置某一邊
border-radius 邊框圓角
border:1px solid red 爲了顯示居中效果明顯爲 div 設置了邊框
width:200px 定寬
margin-top : 20px ; margin：1px 1px 1px 1px （2個參數是上下、左右；4個參數是：上、右、下、左）
總結一下：padding和margin的區別，padding在邊框裏，margin在邊框外
背景相關屬性
background -color 背景顏色
background-image 背景圖片
background-repeat 設置背景圖片是否重複
no-repeat 表示不重複 repeat-x 沿x軸方向重複 repeat-y 沿y軸方向重複
background-position ：距左邊框距離 距右邊框距離
以上所有可以簡寫爲一條：background：blue url（"地址"） no-repeat 10px 20px；
字體相關屬性
font-size 字體大小
color 字體顏色
font-weight：blod 字體加粗 font-style:italic 文字斜體
font-family 定義字體類型
text-decoration:underline 下劃線
text-decoration:line-through 文字設置刪除線
文本相關屬性
text-align 設置水平居中 ：center居中，left左對齊 right 右對齊
line-height：15px 後放入所選內容的高度，實現垂直居中
vertical-align：middle 豎直居中
text-indent :2em; 首行縮進 ，2m代表文字的2倍
letter-spacing 文字間距
letter-spacing:50px 單詞間距
display: inline 設置顯示類型設爲 行內元素，進行不定寬元素的屬性設置
position:relative 相對定位
position: absolute 偏移定位，可以使用top、bottom、left、right來進行偏移定位，例如：{position:absolute;top:20px;left:30px;}
float:left 設置浮動，一般只有左右浮動和none
left:50% 向左偏移50%
權級重要性
color:red!important 特殊的情況需要爲某些樣式設置具有最高權值 注意：!important要寫在分號的前面
元素總結
塊級元素
什麼是塊級元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素
設置 display:block 就是將元素顯示爲塊級元素，從而使元素具有塊狀元素特點。
塊級元素特點：
1.每個塊級元素都從新的一行開始，並且其後的元素也另起一行。
2.元素的高度、寬度、行高以及頂和底邊距都可設置。
3.元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
內聯元素
在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的內聯元素（行內元素）
塊狀元素也可以通過代碼 ：display:inline
內聯元素特點：
1.和其他元素都在一行上；
2.元素的高度、寬度及頂部和底部邊距不可設置；
3.元素的寬度就是它包含的文字或圖片的寬度，不可改變。
內聯塊狀元素
內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點，<img>、<input>標籤就是這種內聯塊狀標籤
代碼是：display:inline-block
內聯塊狀元素特點：
1.和其他元素都在一行上；
2.元素的高度、寬度、行高以及頂和底邊距都可設置。
模型總結
浮動模型
塊狀元素都是獨佔一行，如果現在我們想讓兩個塊狀元素並排顯示，設置元素浮動就可以實現：float:left/right
層模型
定義：層佈局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作
CSS定義了一組定位屬性來支持層佈局模型
層模型有三種形式：1、絕對定位(position: absolute) 2、相對定位(position: relative) 3、固定定位(position: fixed)
絕對定位
如果想爲元素設置層模型中的絕對定位，需要設置position:absolute(表示絕對定位)
作用：將元素從文檔流中拖出來，然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對定位。
例如：實現div元素相對於瀏覽器窗口向右移動100px，向下移動50px，如圖一
#div1{position:absolute;left:100px;top:50px;}
<div id="div1"></div>
相對定位
相對定位完成的過程是首先按static(float)方式生成一個元素(並且元素像層一樣浮動了起來)，然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。如圖二
#div1{position:relativee;left:100px;top:50px;}
<div id="div1"></div>
固定定位
fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的座標是視圖（屏幕內的網頁窗口）本身。由於視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與 background-attachment:fixed 屬性功能相同。
圖一：
居中設置
一、水平居中設置
在實際工作中常會遇到需要設置水平居中的場景，比如爲了美觀，文章的標題一般都是水平居中顯示的。
我們將其分爲兩種情況：行內元素和塊狀元素，塊狀元素裏面又分爲定寬塊狀元素，以及不定寬塊狀元素。
1.行內元素
如果被設置元素爲文本、圖片等行內元素時，水平居中是設置 text-align:center 來實現
2.不定寬塊狀元素
不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：
- 加入table標籤：利用table標籤的長度自適應性，使用margin的方法，使其水平居中, 例:margin : auto
- 設置display: inline方法：改變塊級元素的 display：inline （設置爲行內元素顯示），然後使用 text-align:center 實現居中
- 設置浮動和相對定位來實現：設置position:relative和left:50%：利用相對定位的方式，將元素向左偏移50%，即達到居中的目的。例如： float:left;position:relative; left:50%
二、垂直居中設置
在實際工作中也會遇到需要設置垂直居中的場景，比如好多報紙的文章標題在左右一側時，常常會設置爲垂直居中，爲了用戶體驗性好。這裏我們又得分兩種情況：父元素高度確定的單行文本，以及父元素高度確定的多行文本。
1.父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的 height 和line-height(行高)高度一致來實現的。但他的弊端：當文字內容的長度大於塊的寬時，就有內容脫離了塊。
line-height 與 font-size 的計算值之差，在 CSS 中成爲“行間距”。分爲兩半，分別加到一個文本行內容的頂部和底部。
2.父元素高度確定的多行文本
父元素高度確定的多行文本、圖片等的豎直居中的方法有兩種：
方法一：使用插入table (包括tbody、tr、td)標籤，同時設置 vertical-align：middle。
方法二：在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 爲 table-cell（設置爲表格單元顯示），激活 vertical-align 屬性，但注意 IE6、7 並不支持這個樣式，缺點是這種方法兼容性比較差，只是提供大家學習參考。
例如：display:table-cellvertical-align：middle；
三、隱性改變display類型
只要html代碼中出現以下兩句之一
1.position:absolute 2.float:left 或 float:right
元素的display顯示類型就會自動變爲以 display:inline-block（塊狀元素）的方式顯示，當然就可以設置元素的 width 和 height 了，且默認寬度不佔滿父元素。
如下面的代碼，a 標籤是行內元素，所以設置它的 width 是 沒有效果的，但是設置爲 position:absolute 以後，就可以了。
