font:綜合設定字體樣式

• 基本語法:

  選擇器 {
  	font: font-style  font-weight  font-size/line-height  font-family;
  }
  

• 注意

  • 使用font屬性時,必須按上面的語法格式中的順序書寫,不能更換順序, 各個屬性以空格隔開，
  • 其中不需要設定的屬性可以省略(取默認值), 但必須保留fint-size和font-family屬性, 否則font屬性將不起作用，

font總結

CSS外觀屬性

color: 文本顏色

• color屬性用于定義文本的顏色

• 取值方式:

  表示表示	屬性值
  預定義的顏色值	red，green，blue等
  十六進制	#FF0000，#FF6600，#29D794
  RGB代碼	rgb(255,0,0)或rgb(100%,0%,0%)

  • 十六進制顏色可以簡寫，

text-align: 文本水平對齊方式

• 作用:

  text-align屬性用于設定文本內容的水平對齊, 相當于HTML中的align對齊屬性

• 其可用屬性值:

  屬性	解釋
  left	左對齊（默認值）
  right	右對齊
  center	居中對齊

  • 是讓盒子內的內容水平居中, 而不是讓盒子居中對齊，

line-height：行間距

• 作用

  line-height屬性用與設定行間距, 就是行與行之間的距離,即字符的垂直間距, 一般稱為行高

• 單位

  ine-height常用的屬性值單位有三種，分別為像素px，相對值em和百分比%

• 一般情況下，行距比字號大7.8像素左右就可以了，

  line-height: 24px;
  

text-indent: 首行縮進

• 作用:

  text-indent屬性用于設定首行文本的縮進

• 屬性值

  • 其屬性值可為不同單位的數值、em字符寬度的倍數、或相對于瀏覽器視窗寬度的百分比%，允許使用負值,
  • 建議使用em作為設定單位，

  1em就是一個字的寬度 如果是漢字的段落,1 em 就是一個漢字的寬度

  p {
  	/*行間距*/
  	line-height: 25px;
  	/*首行縮進2個位元組*/
  	text-indent: 2em;
  }
  

text-decitation 文本的裝飾

text-decoration 通常我們用于給鏈接修改裝飾效果

CSS外觀屬性總結

標簽顯示模式(display)

HTML標簽一般分為塊標簽和行內標簽兩種型別，它們也稱塊元素和行內元素，

塊級元素(block)

常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標簽是最典型的塊元素，

• 塊級元素的特點
  1. 獨占一行，
  2. 高度, 寬度，外邊距以及內邊距都可以控制，
  3. 寬度默認是容器的100%，
  4. 是一個容器,里面可以放行內或塊級元素，
• 注意
  • 只有文字才能組成段落， 因此 p 內不能放塊級元素, 特別是 p 不能放 div
  • 同理h1-h6，dt， 它們都是文字類塊級標簽, 里面不能放其它塊級元素

行內元素(inline)

常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標簽最典型的行內元素，有的地方也成行內元素

• 行內元素的特點:
  1. 相鄰行內元素在一行上，一行可以顯示多個，
  2. 高、款直接設定是無效的，
  3. 默認寬度就是它本身內容的寬度，
  4. 行內元素只能容納文本或其它行內元素，
• 注意:
  • 鏈接內不能再放鏈接
  • 特殊情況a里面可以放塊級元素, 但是給a轉換一下塊級模式最安全，

行內塊元素(inline-block)

在行內元素中有幾個特殊的標簽——<img />、<input />、<td>，可以對它們設定寬高和對齊屬性，有些資料可能會稱它們為行內塊元素，

• 特點:
  1. 和相鄰行內元素(行內塊) 在一行上, 但是之間會有空白縫隙，一行可以顯示多個，
  2. 默認寬度就是它本身內容的寬度，
  3. 高度, 行高, 外邊距以及內邊距都可以控制，

三種模式總結區別

標簽顯示模式轉換 display

• 塊轉行內: display: inline;
• 行內轉塊: display: block;
• 塊、行內元素轉換為行內塊:diaplay: inline-block;

行高(line-height)

英文和漢字 內有 頂線, 中線, 基線, 底線， 行高測量: 為兩行中基線與基線的距離為行高，

• 單行文字垂直居中

  文字的行高等于盒子的高度，

• 行高 = 上距離 + 內容高度 + 下距離

• 行高和高度的三種關系

  • 如果 行高 等 高度 文字會 垂直居中
  • 如果行高 大于 高度 文字會 偏下
  • 如果行高小于高度 文字會 偏上

CSS背景(background)

背景顏色(backgroung-color)

background-color: 顏色值;  
/* 默認的值是 transparent  透明的 */

背景圖片(image)

background-image: none | url( url )

background-image: url(images/demo.png);

背景平鋪(repect)

background-repect: repeat | no-repeat | repeat-x | repeat-y

背景位置(position)

background-position : length || length

background-position : position || position 

• 注意：
  • 必須先指定background-image屬性
  • position 后面是x坐標和y坐標， 可以使用方位名詞或者 精確單位，
  • 如果指定兩個值，兩個值都是方位名字，則兩個值前后順序無關，比如left top和top left效果一致
  • 如果只指定了一個方位名詞，另一個值默認居中對齊，
  • 如果position 后面是精確坐標， 那么第一個，肯定是 x 第二的一定是y
  • 如果只指定一個數值,那該數值一定是x坐標，另一個默認垂直居中
  • 如果指定的兩個值是 精確單位和方位名字混合使用，則第一個值是x坐標，第二個值是y坐標

背景附著(attachment)

背景附著就是解釋背景是滾動的還是固定的

background-attachment: scroll | fixed

背景簡寫

• background：屬性的值的書寫順序官方并沒有強制標準的，為了可讀性，建議大家如下寫：

• background: 背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置;

  background: transparent url(image.jpg) repeat-y  scroll center top ;
  

背景透明(CSS3 rgba)

background: rgba(0,0,0,.3);

• 最后一個引數是alpha 透明度 取值范圍 0~1之間
• 我們習慣把0.3 的 0 省略掉 這樣寫 background: rgba(0, 0, 0, .3);
• 注意： 背景半透明是指盒子背景半透明， 盒子里面的內容不受影響
• 因為是CSS3 ，所以 低于 ie9 的版本是不支持的，

背景總結

CSS 三大特性

CSS層疊性

所謂層疊性是指多種CSS樣式的疊加，

是瀏覽器處理沖突的一個能力,如果一個屬性通過兩個相同選擇器設定到同一個元素上，那么這個時候一個屬性就會將另一個屬性層疊掉

• 樣式沖突，遵循的原則是就近原則， 那個樣式離著結構近，就執行那個樣式，
• 樣式不沖突，不會層疊

CSS繼承性

子標簽會繼承父標簽的某些樣式，如文本顏色和字號，

想要設定一個可繼承的屬性，只需將它應用于父元素即可，

• 注意：
  • 恰當地使用繼承可以簡化代碼，降低CSS樣式的復雜性，比如有很多子級孩子都需要某個樣式，可以給父級指定一個，這些孩子繼承過來就好了，
  • 子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的可以繼承，以及color屬性）

CSS優先級

定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，此時，

• 選擇器相同，則執行層疊性
• 選擇器不同，就會出現優先級的問題，

權重計算

關于CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity（特殊性）

• 值從左到右，左面的最大，一級大于一級，數位之間沒有進制，級別之間不可超越，

  div {
      color: pink!important;  
  }
  

權重疊加

我們經常用交集選擇器，后代選擇器等，是有多個基礎選擇器組合而成，那么此時，就會出現權重疊加，

• 例如:

  • div ul li ------> 0,0,0,3
  • .nav ul li ------> 0,0,1,2
  • a:hover -----—> 0,0,1,1
  • .nav a ------> 0,0,1,1

• 注意:

  數位之間沒有進制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不會存在10個div能趕上一個類選擇器的情況，

繼承的權重是 0

我們修改樣式，一定要看該標簽有沒有被選中，

• 如果選中了，那么以上面的公式來計權重，誰大聽誰的，
• 如果沒有選中，那么權重是0，因為繼承的權重為0.

盒子模型

所謂盒子模型：

就是把HTML頁面中的布局元素看作是一個矩形的盒子，也就是一個盛裝內容的容器，

• 盒子模型有元素的內容、邊框（border）、內邊距（padding）、和外邊距（margin）組成，
• 盒子里面的文字和圖片等元素是 內容區域
• 盒子的厚度 我們成為 盒子的邊框
• 盒子內容與邊框的距離是內邊距（類似單元格的 cellpadding)
• 盒子與盒子之間的距離是外邊距（類似單元格的 cellspacing）

盒子邊框(border)

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

• 邊框的樣式:
  • none: 沒有比那狂即忽略所有邊框的寬度(默認值)
  • solid: 邊框為單實線(常用)
  • dashed: 邊框為虛線
  • dotted: 邊框為點線

邊框綜合設定

border: border-width  || border-style  || border-color
/* 例如 */
border: 1px solid red; /* 沒有順序 */

盒子邊框寫法總結表

表格的細線邊框

• 通過表格的 cellspaceing="0", 將單元格與單元格之間的距離設定為0

• 但是兩個單元格之間的邊框會出現重疊, 從而使邊框變粗

• 通過css屬性設定:

  table {
  	border-collapse: collapse;
  }
  

  • collapse 為合并的意思
  • border-collapse: collapse; 表示相鄰邊框合并在一起，

  <style>
  	table {
  		width: 500px;
  		height: 300px;
  		border: 1px solid red;
  	}
  	td {
  		border: 1px solid red;
  		text-align: center;
  	}
  	table, td {
  		border-collapse: collapse;  /*合并相鄰邊框*/
  	}
  </style>
  

內邊距(padding)

padding屬性用于設定內邊距，是指 邊框與內容之間的距離，

• 當我們給盒子指定padding值之后, 發生了2件事:
  • 內容和邊框 有了距離, 添加了內邊距，
  • 盒子會變大了，
• 注意
  • 如果沒有給一個盒子指定寬度， 此時，如果給這個盒子指定padding， 則不會撐開盒子，

padding合寫

內盒尺寸計算 (元素實際大小)

• 寬度

  Element Height = content height + padding + border （Height為內容高度）

• 高度

  Element Width = content width + padding + border （Width為內容寬度）

• 盒子的實際的大小 = 內容的寬度和高度 + 內邊距 + 邊框

外邊距(margin)

外邊距

margin屬性用于設定外邊距， margin就是控制盒子與盒子之間的距離

屬性

margin值的簡寫 （復合寫法）代表意思 跟 padding 完全相同，

塊級盒子水平居中

• 可以讓一個塊級盒子實作水平居中:

  • 盒子必須指定了寬度(width)，
  • 然后就給1左右的外邊距都設定為auto，

• 例如:

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

  常見的寫法

  * margin-left: auto;   margin-right: auto;
  * margin: auto;
  * margin: 0 auto;
  

文字居中與盒子居中的區別

1. 盒子內的文字水平居中是 text-align: center, 而且還可以讓 行內元素和行內塊居中對齊

2. 塊級盒子水平居中 左右margin 改為 auto

   text-align: center; /*  文字 行內元素 行內塊元素水平居中 */
   margin: 10px auto;  /* 塊級盒子水平居中  左右margin 改為 auto 就闊以了 上下margin都可以 */
   

插入圖片和背景圖片區別

1. 插入圖片 我們用的最多 比如產品展示類 移動位置只能靠盒模型 padding margin

2. 背景圖片我們一般用于小圖示背景 或者 超大背景圖片 背景圖片 只能通過 background-position

    img {  
   		width: 200px;/* 插入圖片更改大小 width 和 height */
   		height: 210px;
   		margin-top: 30px;  /* 插入圖片更改位置 可以用margin 或padding  盒模型 */
   		margin-left: 50px; /* 插入當圖片也是一個盒子 */
   	}
   
    div {
   		width: 400px;
   		height: 400px;
   		border: 1px solid purple;
   		background: #fff url(images/sun.jpg) no-repeat;
   		background-position: 30px 50px; /* 背景圖片更改位置 我用 background-position */
   	}
   

清楚元素的默認內外邊距

為了更靈活方便地控制網頁中的元素，制作網頁時，我們需要將元素的默認內外邊距清除

* {
	padding: 0;
	margin: 0;
}

• 注意:

  行內元素為了照顧兼容性， 盡量只設定左右內外邊距， 不要設定上下內外邊距，

外邊距合并

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

• 相鄰塊元素垂直外邊距的合并
  • 當上下相鄰的兩個塊元素相遇時, 如果上面的元素有下外邊距margin-bottom
  • 下面的元素有上邊距margin-top, 則它們之間的垂直間距不是margin-bottom與margin-top之和
  • 取兩個值中的較大者這種現象被稱為相鄰塊元素垂直外邊距的合并(也成為外邊距塌陷)
• 嵌套塊元素垂直外邊距的合并(塌陷)
  • 對于兩個嵌套關系的塊元素, 如果發元素沒有上內邊距及邊框
  • 父元素的上外邊距會與子元素的上外邊距發生合并
  • 合并后的外邊距為兩者中的較大者

盒子模型布局穩定性

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

  width >  padding  >   margin   

• 原因:
  • margin 會有外邊距合并 還有IE6一下margin 加倍的bug 最后使用，
  • padding 會影響盒子大小, 需要進行加減計算 其次使用，
  • width 沒有問題 我們經常使用寬度剩余法 高度剩余法來做，

去掉串列默認的樣式

無序和有序串列前面默認的串列樣式, 在不同瀏覽器顯示效果不同, 所以一般會去掉這些串列樣式，

li {
	list-style: none;
}

圓角邊框(CSS3)

border-radius: length;

• 其中每一個值可以為 數值或百分比的形式，

• 可以讓一個正方形 變成圓圈

  border-radius:50%;
  

• 如果為矩形的圓角, 就不要用百分比了, 因為百分比會是表示高度和寬度的一般，

• 這里矩形就只用高度的一半就號， 精確單位，

盒子陰影(CSS3)

box-shadow: 水平陰影 垂直陰影 模糊距離(虛實)  陰影尺寸(影子大小)  陰影顏色  內/外陰影

• 前面兩個屬性是必須寫的，其余的可以省略，

• 外陰影(outset)是默認的 但是不能寫 outset 想要內陰影可以寫 inset

  div {
  	width: 200px;
  	height: 200px;
  	border: 10px soild 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)

CSS布局的三種機制

網頁布局的核心---就是用CSS來擺放盒子，

CSS 提供了 3 種機制來設定盒子的擺放位置，分別是普通流（標準流）、浮動和定位，其中：

1. 普通流（標準流）
   • 塊級元素會獨占一行，從上向下順序排列；
     • 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
   • 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行；
     • 常用元素：span、a、i、em等
2. 浮動
   • 讓盒子從普通流中浮起來,主要作用讓多個塊級盒子一行顯示，
3. 定位
   • 將盒子定在瀏覽器的某一個位置——CSS 離不開定位，特別是后面的 js 特效，

概念及作用

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

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

作用

1. 讓多個盒子(div)水平排列成一行，使得浮動成為布局的重要手段，
2. 可以實作盒子的左右對齊等等..
3. 浮動最早是用來控制圖片，實作文字環繞圖片的效果，

選擇器 {
	float: 屬性值;
}

• float 屬性會讓盒子漂浮在標準流的上面，所以第二個標準流的盒子跑到浮動盒子的底下了，
• float屬性會改變元素display屬性，
• 浮動的元素互相貼靠一起的，但是如果父級寬度裝不下這些浮動的盒子， 多出的盒子會另起一行對齊，
• 浮動元素會改變display屬性， 類似轉換為了行內塊，但是元素之間沒有空白縫隙

浮動元素與父盒子的關系

• 子盒子的浮動參照父盒子對齊
• 不會與父盒子的邊框重疊, 也不會超過父盒子的內邊距，

浮動元素與兄弟盒子的關系

在一個父級盒子中, 如果前一個兄弟盒子是:

• 浮動的, 那么當前盒子會與前一個盒子的頂部對齊，
• 普通流, 那么當前盒子會顯示在前一個兄弟盒子的下方，
• 浮動只會影響當前的或者是后面的標準流盒子，不會影響前面的標準流，

清除浮動

• 由于浮動元素不再占用原檔案流的位置，所以它會對后面的元素排版產生影響

• 準確地說，并不是清除浮動，而是清除浮動后造成的影響

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

清除浮動的方法

在CSS中, clear屬性用于清除浮動，

語法一:

選擇器 {
	clear: 屬性值;
	/* clear 清除 */
}

語法二(額外標簽法):

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

語法三(父級添加overflow屬性方法):

可以給父級添加: overflow: hidden | auto | scroll都可以實作，

語法四(使用after偽元素清除浮動)：

:after 方式為空元素額外標簽法的升級版

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility:hidden;
}
.clearfix {
	*zoom: 1;  /* IE6、7 專有*/
}

語法五(使用雙偽元素清除浮動):

.clearfix:before,
.clearfix:after {
	content:"";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}

清除浮動總結:

• 用途:
  1. 父級沒有高度，
  2. 子盒子浮動，
  3. 影響下面布局，

定位(position)

將盒子定在某一個位置 自由的漂浮在其他盒子(包括標準流和浮動)的上面

定位組成:

定位 = 定位模式 + 邊偏移

邊偏移

在 CSS 中，通過 top、bottom、left 和 right 屬性定義元素的邊偏移：（方位名詞）

定位模式

在 CSS 中，通過 position 屬性定義元素的定位模式，語法如下：

選擇器 { position: 屬性值; }

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

靜態定位(static)

• 靜態定位是元素的默認定位方式，無定位的意思，它相當于 border 里面的none， 不要定位的時候用，
• 靜態定位 按照標準流特性擺放位置，它沒有邊偏移，
• 靜態定位在布局時我們幾乎不用的

相對定位(realative)

• 相對于 自己原來在標準流中位置來移動的
• 原來在標準流的區域繼續占有，后面的盒子仍然以標準流的方式對待它，

絕對定位(sbsolute)

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

1. 完全脫標 ---- 不占位置，
2. 父元素沒有定位, 則以瀏覽器為準定位(Document檔案)
3. 父元素需要有定位，將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位，

• 子級是絕對定位，父級要用相對定位，

固定定位(fixed)

1. 完全脫標 —— 完全不占位置；
2. 只認瀏覽器的可視視窗 —— 瀏覽器可視視窗 + 邊偏移屬性 來設定元素的位置；
   • 跟父元素沒有任何關系；單獨使用的
   • 不隨滾動條滾動，

• 提示：IE 6 等低版本瀏覽器不支持固定定位，

絕對定位的盒子居中

注意：絕對定位/固定定位的盒子不能通過設定 margin: auto 設定水平居中，

left: 50%;：/*讓盒子的左側移動到父級元素的水平中心位置，*/
margin-left: -100px;：/*讓盒子向左移動自身寬度的一半，*/

堆疊順序(z-index)

在使用定位布局時，可能會出現盒子重疊的情況，

加了定位的盒子，默認后來者居上， 后面的盒子會壓住前面的盒子，

應用 z-index 層疊等級屬性可以調整盒子的堆疊順序，

z-index 的特性如下：

1. 屬性值：正整數、負整數或 0，默認值是 0，數值越大，盒子越靠上；
2. 如果屬性值相同，則按照書寫順序，后來居上；
3. 數字后面不能加單位，

注意：z-index 只能應用于相對定位、絕對定位和固定定位的元素，其他標準流、浮動和靜態定位無效，

定位改變display屬性

display 是顯示模式, 可以改變顯示模式有以下方式:

• 可以用inline-block 轉換為行內塊
• 可以用浮動 float 默認轉換為行內塊（類似，并不完全一樣，因為浮動是脫標的）
• 絕對定位和固定定位也和浮動類似， 默認轉換的特性 轉換為行內塊，

• 注意
  • 浮動元素、絕對定位(固定定位）元素的都不會觸發外邊距合并的問題， （我們以前是用padding border overflow解決的）

定位小結

注意：

1. 邊偏移需要和定位模式聯合使用，單獨使用無效；
2. top 和 bottom 不要同時使用；
3. left 和 right 不要同時使用，

元素的顯示與隱藏

display顯示

• display設定或檢索物件是否及如何顯示，

  display: none; /* 隱藏物件 */
  
  display: block /* 除了轉換為塊級元素之外，同時還有顯示元素的意思， */
  

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

visibility 可見性

• 設定或檢索是否顯示物件，

  visibility: visible; /* 物件可見 */ 
  
  visibility: hidden; /* 物件隱藏 */ 
  

  特點： 隱藏之后，繼續保留原有位置，

overflow溢位

檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容，

顯示與隱藏總結

CSS用戶界面樣式

滑鼠樣式cursor

設定或檢索在物件上移的滑鼠指標采用何種系統預定義的游標形狀

• 例如

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

輪廓線 outline

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

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

/* 去除  */
outline: 0;   或者  outline: none;

防止拖拽文本域 resize

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

用戶界面樣式總結

vertical-align 垂直對齊

vertical-align 垂直對齊，它只針對于行內元素或者行內塊元素，

vertical-align : baseline |top |middle |bottom 

注意：

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

圖片、表單和文字對齊

通過vertical-align 控制圖片和文字的垂直關系了， 默認的圖片會和文字基線對齊，

去除圖片底側空白縫隙

圖片或者表單等行內塊元素，他的底線會和父級盒子的基線對齊，就是圖片底側會有一個空白縫隙，

解決:

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

溢位的文字省略號顯示

whithe-space

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

white-space:normal ;
/* 默認處理方式 */

white-space:nowrap ;　
/* 強制在同一行內顯示所有文本，直到文本結束或者遭遇br標簽物件才換行， */

text-overflow 文字溢位

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

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

text-overflow：ellipsis ; 
/* 當物件內文本溢位時顯示省略標記（...）*/ 

總結

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

CSS精靈技術 (sprite)

為了有效地減少服務器接受和發送請求的次數，提高頁面的加載速度，

• CSS 精靈其實是將網頁中的一些背景影像整合到一張大圖中（精靈圖），然而，各個網頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖，

使用方法

首先我們知道，css精靈技術主要針對于背景圖片，插入的圖片img 是不需要這個技術的，

我們需要使用CSS的

• background-image、
• background-repeat
• background-position屬性進行背景定位，
• 其中最關鍵的是使用background-position 屬性精確地定位，

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

滑動門

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

使用方法

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

<li>
  <a href="https://www.cnblogs.com/Hac-Zhang/p/#">
    <span>導航欄內容</span>
  </a>
</li>

* {
      padding:0;
      margin:0;

    }
    body{
      background: url(images/wx.jpg) repeat-x;
    }
    .father {
      padding-top:20px;
    }
    li {
      padding-left: 16px;
      height: 33px;
      float: left;
      line-height: 33px;
      margin:0  10px;
      background: url(./images/to.png) no-repeat left ;
    }
    a {
      padding-right: 16px;
      height: 33px;
      display: inline-block;
      color:#fff;
      background: url(./images/to.png) no-repeat right ;
      text-decoration: none;
    }
    li:hover,
     li:hover a {
      background-image:url(./images/ao.png);
    }

總結：

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