給自己時間，不要焦急，一步一步來，一日一日過，

請相信生命的韌性是驚人的，跟自己向上的心去合作，不要放棄對自己的愛護。

元素的顯示與隱藏

display顯示

使用disply隱藏之後，不再保留原來的位置，會被之後正常的文件流覆蓋

display: none 隱藏物件

display：block 除了轉換為塊級元素之外，同時還有顯示元素的意思。
複製程式碼

visibility可見性

和display隱藏不同的是，使用可見性隱藏，元素仍然會保留原來的位置

visibility：visible ;  物件可視

visibility：hidden;    物件隱藏
複製程式碼
 

overflow溢位

這是一個神奇的單詞哈?，很多地方都會用到它，之前提到的清除浮動也使用到了overflow

綜合運用

核心程式碼github地址

HTML部分

CSS使用者介面樣式

滑鼠樣式cursor

輪廓線

平時我們最直接的寫法是 ：outline: none，取消輪廓線。

 <input  type="text"  style="outline: none;"/>
複製程式碼

防止文字域拖拽

平時使用文字域佈局的時候，如果不設定任何屬性，使用者抗議自己修改文字域的大小，會影響頁面的整體佈局，這時我們就要注意了： 實際開發中，我們文字域右下角是不可以拖拽的 ❗

<textarea  style="resize: none;"></textarea>
複製程式碼

vertical-align 垂直對齊

vertical-align 不影響塊級元素中的內容對齊，它只針對於行內元素或者行內塊元素

特別是行內塊元素， 通常用來控制圖片/表單與文字的對齊。

vertical-align : baseline |top |middle |bottom
複製程式碼

對齊方式依次是：基線、頂線、中線、底線

溢位的文字省略號顯示

設定或檢索是否使用一個省略標記（...）標示物件內文字的溢位

text-overflow : clip ；不顯示省略標記（...），而是簡單的裁切 

text-overflow：ellipsis ； 當物件內文字溢位時顯示省略標記（...）
複製程式碼

white-space設定或檢索物件內文字顯示方式。通常我們使用於強制一行顯示內容

white-space:normal ；預設處理方式

white-space:nowrap ； 強制在同一行內顯示所有文字，直到文字結束或者遭遇br標籤物件才換行。
複製程式碼

省略號三部曲

  /*1. 先強制一行內顯示文字*/
      white-space: nowrap;
  /*2. 超出的部分隱藏*/
      overflow: hidden;
  /*3. 文字用省略號替代超出的部分*/
      text-overflow: ellipsis;
複製程式碼

CSS精靈技術（sprite） 很重要

為什麼需要sprites技術

?圖為網頁的請求原理圖，當用戶訪問一個網站時，需要向伺服器傳送請求，網頁上的每張影象都要經過一次請求才能展示給使用者，但是一個網頁中往往會應用很多小的背景圖作為修飾，當網頁中的影象過多，伺服器就會頻繁的接收和傳送請求，會降低頁面的載入速度

特點：有效的減少伺服器接收和傳送請求的次數，提高頁面的載入速度

精靈技術講解

CSS精靈圖實際上是將網頁中的一些背景圖整合到一張大圖中，這樣當用戶訪問該頁面時，只需要向伺服器傳送一次請求，網頁中的背景影象即可全部展示出來

需要使用到的CSS技術：background-image、background-repeat、background-position屬性進行背景定位。

精靈技術使用的核心總結

1. 精確測量，每個小背景圖片的大小和位置。
2. 給盒子指定小背景圖片時， 背景定位基本都是負值。

CSS佈局的三種機制

普通流

塊級元素會獨佔一行，從上向下順序排列；

 - 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
複製程式碼

行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行；

 - 常用元素：span、a、i、em等
複製程式碼

浮動

浮動最主要的價值是可以讓多個塊級元素在同一行內展示出來。

元素的浮動是指設定了浮動屬性的元素會

1. 脫離標準普通流的控制
2. 移動到指定位置。

選擇器 { float: 屬性值; }

我們使用浮動的核心目的——讓多個塊級盒子在同一行顯示。 這個也是我們最常見的一種佈局方式

一個完整的網頁，是 標準流 + 浮動 + 定位 一起完成的。

浮動只會影響當前的或者是後面的標準流盒子，不會影響前面的標準流，每個標準流單獨佔一行。

如果一個盒子裡面有多個子盒子，如果其中一個盒子浮動了，其他兄弟也應該浮動，避免引起其他的問題哈。

下面我們來看以下?幾種情況：

以下所說的div結構均為此：

<div>
     <div class="a"></div>
     <div class="b"></div>
</div>
複製程式碼

當a盒子浮動，b盒子也浮動的時候，a、b兩盒子會顯示在同一行。 當a盒子不浮動，b盒子浮動的時候，a盒子即是標準的文件流，是很霸道的哈，他會單獨佔據一行，所以b盒子會依照a盒子為參考，b盒子浮動。

清除浮動

我們為什麼要清除浮動呢 ❓

父級盒子很多情況下，不方便給高度，但是子盒子浮動就不佔有位置，注意哦，浮動的盒子不佔位置。最後父級盒子高度為0，就影響了下面的標準流盒子，下面的標準流盒子會覆蓋原本想展示的內容。

• 總結：
  • 由於浮動元素不再佔用原文件流的位置，所以它會對後面的元素排版產生影響
  • 準確地說，並不是清除浮動，而是清除浮動後造成的影響。

清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。清除浮動之後， 父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了。

清除浮動的方法

如下圖所示，若父元素nav盒子沒有設定高度，子元素均設定浮動，則會導致子元素浮動在正常文件流之外，父元素的高度為：0，影響之後正常的文件流，所以此時我們會清除浮動。

以下?所示的四種清除浮動的方式，均以此案例為參照

注意此處說的浮動元素是指浮動的最後一個元素哈

W3C推薦的做法是通過在浮動元素末尾新增一個空的標籤例如 < div style=”clear:both”>< /div>。

可以給父級新增： overflow為 hidden| auto| scroll 都可以實現。

一般我們會在父級元素樣式後加：overflow：hidden。

缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素。

3.使用after偽元素清除浮動

此方式雖然程式碼多一點，但是不會改變html的結構

:after相當於在結構後用css添加了一個新的標籤。

/*宣告清除浮動的樣式 */
.clearfix:after{
	content: "";
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}
.clearfix{
	*zoom:1; /* ie6，7專門清除浮動的樣式*/
}
複製程式碼

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}
複製程式碼

定位與塌陷（塌陷的解決方法）

之前我們有提到過，當給一個父元素內部的子元素設定margin值的時候，父級元素可能也會發生改變，即外邊距合併就是通常所說的塌陷，但是絕對定位和浮動不會觸發外邊距合併?：

什麼是塌陷

為什麼會出現塌陷呢，只有父子元素會出現塌陷嗎，下面會進行詳細的講解，很重要的，一定要掌握理解，只有瞭解了原因才會自然的想起他的解決方式。

原因：在標準文件流中，豎直方向的margin會出現疊加現象（水平方向不會塌陷），兩個margin緊挨著，中間沒有border或者padding，當兩個margin直接接觸，就產生了合併，即外邊距合併，表現為較大的margin會覆蓋掉較小的margin，豎直方向的兩個盒子中間只有一個較大的margin，這就是margin塌陷現象。

出現塌陷的物件

1. 兄弟關係的盒子
2. 父子關係的盒子

塌陷的解決方案

這裡總結了一下七種解決方案，需要根據專案的要求，選擇適合的解決方案即可

定位詳解

語法：定位 = 定位模式 + 邊偏移

邊偏移

在 CSS 中，通過 top、bottom、left 和 right 屬性定義元素的邊偏移，簡單的說就是上下左右四個方向名詞?

定位的盒子有了邊偏移才有價值。 一般情況下，凡是有定位地方必定有邊偏移。

定位模式

在CSS中，通過position的屬性定義元素的定位模式，就是定位的分類，很重要的需要掌握的

選擇器 { position: 屬性值; }
複製程式碼

定位模式是有不同分類的，在不同情況下，我們用到不同的定位模式。

相對定位（relative）很重要

相對定位是元素相對於他自己原來在標準流中的位置來移動的。

相對定位的特性：

1. 相對於他自己原來在標準流中的位置來移動的。
2. 定位的盒子原來在標準流中的區域繼續佔有，後面的盒子仍然以標準流的方式來對待他。

絕對定位（absolute）很重要

絕對定位是元素以帶有定位的父級元素來移動的 絕對定位的特性：

1. 完全不佔任何位置
2. 依據最近的已經定位（絕對、固定或者相對定位）的父元素進行定位。
3. 父元素如果沒有定位，則以瀏覽器為標準定位

如?圖所示的，父級元素有一個相對定位模式，給子元素設定一個絕對定位，此時子盒子會以父級的左上角為標準點進行定位。

如下圖所示，父級元素沒有定位的時候，給子元素設定一個絕對定位，該子盒子就會以文件即瀏覽器為標準進行定位。注意這裡的父級元素不僅指子元素的上一級父親元素，會一級一級元素的向上找，如果父親元素的上一級有定位，就以爺爺元素為準進行定位。

總結一下：將元素依據最近的已經定位（絕對、固定或者相對定位）的父元素進行定位。

固定定位（fixed）很重要

固定定位是絕對定位的特殊形式

固定定位的特性：

1. 完全不佔有位置
2. 只認瀏覽器的可視視窗，跟父級元素無任何關係，不隨滾動條而滾動

絕對定位盒子居中對齊

絕對定位的盒子不能通過margin:0 auto水平居中。

這裡有一個簡單的計算公式讓絕對定位的盒子水平居中，我們先讓盒子左移50%，這時我們會發現，移動位置多了呀，多的長度是盒子的一般，那我們就需要減去盒子一半的長度，可以設定margin-left為負數，負數的值就等於盒子寬度的一半。

絕對定位盒子垂直水平居中hin重要

?上面主要是對絕對定位水平居中有一個詳細的講解，接下來通過一張圖對絕對定位的的垂直水平居中，以及其他位置的居中進行詳細的講解：

我們先看這個圖片，整個黑色邊框是一個長800px，高度為400px的大盒子，示例盒子寬度為200px，高度為100px，上下兩個盒子分別水平居中，左右兩個盒子是垂直居中，和水平居中原理一致。

重點來啦，我們平時經常會用到的垂直水平居中，給盒子設定絕對定位後，設定：left：50%，top：50%，這時會發現盒子距離中間位置向右多偏移了寬度的一半，向下多偏移了高度的一半，所以也是需要減去的，給盒子來一個margin：-50px -100px；具體程式碼示例如下?：