Html/Css(新手入門第三篇)

1、學習心得---參考優秀的網頁來學習。

1咱們只作的靜態網頁主要用的技術？html+css 只要網上看到的，他的源代碼公開的。
【1】、先去分析，他們頁面是如何佈局（結構化）
【2】、再試着去作一下，---模仿過程。
【3】、最後咱們能夠本身嘗試創新---通向高手的過程。

css精靈技巧，優化網頁的http請求次數，提升網頁的效率。
*****css精靈的核心思想，就是將多張圖片，合成一張圖片，而後經過背景屬性中的定位來控制到底顯示圖片中的哪些部分。
*****若是網頁中能選中的圖片，那確定就是插入的圖片，選不中，就是背景圖片
【css3中經常使用字體圖標來替代傳統的小圖標（將來趨勢）】

2、css佈局的方式：
一、默認的，就是按文檔流的順序。按html的結構順序。
二、浮動方式
三、定位方式

3、浮動
浮動是將塊元素的霸道屬性，獨佔一行的行爲取消，容許別人和他一行。
浮動實際上是這個塊從原來的文檔流模式中分離出來，他後面的對象就視它不存在。
經常使用的佈局效果，例如：一行並列式，就是在一行中顯示幾個塊元素。

css把網頁元素分紅兩類，一種是塊一種是內聯元素。
body，div，p，h1，ul與li默認狀況下是塊元素。是要想讓他們在一行中顯示，就要用到浮動。

咱們在製做時，你多使用不一樣的瀏覽器查看你的結果，這樣你就知道各類瀏覽的差異。
*****總結出，當IE6父元素中的子元素的高度超過了父元素的高度，IE6默認會把父元素的高度自動增長。
*****若是想讓多個塊顯示在同一行中，能夠講這些塊都設置成浮動，而且浮動方向相同。
*****浮動浮動，先浮後動，浮動的對象會先漂浮起來，離開原來的位置。後動，就是它後面的對象。會向它原來的位置上動起來。

4、清除浮動：就是能夠去掉前面對象的浮動對後面對象的影響。
爲何原來在一行中的兩個塊會由於瀏覽器窗口的大小改變而改變原來的位置。（可另外添加一個盒子把他們包裹起來）
*****設置一個塊爲水平居中時，都會給這個塊設置一個寬度值。
*****當父元素沒有指定高度時，而且它的子元素有浮動，這時這個父元素的高度不會自動增長。
一、第一種方法：增長一個空標籤，就是沒有內容的標籤。會增長代碼。
二、第二種方法：給父元素，加overflow：hidden
三、利用僞對象after方法。
網上最流行的清除浮動代碼：

.clearFix:after{
    clear:both;
    display:block;
    visibility:hidden;
    height:0;
    line-height:0;
    content:「.」;
}

 

*****定位佈局，就是能夠經過元素的position屬性控制元素的位置。
*****當咱們要想使用絕對佈局時必需要有兩個條件
【1】、必需要給父元素增長定位屬性，通常建議使用position：relative；
【2】、給子元素加對對定位position：absolute；同時要加方向屬性。

*****相對定位與絕對定位。
絕對定位是父元素爲基準點進行定位---會脫離文檔流。(注意，脫離文檔流以後子元素不會繼承父元素的寬)
相對定位是根據自身爲基準點，進行定位---離開原位置，但還佔着原來的空間。