1.position屬性的5個值
static 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
inherit 規定應該從父元素繼承 position 屬性的值。
relative 生成相對定位的元素，相對於其正常位置進行定位。因此，"left:20" 會向元素的 left 位置新增 20 畫素。
absolute 生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed 生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
總的來說 ：
static呢，就是正常的文件流順序，預設的，相當於沒有定位!
fixed呢， 就是相對於瀏覽器視窗，就是你滾動條怎麼滾動，他還是那個位置，就想是 「粘」 在視窗上了!
inherit呢， 就是從父元素繼承 position 屬性的值，
absolute呢，是脫離文件流的原來的位置是不繼續佔據了，如果他的父級元素中有已經定位了的不管是absolute的還是relative，它都會相對於他的父級元素來定位，如果他的父級元素中沒有定位了的那麼它就是相對於body來定位的。也就是說absolute的絕對是有參照物的！
relative呢，是不會脫離文件流的原來的位置也就繼續佔據了，它是只相對於自身原來的位置來定位的!
這裡我們重點看一下position屬性的三個取值定義：position:static、absolute、relative。
static:預設值
如果沒有指定position屬性值，支援position屬性的html物件都是預設為static，可以這麼理解：把html頁面看作乙個文件流，源**中各個標籤的先後位置就是它們所對應的物件的呈現次序，所有取值為static的物件都按照你所編寫的html標籤的順序依次呈現。
relative:相對定位
此position屬性值保持物件所在文件流中的位置，也就是說它具有和static相同的呈現方式，它同樣占有在文件流中的固定位置，後面的物件不會侵占或覆蓋；與static屬性值不同的是，設定了relative的物件，可以通過top,left,right,bottom屬性設定自己的新顯示位置，在使用相對定位時,無論是否進行移動,元素仍然佔據原來的空間。因此,移動元素會導致它覆蓋其它框。
absolute:絕對定位
絕對定位元素的位置是相對於最近的已定位的父元素,若沒有已定位的父元素,那麼它的位置是相對於body的左上角。
2.層疊和繼承
繼承：從父元素繼承的部分css屬性，但是，例如，對font-family和color進行繼承是有意義的，因為這使得您可以很容易地設定乙個站點範圍的基本字型，方法是應用乙個字型到元素；然後，您可以在需要的地方覆蓋單個元素的字型。如果要在每個元素上分別設定基本字型，那就太麻煩了；再如，讓margin，padding，border和background-image不被繼承是有意義的。想象一下，如果您將這些屬性設定在乙個容器元素上，並將它們繼承到每個子元素，然後不得不將它們全部放在每個單獨的元素上，那麼將會出現的樣式/布局混亂。
四種css繼承的選擇器：（1）inherit： 該值將應用到選定元素的屬性值設定為與其父元素一樣。（2）initial：該值將應用到選定元素的屬性值設定為與瀏覽器預設樣式表中該元素設定的值一樣。如果瀏覽器預設樣式表中沒有設定值，並且該屬性是自然繼承的，那麼該屬性值就被設定為inherit。（3）unset：該值將屬性重置為其自然值，即如果屬性是自然繼承的，那麼它就表現得像inherit，否則就是表現得像initial。（4）revert：如果當前的節點沒有應用任何樣式，則將該屬性恢復到它所擁有的值。換句話說，屬性值被設定成自定義樣式所定義的屬性（如果被設定）， 否則屬性值被設定成使用者**（瀏覽器）的預設樣式。注：initial和unset不被ie支援
層疊：樣式重複定義，前面，引用css樣式，有優先順序。注：!importent擁有最高的優先順序
css 選擇器主要：標籤選擇器，類選擇器，id選擇器。
1. id選擇器 >> 類選擇器 >> 標籤選擇器
2. 使用相同型別選擇器（class）定義乙個元素時，在style中後定義的衝突樣式會覆蓋先定義的樣式
3.常見的居中方式：
（1）行內居中：text-align:center：只針對行內元素，對文字、、按鈕等給父元素設定居中，另外，當塊級元素被設定為display:inline也可以用，但是子元素沒有被float影響，否則也設定不了；
（2）定寬的塊級元素居中：可以設定左右margin值為auto實現居中；
（3）不定寬的塊級元素居中：1）將要顯示的元素加入到 table 標籤當中，然後為 table 標籤設定「左右margin」值為「auto」來實現居中； 或使用 display : table；然後設該元素「左右margin」值為「auto」來實現居中。後面的display:table; 方法會更簡潔；2）改變塊級元素的 display 為 inline 型別（設定為 行內元素 顯示），然後使用 text-align:center 來實現居中效果，這種方法相比第一種方法的優勢是不用增加無語義標籤，但也存在著一些問題：它將塊狀元素的 display 型別改為 inline，變成了行內元素，所以少了一些功能，比如設定長度值（變成inline-block就可以設定寬高）3）通過給父元素設定 float，然後給父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left: -50% 來實現水平居中；先設定父元素wrap清除浮動，clear:both;然後左浮動。定位讓wrap向右偏移50%。然後定義子元素相對于父元素向左偏移50%。脫離父元素。加個邊框就可以明白一些了。另外用絕對定位也是可以的。
（4）垂直居中：給一行元素設定垂直居中：父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line-height 高度一致來實現的。(height: 該元素的高度，line-height: 顧名思義，行高，指在文字中，行與行之間的 基線間的距離 )；給多行元素設定垂直居中：1）使用插入 table (包括tbody、tr、td)標籤，同時設定 vertical-align：middle；2）設定塊級元素的 display 為 table-cell（設定為**單元顯示），啟用 vertical-align 屬性。但這種方法相容性比較差， ie6、7 並不支援這個樣式
（5）使用css3的translate水平垂直居中元素：種方式將脫離文件流的元素，設定top：50%，left：50%，然後使用transform來向左向上便宜半個內元素的寬和高
（6）使用css3計算的方式居中元素calc：這種方式同樣是將脫離文件流的元素，然後使用計算的方式來設定top和left
我是要居中的內容
.center
.center_text
HTML和css中的知識點
1 你做的頁面在哪些流覽器測試過？這些瀏覽器的核心分別是什麼?ie trident核心 firefox gecko核心 safari webkit核心 opera 以前是presto核心，opera現已改用google chrome的blink核心 chrome blink 基於webkit，goo...
html與css知識點總結（二）
1.dom結構及其優化 dom是document object model 文件物件模型 的縮寫，dom是中立與平台和語言的介面，它允許程式或指令碼動態地訪問更新文件的內容 樣式以及結構。dom包含核心dom xml dom和html dom，html dom是關於如何獲取 新增 修改和刪除html...
HTML知識點總結（四） form表單
html知識點總結一 什麼是form表單 用於收集使用者資訊，如 登入 註冊等場景 所有要提交的資料都必須放在form標籤中。乙個完整的表單包含三個基本組成部分 表單標籤 表單域 表單按鈕。二 關於form表單中的標籤以及屬性 1 私有屬性 method 提交方法，有get和post兩種提交方法,預...