盒子模型（CSS重點）

其實，CSS就三個大模塊：盒子模型、浮動、定位，其餘的都是細節。要求這三部分，無論如何也要學的非常精通。

所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。

看透網頁佈局的本質

網頁佈局中，我們是如何把裏面的文字，圖片，按照美工給我們的效果圖排列的整齊有序呢？

牛奶是怎樣運輸，讓消費者購買的呢？

我們說過，行內元素比如文字類似牛奶，也需要一個盒子把他們裝起來，我們前面學過的雙標籤都是一個盒子。有了盒子，我們就可以隨意的，自由的，擺放位置了。

看透網頁佈局的本質：把網頁元素比如文字圖片等等，放入盒子裏面，然後利用CSS擺放盒子的過程，就是網頁佈局。

CSS 其實沒有太多邏輯可言，類似我們小時候玩的積木,我們可以自由的，隨意的擺放出我們想要的效果。

盒子模型（Box Model）

這裏略過老舊的ie盒子模型（IE6以下），對不起，我都沒見過IE5的瀏覽器。

首先，我們來看一張圖，來體會下什麼是盒子模型。

所有的文檔元素（標籤）都會生成一個矩形框，我們成爲元素框（element box），它描述了一個文檔元素再網頁佈局彙總所佔的位置大小。因此，每個盒子除了有自己大小和位置外，還影響着其他盒子的大小和位置。

盒子邊框（border）

邊框就是那層皮。橘子皮。。柚子皮。。橙子皮。。。

語法：

border : border-width || border-style || border-color

邊框屬性—設置邊框樣式（border-style）

邊框樣式用於定義頁面中邊框的風格，常用屬性值如下：

none：沒有邊框即忽略所有邊框的寬度（默認值） 
solid：邊框爲單實線(最爲常用的) 
dashed：邊框爲虛線 
dotted：邊框爲點線 
double：邊框爲雙實線

盒子邊框寫法總結表


設置內容	樣式屬性	常用屬性值
上邊框	border-top-style:樣式; border-top-width:寬度;border-top-color:顏色;border-top:寬度樣式顏色;
下邊框	border-bottom-style:樣式;border- bottom-width:寬度;border- bottom-color:顏色;border-bottom:寬度樣式顏色;
左邊框	border-left-style:樣式; border-left-width:寬度;border-left-color:顏色;border-left:寬度樣式顏色;
右邊框	border-right-style:樣式;border-right-width:寬度;border-right-color:顏色;border-right:寬度樣式顏色;
樣式綜合設置	border-style:上邊 [右邊下邊左邊];	none無（默認）、solid單實線、dashed虛線、dotted點線、double雙實線
寬度綜合設置	border-width:上邊 [右邊下邊左邊];	像素值
顏色綜合設置	border-color:上邊 [右邊下邊左邊];	顏色值、#十六進制、rgb(r,g,b)、rgb(r%,g%,b%)
邊框綜合設置	border:四邊寬度四邊樣式四邊顏色;

表格的細線邊框

以前學過的html表格邊框很粗，這裏只需要CSS一句話就可以美觀起來。讓我們真的相信，CSS就是我們的白馬王子（白雪公主）。

table{ border-collapse:collapse; } collapse 單詞是合併的意思

border-collapse:collapse; 表示邊框合併在一起。

圓角邊框(CSS3)

從此以後，我們的世界不只有矩形。radius 半徑（距離）

語法格式：

border-radius: 左上角 右上角 右下角 左下角;

內邊距（padding）

padding屬性用於設置內邊距。是指邊框與內容之間的距離。

padding-top:上內邊距

padding-right:右內邊距

padding-bottom:下內邊距

padding-left:左內邊距

注意：後面跟幾個數值表示的意思是不一樣的。

值的個數	表達意思
1個值	padding：上下左右邊距比如padding: 3px; 表示上下左右都是3像素
2個值	padding: 上下邊距左右邊距比如 padding: 3px 5px; 表示上下3像素左右 5像素
3個值	padding：上邊距左右邊距下邊距比如 padding: 3px 5px 10px; 表示上是3像素左右是5像素下是10像素
4個值	padding:上內邊距右內邊距下內邊距左內邊距比如: padding: 3px 5px 10px 15px; 表示上3px 右是5px 下 10px 左15px 順時針

外邊距（margin）

margin屬性用於設置外邊距。設置外邊距會在元素之間創建“空白”，這段空白通常不能放置其他內容。

margin-top:上外邊距

margin-right:右外邊距

margin-bottom:下外邊距

margin-left:上外邊距

margin:上外邊距右外邊距下外邊距左外邊

取值順序跟內邊距相同。

外邊距實現盒子居中

可以讓一個盒子實現水平居中，需要滿足一下兩個條件：

必須是塊級元素。
盒子必須指定了寬度（width）

然後就給左右的外邊距都設置爲auto，就可使塊級元素水平居中。

實際工作中常用這種方式進行網頁佈局，示例代碼如下：

.header{ width:960px; margin:0 auto;}

文字盒子居中圖片和背景區別

文字水平居中是 text-align: center
盒子水平居中左右margin 改爲 auto

text-align: center; /* 文字居中水平 */ 
margin: 10px auto;  /* 盒子水平居中 左右margin 改爲 auto 就闊以了 */

插入圖片我們用的最多比如產品展示類
背景圖片我們一般用於小圖標背景或者超大背景圖片

section img {  
width: 200px;/* 插入圖片更改大小 width 和 height */
height: 210px;
margin-top: 30px;  /* 插入圖片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入當圖片也是一個盒子 */
}

aside {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;

background-size: 200px 210px; /* 背景圖片更改大小隻能用 background-size */
background-position: 30px 50px; /* 背景圖片更該位置 我用 background-position */
}

清除元素的默認內外邊距

爲了更方便地控制網頁中的元素，製作網頁時，可使用如下代碼清除元素的默認內外邊距：

* {
  padding:0;         /* 清除內邊距 */
  margin:0;          /* 清除外邊距 */
}

注意：行內元素是隻有左右外邊距的，是沒有上下外邊距的。內邊距，在ie6等低版本瀏覽器也會有問題。

我們儘量不要給行內元素指定上下的內外邊距就好了。

外邊距合併

使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。

相鄰塊元素垂直外邊距的合併

當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現象被稱爲相鄰塊元素垂直外邊距的合併（也稱外邊距塌陷）。

解決方案：避免就好了。

嵌套塊元素垂直外邊距的合併

對於兩個嵌套關係的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合併，合併後的外邊距爲兩者中的較大者，即使父元素的上外邊距爲0，也會發生合併。

解決方案：

可以爲父元素定義1像素的上邊框或上內邊距。
可以爲父元素添加overflow:hidden。

待續。。。。

content寬度和高度

使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。

width和height的屬性值可以爲不同單位的數值或相對於父元素的百分比%，實際工作中最常用的是像素值。

大多數瀏覽器，如Firefox、IE6及以上版本都採用了W3C規範，符合CSS規範的盒子模型的總寬度和總高度的計算原則是：

  /*外盒尺寸計算（元素空間尺寸）*/
  Element空間高度 = content height + padding + border + margin
  Element 空間寬度 = content width + padding + border + margin
  /*內盒尺寸計算（元素實際大小）*/
  Element Height = content height + padding + border （Height爲內容高度）
  Element Width = content width + padding + border （Width爲內容寬度）

注意：

1、寬度屬性width和高度屬性height僅適用於塊級元素，對行內元素無效（ img 標籤和 input除外）。

2、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合併的情況。

3、如果一個盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding 不會影響本盒子大小。

盒子模型佈局穩定性

開始學習盒子模型，同學們最大的困惑就是，分不清內外邊距的使用，什麼情況下使用內邊距，什麼情況下使用外邊距？

答案是：其實他們大部分情況下是可以混用的。就是說，你用內邊距也可以，用外邊距也可以。你覺得哪個方便，就用哪個。

但是，總有一個最好用的吧，我們根據穩定性來分，建議如下：

按照優先使用寬度（width）其次使用內邊距（padding）再次外邊距（margin）。

  width >  padding  >   margin

原因：

margin 會有外邊距合併還有 ie6下面margin 加倍的bug（討厭）所以最後使用。
padding 會影響盒子大小，需要進行加減計算（麻煩）其次使用。
width 沒有問題（嗨皮）我們經常使用寬度剩餘法高度剩餘法來做。

盒子陰影

語法格式：

box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色  內/外陰影；

前兩個屬性是必須寫的。其餘的可以省略。
外陰影 (outset) 但是不能寫默認想要內陰影 inset

div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸（影子大小） 陰影顏色 內/外陰影； */
box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);

}

浮動(float)

普通流(normal flow)

這個單詞很多人翻譯爲文檔流，字面翻譯普通流或者標準流都可以。

前面我們說過，網頁佈局的核心，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置？

CSS的定位機制有3種：普通流（標準流）、浮動和定位。

html語言當中另外一個相當重要的概念----------標準流！或者普通流。普通流實際上就是一個網頁內標籤元素正常從上到下，從左到右排列順序的意思，比如塊級元素會獨佔一行，行內元素會按順序依次前後排列；按照這種大前提的佈局排列之下絕對不會出現例外的情況叫做普通流佈局。

浮動(float)

浮動最早是用來控制圖片，以便達到其他元素（特別是文字）實現“環繞”圖片的效果。

後來，我們發現浮動有個很有意思的事情：就是讓任何盒子可以一行排列,因此我們就慢慢的偏離主題，用浮動的特性來佈局了。（CSS3已經我們真正意義上的網頁佈局，具體CSS3我們會詳細解釋）

什麼是浮動？

元素的浮動是指設置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。

在CSS中，通過float屬性來定義浮動，其基本語法格式如下：

選擇器{float:屬性值;}

屬性值	描述
left	元素向左浮動
right	元素向右浮動
none	元素不浮動（默認值）

浮動詳細內幕特性

浮動脫離標準流，不佔位置，會影響標準流。浮動只有左右浮動。

浮動首先創建包含塊的概念（包裹）。就是說， 浮動的元素總是找理它最近的父級元素對齊。但是不會超出內邊距的範圍。

浮動的元素排列位置，跟上一個元素（塊級）有關係。
如果上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；
如果上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊。

由2可以推斷出，一個父盒子裏面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。

元素添加浮動後，元素會具有行內塊元素的特性。元素的大小完全取決於定義的大小或者默認的內容多少浮動根據元素書寫的位置來顯示相應的浮動。

總結：浮動 --->

浮動的目的就是爲了讓多個塊級元素同一行上顯示。

float 浮漏特

浮： 加了浮動的元素盒子是浮起來的，漂浮在其他的標準流盒子上面。 
漏： 加了浮動的盒子，不佔位置的，它浮起來了，它原來的位置漏 給了標準流的盒子。
特： 特別注意，首先浮動的盒子需要和標準流的父級搭配使用， 其次 特別的注意浮動可以使元素顯示模式體現爲行內塊特性。

版心和佈局流程

閱讀報紙時容易發現，雖然報紙中的內容很多，但是經過合理地排版，版面依然清晰、易讀。同樣，在製作網頁時，要想使頁面結構清晰、有條理，也需要對網頁進行“排版”。

“版心”(可視區) 是指網頁中主體內容所在的區域。一般在瀏覽器窗口中水平居中顯示，常見的寬度值爲960px、980px、1000px、1200px等。

佈局流程

爲了提高網頁製作的效率，佈局時通常需要遵守一定的佈局流程，具體如下：

1、確定頁面的版心（可視區）。

2、分析頁面中的行模塊，以及每個行模塊中的列模塊。

3、製作HTML結構。

4、CSS初始化，然後開始運用盒子模型的原理，通過DIV+CSS佈局來控制網頁的各個模塊。

一列固定寬度且居中

最普通的，最爲常用的結構

兩列左窄右寬型

比如小米小米官網

通欄平均分佈型

比如錘子錘子官網

清除浮動

人生就像乘坐北京地鐵一號線：

途經國貿，羨慕繁華；

途經天安門，幻想權力；

途經金融街，夢想發財；

經過公主墳，遙想華麗家族；

經過玉泉路，依然雄心勃勃…

這時，有個聲音飄然入耳:乘客你好,八寶山馬上就要到了！

頓時醒悟：人生苦短，有始有終。

好比我們的浮動，有浮動開始，則就應該有浮動結束。

爲什麼要清除浮動

我們前面說過，浮動本質是用來做一些文字混排效果的，但是被我們拿來做佈局用，則會有很多的問題出現，但是，你不能說浮動不好。

由於浮動元素不再佔用原文檔流的位置，所以它會對後面的元素排版產生影響，爲了解決這些問題，此時就需要在該元素中清除浮動。

準確地說，並不是清除浮動，而是清除浮動後造成的影響

如果浮動一開始就是一個美麗的錯誤，那麼請用正確的方法挽救它。

清除浮動本質

清除浮動主要爲了解決父級元素因爲子級浮動引起內部高度爲0 的問題。

清除浮動的方法

其實本質叫做閉合浮動更好一些, 記住，清除浮動就是把浮動的盒子圈到裏面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。

在CSS中，clear屬性用於清除浮動，其基本語法格式如下：

選擇器{clear:屬性值;}

屬性值	描述
left	不允許左側有浮動元素（清除左側浮動的影響）
right	不允許右側有浮動元素（清除右側浮動的影響）
both	同時清除左右兩側浮動的影響

額外標籤法

是W3C推薦的做法是通過在浮動元素末尾添加一個空的標籤例如 <div style=”clear:both”></div>，或則其他標籤br等亦可。

優點：通俗易懂，書寫方便

缺點：添加許多無意義的標籤，結構化較差。我只能說，w3c你推薦的方法我不接受，你不值得擁有。。。

父級添加overflow屬性方法

可以通過觸發BFC的方式，可以實現清除浮動效果。（BFC後面講解）

可以給父級添加： overflow爲 hidden|auto|scroll  都可以實現。

優點：代碼簡潔

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

使用after僞元素清除浮動

:after 方式爲空元素的升級版，好處是不用單獨加標籤了

使用方法：

 .clearfix:after { 
      content: ".";
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden;  
    }   

 .clearfix {*zoom: 1;}   /* IE6、7 專有 */

優點：符合閉合浮動思想結構語義化正確

缺點：由於IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

代表網站：百度、淘寶網、網易等

注意： content:"." 裏面儘量跟一個小點，或者其他，儘量不要爲空，否則再firefox 7.0前的版本會有生成空格。

使用before和after雙僞元素清除浮動

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 這句話可以出發BFC BFC可以清除浮動,BFC我們後面講 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

優點：代碼更簡潔

缺點：由於IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

代表網站：小米、騰訊等

定位(position)

如果，說浮動，關鍵在一個 “浮” 字上面，那麼我們的定位，關鍵在於一個 “位” 上。

PS: 定位是我們CSS算是數一數二難點的了，但是，你務必要學好它，我們CSS離不開定位，特別是後面的js特效，天天和定位打交道。不要抵觸它，反而要愛上它，它可以讓我們工作更加輕鬆哦！

爲什麼要用定位？

那麼定位，最長運用的場景再那裏呢？來看幾幅圖片，你一定會有感悟！

第一幅圖，小黃色塊可以再圖片上移動：

以上，如果用標準流或者浮動，實現會比較複雜或者難以實現，此時我們用定位來做，just soso！

元素的定位屬性

元素的定位屬性主要包括定位模式和邊偏移兩部分。

1、邊偏移

邊偏移屬性	描述
top	頂端偏移量，定義元素相對於其父元素上邊線的距離
bottom	底部偏移量，定義元素相對於其父元素下邊線的距離
left	左側偏移量，定義元素相對於其父元素左邊線的距離
right	右側偏移量，定義元素相對於其父元素右邊線的距離

也就說，以後定位要和這邊偏移搭配使用了，比如 top: 100px; left: 30px; 等等

2、定位模式(定位的分類)

在CSS中，position屬性用於定義元素的定位模式，其基本語法格式如下：

選擇器{position:屬性值;}

position屬性的常用值

值	描述
static	自動定位（默認定位方式）
relative	相對定位，相對於其原文檔流的位置進行定位
absolute	絕對定位，相對於其上一個已經定位的父元素進行定位
fixed	固定定位，相對於瀏覽器窗口進行定位

靜態定位(static)

靜態定位是所有元素的默認定位方式，當position屬性的取值爲static時，可以將元素定位於靜態位置。所謂靜態位置就是各個元素在HTML文檔流中默認的位置。

上面的話翻譯成白話：就是網頁中所有元素都默認的是靜態定位哦！其實就是標準流的特性。

在靜態定位狀態下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。

PS：靜態定位其實沒啥可說的。

相對定位relative(自戀型)

小笑話： 
剛剛看到一個超級超級帥的帥哥，看得我都忍不住想和他搞基了。
世間怎會有如此之完美的男人。
我和他就這樣一動不動的對視着，就彷彿一見鍾情。時間也在這一瞬間停止了。
直到我的手麻了。才戀戀不捨的放下鏡子。。。。

相對定位是將元素相對於它在標準流中的位置進行定位，當position屬性的取值爲relative時，可以將元素定位於相對位置。

對元素設置相對定位後，可以通過邊偏移屬性改變元素的位置，但是它在文檔流中的位置仍然保留。如下圖所示，即是一個相對定位的效果展示：

注意：

相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來的所佔的位置，繼續佔有。
其次，每次移動的位置，是以自己的左上角爲基點移動（相對於自己來移動位置）

就是說，相對定位的盒子仍在標準流中，它後面的盒子仍以標準流方式對待它。（相對定位不脫標）

如果說浮動的主要目的是讓多個塊級元素一行顯示，那麼定位的主要價值就是移動位置，讓盒子到我們想要的位置上去。

絕對定位absolute (拼爹型)

小笑話：

吃早飯時，老婆往兒子碗裏放了兩個煎蛋，兒子全給了我，
還一本正經地說：“爸爸，多吃點，男人養家不容易。”

我一陣感動，剛想誇他兩句。 

兒子接着說：“以後全靠你讓我拼爹了！”

　[注意] 如果文檔可滾動，絕對定位元素會隨着它滾動，因爲元素最終會相對於正常流的某一部分定位。

當position屬性的取值爲absolute時，可以將元素的定位模式設置爲絕對定位。

注意：絕對定位最重要的一點是，它可以通過邊偏移移動位置，但是它完全脫標，完全不佔位置。

父級沒有定位

若所有父元素都沒有定位，以瀏覽器爲準對齊(document文檔)。

父級有定位

絕對定位是將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。

子絕父相

這個“子絕父相”太重要了，是我們學習定位的口訣，時時刻刻記住的。

這句話的意思是子級是絕對定位的話，父級要用相對定位。

首先，我們說下，絕對定位是將元素依據最近的已經定位絕對、固定或相對定位）的父元素（祖先）進行定位。

就是說，子級是絕對定位，父親只要是定位即可（不管父親是絕對定位還是相對定位，甚至是固定定位都可以），就是說，子絕父絕，子絕父相都是正確的。

但是，在我們網頁佈局的時候，最常說的子絕父相是怎麼來的呢？請看如下圖：

所以，我們可以得出如下結論：

因爲子級是絕對定位，不會佔有位置，可以放到父盒子裏面的任何一個地方。

父盒子佈局時，需要佔有位置，因此父親只能是相對定位.

這就是子絕父相的由來。

絕對定位的盒子水平/垂直居中

普通的盒子是左右margin 改爲 auto就可，但是對於絕對定位就無效了

定位的盒子也可以水平或者垂直居中，有一個算法。

首先left 50% 父盒子的一半大小
然後走自己外邊距負的一半值就可以了 margin-left。

固定定位fixed(認死理型)

固定定位是絕對定位的一種特殊形式，類似於正方形是一個特殊的矩形。它以瀏覽器窗口作爲參照物來定義網頁元素。當position屬性的取值爲fixed時，即可將元素的定位模式設置爲固定定位。

當對元素設置固定定位後，它將脫離標準文檔流的控制，始終依據瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。

固定定位有兩點：

固定定位的元素跟父親沒有任何關係，只認瀏覽器。
固定定位完全脫標，不佔有位置，不隨着滾動條滾動。

記憶法：就類似於孫猴子，無父無母，好不容易找到一個可靠的師傅（瀏覽器），就聽的師傅的，別的都不聽。

ie6等低版本瀏覽器不支持固定定位。

疊放次序（z-index）

當對多個元素同時設置定位時，定位元素之間有可能會發生重疊。

在CSS中，要想調整重疊定位元素的堆疊順序，可以對定位元素應用z-index層疊等級屬性，其取值可爲正整數、負整數和0。

比如： z-index: 2;

注意：

z-index的默認屬性值是0，取值越大，定位元素在層疊元素中越居上。
如果取值相同，則根據書寫順序，後來居上。
後面數字一定不能加單位。
只有相對定位，絕對定位，固定定位有此屬性，其餘標準流，浮動，靜態定位都無此屬性，亦不可指定此屬性。

四種定位總結

定位模式	是否脫標占有位置	是否可以使用邊偏移	移動位置基準
靜態static	不脫標，正常模式	不可以	正常模式
相對定位relative	不脫標，佔有位置	可以	相對自身位置移動（自戀型）
絕對定位absolute	完全脫標，不佔有位置	可以	相對於定位父級移動位置（拼爹型）
固定定位fixed	完全脫標，不佔有位置	可以	相對於瀏覽器移動位置（認死理型）

定位模式轉換

跟浮動一樣，元素添加了絕對定位和固定定位之後，元素模式也會發生轉換，都轉換爲行內塊模式，

** 因此比如行內元素如果添加了絕對定位或者固定定位後浮動後，可以不用轉換模式，直接給高度和寬度就可以了。**

元素的顯示與隱藏

在CSS中有三個顯示和隱藏的單詞比較常見，我們要區分開，他們分別是 display visibility 和 overflow。

他們的主要目的是讓一個元素在頁面中消失，但是不在文檔源碼中刪除。最常見的是網站廣告，當我們點擊類似關閉不見了，但是我們重新刷新頁面，它們又會出現和你玩躲貓貓！！

display 顯示

display 設置或檢索對象是否及如何顯示。

display : none 隱藏對象與它相反的是 display:block 除了轉換爲塊級元素之外，同時還有顯示元素的意思。

特點：隱藏之後，不再保留位置。

visibility 可見性

設置或檢索是否顯示對象。

visible : 　對象可視

hidden : 　對象隱藏

特點：隱藏之後，繼續保留原有位置。（停職留薪）

overflow 溢出

檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。

visible : 　不剪切內容也不添加滾動條。

auto : 　超出自動顯示滾動條，不超出不顯示滾動條

hidden : 　不顯示超過對象尺寸的內容，超出的部分隱藏掉

scroll : 　不管超出內容否，總是顯示滾動條

CSS高級技巧

CSS用戶界面樣式

所謂的界面樣式，就是更改一些用戶操作樣式，比如更改用戶的鼠標樣式，表單輪廓等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制，因此我們就放棄了。防止表單域拖拽

鼠標樣式cursor

設置或檢索在對象上移動的鼠標指針採用何種系統預定義的光標形狀。

cursor :  default  小白 | pointer  小手  | move  移動  |  text  文本

鼠標放我身上查看效果哦：

<ul>
 <li style="cursor:default">我是小白</li>
 <li style="cursor:pointer">我是小手</li>
 <li style="cursor:move">我是移動</li>
 <li style="cursor:text">我是文本</li>
</ul>

儘量不要用hand 因爲火狐不支持 pointer ie6以上都支持的儘量用

輪廓 outline

是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。

 outline : outline-color ||outline-style || outline-width

但是我們都不關心可以設置多少，我們平時都是去掉的。

最直接的寫法是： outline: 0; 或者 outline: none;

 <input  type="text"  style="outline: 0;"/>

防止拖拽文本域resize

resize：none 這個單詞可以防止火狐谷歌等瀏覽器隨意的拖動文本域。

右下角可以拖拽：

<textarea></textarea>

右下角不可以拖拽：

<textarea  style="resize: none;"></textarea>

vertical-align 垂直對齊

以前我們講過讓帶有寬度的塊級元素居中對齊，是margin: 0 auto;

以前我們還講過讓文字居中對齊，是 text-align: center;

但是我們從來沒有講過有垂直居中的屬性，我們的媽媽一直很擔心我們的垂直居中怎麼做。

vertical-align 垂直對齊，這個看上去很美好的一個屬性，實際有着不可捉摸的脾氣，否則我們也不會這麼晚來講解。

vertical-align : baseline |top |middle |bottom

設置或檢索對象內容的垂直對其方式。

vertical-align 不影響塊級元素中的內容對齊，它只針對於行內元素或者行內塊元素，特別是行內塊元素， 通常用來控制圖片/表單與文字的對齊。

圖片、表單和文字對齊

所以我們知道，我們可以通過vertical-align 控制圖片和文字的垂直關係了。默認的圖片會和文字基線對齊。

去除圖片底側空白縫隙

有個很重要特性你要記住：圖片或者表單等行內塊元素，他的底線會和父級盒子的基線對齊。這樣會造成一個問題，就是圖片底側會有一個空白縫隙。

解決的方法就是：

給img vertical-align:middle | top等等。讓圖片不要和基線對齊。
給img 添加 display：block; 轉換爲塊級元素就不會存在問題了。

溢出的文字隱藏

word-break:自動換行

normal 使用瀏覽器默認的換行規則。

break-all 允許在單詞內換行。

keep-all 只能在半角空格或連字符處換行。

主要處理英文單詞

white-space

white-space設置或檢索對象內文本顯示方式。通常我們使用於強制一行顯示內容

normal : 　默認處理方式 nowrap : 　強制在同一行內顯示所有文本，直到文本結束或者遭遇br標籤對象才換行。

可以處理中文

text-overflow 文字溢出

text-overflow : clip | ellipsis

設置或檢索是否使用一個省略標記（...）標示對象內文本的溢出

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

ellipsis : 　當對象內文本溢出時顯示省略標記（...）

注意一定要首先強制一行內顯示，再次和overflow屬性搭配使用

#CSS精靈技術（sprite）小妖精雪碧

精靈技術產生的背景

圖所示爲網頁的請求原理圖，當用戶訪問一個網站時，需要向服務器發送請求，網頁上的每張圖像都要經過一次請求才能展現給用戶。

然而，一個網頁中往往會應用很多小的背景圖像作爲修飾，當網頁中的圖像過多時，服務器就會頻繁地接受和發送請求，這將大大降低頁面的加載速度。爲了有效地減少服務器接受和發送請求的次數，提高頁面的加載速度，出現了CSS精靈技術（也稱CSS Sprites、CSS雪碧）。

精靈技術本質

簡單地說，CSS精靈是一種處理網頁背景圖像的方式。它將一個頁面涉及到的所有零星背景圖像都集中到一張大圖中去，然後將大圖應用於網頁，這樣，當用戶訪問該頁面時，只需向服務發送一次請求，網頁中的背景圖像即可全部展示出來。通常情況下，這個由很多小的背景圖像合成的大圖被稱爲精靈圖（雪碧圖），如下圖所示爲京東網站中的一個精靈圖。

精靈技術的使用

CSS 精靈其實是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），然而，各個網頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖，就需要使用CSS的background-image、background-repeat和background-position屬性進行背景定位，其中最關鍵的是使用background-position屬性精確地定位。

製作精靈圖

CSS 精靈其實是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），那我們要做的，就是把小圖拼合成一張大圖。

大部分情況下，精靈圖都是網頁美工做。

我們精靈圖上放的都是小的裝飾性質的背景圖片。 插入圖片不能往上放。
我們精靈圖的寬度取決於最寬的那個背景。 
我們可以橫向擺放也可以縱向擺放，但是每個圖片之間，間隔至少隔開偶數像素合適。
在我們精靈圖的最低端，留一片空隙，方便我們以後添加其他精靈圖。

結束語：小公司，背景圖片很少的情況，沒有必要使用精靈技術，維護成本太高。如果是背景圖片比較多，可以建議使用精靈技術。

滑動門

先來體會下現實中的滑動門,或者你可以叫做推拉門：

滑動門出現的背景

製作網頁時，爲了美觀，常常需要爲網頁元素設置特殊形狀的背景，比如微信導航欄，有凸起和凹下去的感覺，最大的問題是裏面的字數不一樣多，咋辦？

爲了使各種特殊形狀的背景能夠自適應元素中文本內容的多少，出現了CSS滑動門技術。它從新的角度構建頁面，使各種特殊形狀的背景能夠自由拉伸滑動，以適應元素內部的文本內容，可用性更強。最常見於各種導航欄的滑動門。

核心技術

核心技術就是利用CSS精靈（主要是背景位置）和盒子padding撐開寬度, 以便能適應不同字數的導航欄。

一般的經典佈局都是這樣的：

<li>
  <a href="#">
    <span>導航欄內容</span>
  </a>
</li>

總結：

a 設置背景左側，padding撐開合適寬度。
span 設置背景右側， padding撐開合適寬度剩下由文字繼續撐開寬度。
之所以a包含span就是因爲整個導航都是可以點擊的。

學成在線綜合案例

字體圖標

圖片是有諸多優點的，但是缺點很明顯，比如圖片不但增加了總文件的大小，還增加了很多額外的"http請求"，這都會大大降低網頁的性能的。更重要的是圖片不能很好的進行“縮放”，因爲圖片放大和縮小會失真。我們後面會學習移動端響應式，很多情況下希望我們的圖標是可以縮放的。此時，一個非常重要的技術出現了，額不是出現了，是以前就有，是被從新"寵幸"啦。。這就是字體圖標（iconfont).

字體圖標優點

可以做出跟圖片一樣可以做的事情,改變透明度、旋轉度，等..
但是本質其實是文字，可以很隨意的改變顏色、產生陰影、透明效果等等...
本身體積更小，但攜帶的信息並沒有削減。
幾乎支持所有的瀏覽器
移動端設備必備良藥...

字體圖標使用流程

總體來說，字體圖標按照如下流程：

設計字體圖標

假如圖標是我們公司單獨設計，那就需要第一步了，這個屬於UI設計人員的工作，他們在 illustrator 或 Sketch 這類矢量圖形軟件裏創建 icon圖標，比如下圖：

之後保存爲svg格式，然後給我們前端人員就好了。

其實第一步，我們不需要關心，只需要給我們這些圖標就可以了，如果圖標是大衆的，網上本來就有的，可以直接跳過第一步，進入第三步。

上傳生成字體包

當UI設計人員給我們svg文件的時候，我們需要轉換成我們頁面能使用的字體文件，而且需要生成的是兼容性的適合各個瀏覽器的。

推薦網站： http://icomoon.io

icomoon字庫

IcoMoon成立於2011年，推出的第一個自定義圖標字體生成器，它允許用戶選擇他們所需要的圖標，使它們成一字型。內容種類繁多，非常全面，唯一的遺憾是國外服務器，打開網速較慢。

推薦網站： http://www.iconfont.cn/

阿里icon font字庫

http://www.iconfont.cn/

這個是阿里媽媽M2UX的一個icon font字體圖標字庫，包含了淘寶圖標庫和阿里媽媽圖標庫。可以使用AI製作圖標上傳生成。一個字，免費，免費！！

fontello

http://fontello.com/

在線定製你自己的icon font字體圖標字庫，也可以直接從GitHub下載整個圖標集，該項目也是開源的。

Font-Awesome

http://fortawesome.github.io/Font-Awesome/

這是我最喜歡的字庫之一了，更新比較快。目前已經有369個圖標了。

Glyphicon Halflings

http://glyphicons.com/

這個字體圖標可以在Bootstrap下免費使用。自帶了200多個圖標。

Icons8

https://icons8.com/

提供PNG免費下載，像素大能到500PX

下載兼容字體包

剛纔上傳完畢，網站會給我們把UI做的svg圖片轉換爲我們的字體格式，然後下載下來就好了

當然，我們不需要自己專門的圖標，是想網上找幾個圖標使用，以上2步可以直接省略了，直接到剛纔的網站上找喜歡的下載使用吧。

字體引入到HTML

得到壓縮包之後，最後一步，是最重要的一步了，就是字體文件已經有了，我們需要引入到我們頁面中。

首先把以下4個文件放入到 fonts文件夾裏面。通俗的做法

第一步：在樣式裏面聲明字體：告訴別人我們自己定義的字體
```
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
```
第二步：給盒子使用字體
```
span {
        font-family: "icomoon";
    }
```
第三步：盒子裏面添加結構
```
span::before {
         content: "\e900";
    }
或者  
<span></span>  
```
追加新圖標到原來庫裏面

如果工作中，原來的字體圖標不夠用了，我們需要添加新的字體圖標，但是原來的不能刪除，繼續使用，此時我們需要這樣做

把壓縮包裏面的selection.json 從新上傳，然後，選中自己想要新的圖標，從新下載壓縮包，替換原來文件即可。

CSS入門到精通《二》

盒子模型（CSS重點）

看透網頁佈局的本質

盒子模型（Box Model）

盒子邊框（border）

盒子邊框寫法總結表

表格的細線邊框

圓角邊框(CSS3)

內邊距（padding）

外邊距（margin）

外邊距實現盒子居中

文字盒子居中圖片和背景區別

清除元素的默認內外邊距

外邊距合併

相鄰塊元素垂直外邊距的合併

嵌套塊元素垂直外邊距的合併

content寬度和高度

盒子模型佈局穩定性

盒子陰影

浮動(float)

普通流(normal flow)

浮動(float)

什麼是浮動？

浮動詳細內幕特性

版心和佈局流程

佈局流程

一列固定寬度且居中

兩列左窄右寬型

通欄平均分佈型

清除浮動

爲什麼要清除浮動

清除浮動本質

清除浮動的方法

額外標籤法

父級添加overflow屬性方法

使用after僞元素清除浮動

使用before和after雙僞元素清除浮動

定位(position)

爲什麼要用定位？

元素的定位屬性

靜態定位(static)

相對定位relative(自戀型)

絕對定位absolute (拼爹型)

父級沒有定位

父級有定位

子絕父相

絕對定位的盒子水平/垂直居中

固定定位fixed(認死理型)

疊放次序（z-index）

四種定位總結

定位模式轉換

元素的顯示與隱藏

display 顯示

visibility 可見性

overflow 溢出

CSS高級技巧

CSS用戶界面樣式

鼠標樣式cursor

輪廓 outline

防止拖拽文本域resize

vertical-align 垂直對齊

圖片、表單和文字對齊

去除圖片底側空白縫隙

溢出的文字隱藏

word-break:自動換行

white-space

text-overflow 文字溢出

精靈技術產生的背景

精靈技術本質

精靈技術的使用

製作精靈圖

滑動門

滑動門出現的背景

核心技術

學成在線綜合案例

字體圖標

字體圖標優點

字體圖標使用流程

設計字體圖標

上傳生成字體包