CSS分類：
CSS代碼插入的形式可以分為三種：分別是內聯式，嵌入式，外部式。
<p style="color:red">直接寫入標簽內部，就做內聯式
span{
color:red;
}
</style>````
把代碼寫在head里的style標簽里面，就叫做嵌入式
`<link href="base.css" rel="stylesheet" type="text/css" />
`這種方式叫做外聯式，也叫外部式
選擇器
選擇器的種類有有：標簽選擇器，類選擇器，ID選擇器，子選擇器，包含選擇器，通用選擇器，偽類選擇符，分組選擇符。
其中比較值得注意的是子選擇器和包含選擇器的區別
子選擇器的作用：用于選擇指定標簽元素的第一代子元素 .food>li
包含選擇器的作用： 用于選擇指定標簽元素下的后輩元素 .food li
通用選擇器 *
偽類選擇器 a:hover{color:red;}
分組選擇器 h1,span{color:red;}
CSS權重
當同一個標簽設置了多個不同樣式的時候，要看那個樣式生效，這個時候是通過權值來判斷的。如果權值一樣，那么是通過順序來判斷，處于最后面的css樣式會被應用。另外!important的權重是最高的，一般要寫在分號前面。
CSS設置字體
CSS設置的字體一般要為比較常用的字體，因為用戶看到字體的樣式取決于用戶本地電腦是否安裝了你設置的字體
body{font-family:"Microsoft Yahei";} 或者
body{font-family:"微軟雅黑";}
但是第一種比第二種的兼容性更好一些。
實現粗體，很多人為了實現粗體樣式都會使用h1-h6或strong標簽，這樣是不好的，CSS有單獨實現粗體的方式。
p span{font-weight:bold;}
縮進樣式
中文文字中的段前習慣空兩個文字的空白，這個特殊的樣式可以用下面代碼來實現：
p{text-indent:2em;}
段落排版--中文字間距、字母間距
letter-spacing:50px; 字母間距
word-spacing:50px; 單詞間距
段落排版--對齊
text-align 這個只能對塊狀元素使用
text-align:center;
元素分類:
在CSS中，html中的標簽元素大體被分為三種不同的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素.
常用的塊狀元素有：
`<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>`
常用的內聯元素有：
`<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>`
常用的內聯塊狀元素有：
`<img>、<input>`
使內聯元素轉化為塊狀元素的方法：
a{display:block;}
使塊狀元素轉化為內聯元素的方法：
div{display:inline;}
塊級元素特點：
1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行。（真霸道，一個塊級元素獨占一行）
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
內聯元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變
內聯塊狀元素：
內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點，代碼display:inline-block就是將元素設置為內聯塊狀元素
inline-block 元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
盒子模型：
內邊距:padding
外邊距:margin
邊框:border
塊狀標簽都具備盒子模型的特征
CSS布局模型
CSS包含3種基本的布局模型，用英文概括為：Flow、Layer 和 Float。
在網頁中，元素有三種布局模型：
1、流動模型（Flow）
2、浮動模型 (Float)
3、層模型（Layer）
流動布局模型具有2個比較典型的特征：
第一點，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在默認狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式占據位置。
第二點，在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分布顯示。（內聯元素可不像塊狀元素這么霸道獨占一行）
流動布局兩句話概括：塊狀元素從上到下分布，內聯元素從左到右分布
浮動模型（Float）
設置浮動后可以是塊狀元素水平排列
層模型有三種形式：
1、絕對定位(position: absolute)
2、相對定位(position: relative)
3、固定定位(position: fixed)
層模型--絕對定位(position: absolute)
對于其最接近的一個具有定位屬性的父元素進行絕對定位。如果沒有這樣的父屬性，就居于body來絕對定位。
層模型--相對定位(position: relative)
相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動。
> 需要注意的點: 雖然div元素相對于以前的位置產生了偏移，但是div元素以前的位置還是保留著，所以后面的span元素是顯示在了div元素以前位置的后面。簡單來說，就是相對定位之后，不會影響其他元素的排列。如下圖顯示：
層模型--固定定位(position: fixed)
表示固定定位，與absolute定位類型類似，但它的相對移動的坐標是視圖（屏幕內的網頁窗口）本身
Relative與Absolute組合使用
這個方法才是最常用的方法，將父盒子設置為(position: relative)，需要定位的盒子設置為(position: absolute)，可以實現相對于父盒子的絕對定位
1、如果top、right、bottom、left的值相同，可簡寫為下面代碼：
margin:10px;
2、如果top和bottom值相同、left和 right的值相同，可簡寫為下面代碼：
margin:10px 20px;
3、如果left和right的值相同，可簡寫為下面代碼：
margin:10px 20px 30px;
>需要注意的點：
top和bottom的值相同,left和right的值不相同，這種方式是沒有簡寫的。
顏色值縮寫：
p{color:#000000;}縮寫為p{color: #000;}
p{color: #336699;}縮寫為p{color: #369;}
字體縮寫：
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋體",sans-serif;
}
縮寫為
body{
font:italic small-caps bold 12px/1.5em "宋體",sans-serif;
}
1、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其他的屬性(如 font-weight、font-style、font-varient、line-height)如未指定將自動使用默認值。
2、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。
CSS中的長度值：
長度單位總結一下，目前比較常用到px（像素）、em、% 百分比，要注意其實這三種單位都是相對單位。
1、像素
像素為什么是相對單位呢？因為像素指的是顯示器上的小點（CSS規范中假設“90像素=1英寸”）。實際情況是瀏覽器會使用顯示器的實際像素值有關，在目前大多數的設計者都傾向于使用像素（px）作為單位。
2、em
就是本元素給定字體的 font-size 值，如果元素的 font-size 為 14px ，那么 1em = 14px；如果 font-size 為 18px，那么 1em = 18px。如下代碼：
p{font-size:12px;text-indent:2em;} 可以實現段落首行縮進 24px，也就是2個字體大小。
>值得注意的點是：當給 font-size 設置單位為 em 時，此時計算的標準以 p 的父元素的 font-size 為基礎。
p{font-size:14px}
span{font-size:0.8em;}
結果 span 中的字體“例子”字體大小就為 11.2px（14 * 0.8 = 11.2px）。
3、百分比
p{font-size:12px;line-height:130%}
設置行高（行間距）為字體的130%（12 * 1.3 = 15.6px）。
水平居中顯示：
1.如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置 text-align:center 來實現的
2.當被設置元素為塊狀元素
當被設置元素為塊狀元素時，用text-align：center就不起作用了，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。
如果是寬度固定的塊狀元素，用以下代碼可以實現水平居中：
width: xpx; margin:xpx auto;
如果不定寬塊狀元素方法，比如分頁，分頁是不確定的，所以不能設置寬度。這種情況有三種方式解決：
1.加入 table 標簽
2.設置 display;inline 方法
3.設置 position:relative 和 left:50%;
第一種方法如下：
第一步：為需要設置的居中的元素外面加入一個 table 標簽 ( 包括 <tbody>、<tr>、<td> )。
第二步：為這個 table 設置“左右 margin 居中”（這個和定寬塊狀元素的方法一樣）
第二種方法如下（個人比較喜歡這種方式）：
改變塊級元素的 display 為 inline 類型，然后對其父元素使用 text-align:center 來實現居中效果
第三種方法如下：
方法三：通過給父元素設置 float，然后給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:-50% 來實現水平居中。
垂直居中：
父元素高度確定的單行文本的垂直居中的方法是通過設置父元素的height和line-height高度一致來實現。
父元素高度確定的多行文本、圖片、塊狀元素的豎直居中的方法有兩種：
方法一：使用插入 table (包括tbody、tr、td)標簽，同時設置 vertical-align：middle。
說到豎直居中，css 中有一個用于豎直居中的屬性 vertical-align，但這個樣式只有在父元素為 td 或 th 時，才會生效。所以又要插入 table 標簽了。
css代碼：
table td{height:500px;background:#ccc}
因為 td 標簽默認情況下就默認設置了 vertical-align 為 middle，所以我們不需要顯式地設置了。
方法二：在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 為 table-cell，激活 vertical-align 屬性，但注意 IE6、7 并不支持這個樣式。
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
這種方法的好處是不用添加多余的無意義的標簽，但缺點也很明顯，它的兼容性不是很好，不兼容 IE6、7。
>當行內元素設置了以下2個屬性元素，元素就會從行內元素變為內聯塊狀元素display:inline-block
position : absolute
float : left 或 float:right
比如a標簽，設置了上面2個屬性中的任何一個，就隱形變成內聯塊狀元素了，也就可以設置寬度了。
