溫故而知新，可以為師矣 --孔子
雖然每天都在編寫程式碼，但是溫習一些基礎還是有好處的，就像上面孔子說的那句話，哈哈。那今天晚上就抽出了點時間把HTML和CSS重新複習了一遍，以慕課網為輔助工具，簡單的整理了一下重要的乾貨知識點。
1.繼承
有一些css樣式是不具有繼承性:如border；
2.css優先順序
當多重樣式作用於同一HTML時，採用權值來判斷，相同權值時才看先後順序， 段前縮排:text-indent:2em; 中文字,字母間距:letter-spacing:20px;英文單詞間距:word-spacing:20px;
3.常用內聯塊狀元素
常用的內聯塊狀元素有：img,input
4.網頁佈局模型
在網頁中，元素有三種佈局模型：1、流動模型（Flow）,2、浮動模型 (Float)3、層模型（Layer）
5.流動模型
先來說一說流動模型，流動（Flow）是預設的網頁佈局模式。也就是說網頁在預設狀態下的 HTML 網頁元素都是根據流動模型來分佈網頁內容的。流動佈局模型具有2個比較典型的特徵：第一點，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，因為在預設狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式佔據位置.第二點，在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分佈顯示。（內聯元素可不像塊狀元素這麼霸道獨佔一行）
6.浮動模型
如果現在我們想讓兩個塊狀元素並排顯示，怎麼辦呢？不要著急，設定元素浮動就可以實現這一願望。任何元素在預設情況下是不能浮動的，但可以用 CSS 定義為浮動。
7.層佈局模型
層佈局模型就像是影象軟體PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網頁設計領域，由於網頁大小的活動性，層佈局沒能受到熱捧。但是在網頁上區域性使用層佈局還是有其方便之處的。下面我們來學習一下html中的層佈局。如何讓html元素在網頁中精確定位，就像影象軟體PhotoShop中的圖層一樣可以對每個圖層能夠精確定位操作。CSS定義了一組定位（positioning）屬性來支援層佈局模型。 層模型有三種形式： 1、絕對定位(position: absolute) 個人理解：相對於最近的父元素的定位 2、相對定位(position: relative) 個人理解：相對於元素沒有定位時的正常位置 3、固定定位(position: fixed) 個人理解：相對於瀏覽器視窗的定位
8.層模型--絕對定位
如果想為元素設定層模型中的絕對定位，需要設定position:absolute(表示絕對定位)，這條語句的作用將元素從文件流中拖出來，然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器視窗。
9.層模型--相對定位
如果想為元素設定層模型中的相對定位，需要設定position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文件流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(並且元素像層一樣浮動了起來)，然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
什麼叫做“偏移前的位置保留不動”呢？大家可以做一個實驗，在右側程式碼編輯器的19行div標籤的後面加入一個span標籤，在標並在span標籤中寫入一些文字。如下程式碼：
<body>
<div id="div1"></div><span>偏移前的位置還保留不動，覆蓋不了前面的div沒有偏移前的位置</span>
</body>
複製程式碼
從效果圖中可以明顯的看出，雖然div元素相對於以前的位置產生了偏移，但是div元素以前的位置還是保留著，所以後面的span元素是顯示在了div元素以前位置的後面。
10.層模型--固定定位
本身不佔用文件流位置，相對於瀏覽器視窗的定位，和background-attachment:fixed屬性（設定背景圖片固定）功能相同；
11.Absolute和Relative的結合
使用position:absolute可以實現被設定元素相對於瀏覽器（body）設定定位以後，大家有沒有想過可不可以相對於其它元素進行定位呢？答案是肯定的，當然可以。使用position:relative來幫忙，但是必須遵守下面規範：
1、參照定位的元素必須是相對定位元素的前輩元素：
<div id="box1"><!--參照定位的元素-->
<div id="box2">相對參照元素進行定位</div><!--相對定位元素-->
</div>
2、參照定位的元素必須加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}
這樣box2就可以相對於父元素box1定位了（這裡注意參照物就可以不是瀏覽器了，而可以自由設定了）。
複製程式碼12.字型樣式
針對設定字型樣式的縮寫形式時你至少要指定 font-size 和 font-family 屬性，其他的屬性(如 font-weight、font-style、font-variant、line-height)如未指定將自動使用預設值。 在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。 一般情況下因為對於中文網站，英文還是比較少的，所以下面縮寫程式碼比較常用
body{
font:12px/1.5em "宋體",sans-serif;
}
複製程式碼 只是有字號、行間距、中文字型、英文字型設定。
複製程式碼13.配色表參考
14.長度單位
長度單位總結一下，目前比較常用到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（也就是兩個字型大小的距離）。 下面注意一個特殊情況：
但當給 font-size 設定單位為 em 時，此時計算的標準以 p 的父元素的 font-size 為基礎。如下程式碼：
html:
<p>以這個<span>例子</span>為例。</p>
複製程式碼css:
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）。
15.水平居中
1.行內元素
行內元素直接設定其父元素text-align:center
2.塊狀元素
a.定寬塊狀元素
滿足定寬和塊狀兩個條件的元素是可以通過設定“左右margin”值為“auto”來實現居中的。 margin：0 auto;
b.不定寬塊狀元素
不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：
1)加入 table 標籤
2)設定 display: inline 方法：與第一種類似，顯示型別設為 行內元素，進行不定寬元素的屬性設定
3)設定 position:relative 和 left:50%：利用 相對定位 的方式，將元素向左偏移 50% ，即達到居中的目的
1）.加入 table 標籤
為什麼選擇方法一加入table標籤? 是利用table標籤的長度自適應性---即不定義其長度也不預設父元素body的長度（table其長度根據其內文字長度決定），因此可以看做一個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。
第一步：為需要設定的居中的元素外面加入一個 table 標籤 ( 包括 、、 )。
第二步：為這個 table 設定“左右 margin 居中”（這個和定寬塊狀元素的方法一樣）。
html程式碼：
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文字</li>
<li>我是第二行文字</li>
<li>我是第三行文字</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
複製程式碼css程式碼：
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>
複製程式碼2)設定 display: inline 方法
改變塊級元素的 display 為 inline 型別（設定為 行內元素 顯示），然後使用 text-align:center 來實現居中效果
html程式碼：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
複製程式碼css程式碼：
<style>
.container{
text-align:center;
}
/* margin:0;padding:0（消除文字與div邊框之間的間隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/* margin-right:8px（設定li文字之間的間隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>
複製程式碼這種方法相比第一種方法的優勢是不用增加無語義標籤，但也存在著一些問題：它將塊狀元素的 display 型別改為 inline，變成了行內元素，所以少了一些功能，比如設定長度值。
3)設定 position:relative 和 left:50%：利用 相對定位 的方式，將元素向左偏移 50% ，即達到居中的目的
方法三:通過給父元素設定 float，然後給父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left: -50% 來實現水平居中。
html程式碼：
<body>
<div class="container">
<div class="section">居中顯示部分</div>
</div>
</body>
複製程式碼css程式碼：
<style>
.container {
float:left;
position:relative;
left:50%;
}
.section {
background:#ccc;
position:relative;
left:-50%;
}
</style>
複製程式碼這三種方法使用得都非常廣泛，各有優缺點，具體選用哪種方法，可以視具體情況而定。
16.垂直居中
1.單行文字
父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line-height 高度一致來實現的
html程式碼：
<div class="container">
Hello,Jasonccj!
</div>
複製程式碼css程式碼:
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
複製程式碼這種文字行高與塊高一致帶來了一個弊端：當文字內容的長度大於塊的寬時，就有內容脫離了塊。
2.多行文字
a.方法一:
使用插入 table (包括tbody、tr、td)標籤，同時設定 vertical-align：middle。
css 中有一個用於豎直居中的屬性 vertical-align，在父元素設定此樣式時，會對inline-block型別的子元素都有用.
html程式碼：
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>居中的內容</p>
</div>
</td></tr></tbody></table>
</body>
複製程式碼css程式碼：
<style>
table td{height:500px;background:#ccc}
</style>
複製程式碼因為 td 標籤預設情況下就預設設定了 vertical-align 為 middle，所以我們不需要顯式地設定了。
b.方法二:
在 chrome、firefox 及 IE8 以上的瀏覽器下可以設定塊級元素的 display 為 table-cell（設定為表格單元顯示），啟用 vertical-align 屬性，但注意 IE6、7 並不支援這個樣式, 相容性比較差。
html程式碼：
<div class="container">
<div>
<p>居中部分</p>
</div>
</div>
複製程式碼css程式碼：
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;
vertical-align:middle;
}
</style>
複製程式碼這種方法的好處是不用新增多餘的無意義的標籤，但缺點是不相容IE6,7
17.隱性改變display型別
當為元素（不論之前是什麼型別元素，display:none 除外）設定以下 2 個句之一：
- position : absolute
- float : left 或 float:right
元素的display顯示型別就會自動變為以 display:inline-block（塊狀元素）的方式顯示，當然就可以設定元素的 width 和 height 了，且預設寬度不佔滿父元素。
html程式碼:
<div class="container">
<a href="#" title="">我們知道a標籤是行內元素,現在為該標籤設定寬度了.</a>
</div>
複製程式碼css程式碼:
<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>
複製程式碼