font:綜合設(shè)置字體樣式

• 基本語法:

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

• 注意

• 使用font屬性時,必須按上面的語法格式中的順序書寫,不能更換順序, 各個屬性以空格隔開。

• 其中不需要設(shè)置的屬性可以省略(取默認值), 但必須保留fint-size和font-family屬性, 否則font屬性將不起作用。

font總結(jié)

CSS外觀屬性

顏色">color: 文本顏色

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

• 取值方式:

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

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

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

• 作用:

  text-align屬性用于設(shè)置文本內(nèi)容的水平對齊, 相當于HTML中的align對齊屬性

• 其可用屬性值:

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

• 是讓盒子內(nèi)的內(nèi)容水平居中, 而不是讓盒子居中對齊。

line-height：行間距

• 作用

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

• 單位

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

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

  line-height: 24px;

text-indent: 首行縮進

• 作用:

  text-indent屬性用于設(shè)置首行文本的縮進

• 屬性值

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

  p {
  /*行間距*/
  line-height: 25px;
  /*首行縮進2個字節(jié)*/
  text-indent: 2em;
  }

• 其屬性值可為不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對于瀏覽器窗口寬度的百分比%，允許使用負值,

• 建議使用em作為設(shè)置單位。

text-decitation 文本的裝飾

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

CSS外觀屬性總結(jié)

標簽顯示模式(display)

HTML標簽一般分為塊標簽和行內(nèi)標簽兩種類型，它們也稱塊元素和行內(nèi)元素。

塊級元素(block)

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

• 塊級元素的特點

1. 獨占一行。

2. 高度, 寬度，外邊距以及內(nèi)邊距都可以控制。

3. 寬度默認是容器的100%。

4. 是一個容器,里面可以放行內(nèi)或塊級元素。

• 注意

• 只有文字才能組成段落， 因此 p 內(nèi)不能放塊級元素, 特別是 p 不能放 div

• 同理h1-h6，dt， 它們都是文字類塊級標簽, 里面不能放其它塊級元素

行內(nèi)元素(inline)

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

• 行內(nèi)元素的特點:

1. 相鄰行內(nèi)元素在一行上，一行可以顯示多個。

2. 高、款直接設(shè)置是無效的。

3. 默認寬度就是它本身內(nèi)容的寬度。

4. 行內(nèi)元素只能容納文本或其它行內(nèi)元素。

• 注意:

• 鏈接內(nèi)不能再放鏈接

• 特殊情況a里面可以放塊級元素, 但是給a轉(zhuǎn)換一下塊級模式最安全。

行內(nèi)塊元素(inline-block)

在行內(nèi)元素中有幾個特殊的標簽——<img />、<input />、<td>，可以對它們設(shè)置寬高和對齊屬性，有些資料可能會稱它們?yōu)樾袃?nèi)塊元素。

• 特點:

1. 和相鄰行內(nèi)元素(行內(nèi)塊) 在一行上, 但是之間會有空白縫隙。一行可以顯示多個。

2. 默認寬度就是它本身內(nèi)容的寬度。

3. 高度, 行高, 外邊距以及內(nèi)邊距都可以控制。

三種模式總結(jié)區(qū)別

標簽顯示模式轉(zhuǎn)換 display

• 塊轉(zhuǎn)行內(nèi): display: inline;

• 行內(nèi)轉(zhuǎn)塊: display: block;

• 塊、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊:diaplay: inline-block;

行高(line-height)

英文和漢字 內(nèi)有 頂線, 中線, 基線, 底線。 行高測量: 為兩行中基線與基線的距離為行高。

• 單行文字垂直居中

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

• 行高 = 上距離 + 內(nèi)容高度 + 下距離

• 行高和高度的三種關(guān)系

• 如果 行高 等 高度 文字會 垂直居中

• 如果行高 大于 高度 文字會 偏下

• 如果行高小于高度 文字會 偏上

CSS背景(background)

顏色backgroung-color">背景顏色(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坐標。 可以使用方位名詞或者 精確單位。

• 如果指定兩個值，兩個值都是方位名字，則兩個值前后順序無關(guān)，比如left top和top left效果一致

• 如果只指定了一個方位名詞，另一個值默認居中對齊。

• 如果position 后面是精確坐標， 那么第一個，肯定是 x 第二的一定是y

• 如果只指定一個數(shù)值,那該數(shù)值一定是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);

• 最后一個參數(shù)是alpha 透明度 取值范圍 0~1之間

• 我們習慣把0.3 的 0 省略掉 這樣寫 background: rgba(0, 0, 0, .3);

• 注意： 背景半透明是指盒子背景半透明， 盒子里面的內(nèi)容不受影響

• 因為是CSS3 ，所以 低于 ie9 的版本是不支持的。

背景總結(jié)

CSS 三大特性

CSS層疊性

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

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

• 樣式?jīng)_突，遵循的原則是就近原則。 那個樣式離著結(jié)構(gòu)近，就執(zhí)行那個樣式。

• 樣式不沖突，不會層疊

CSS繼承性

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

想要設(shè)置一個可繼承的屬性，只需將它應(yīng)用于父元素即可。

• 注意：

• 恰當?shù)厥褂美^承可以簡化代碼，降低CSS樣式的復(fù)雜性。比如有很多子級孩子都需要某個樣式，可以給父級指定一個，這些孩子繼承過來就好了。

• 子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的可以繼承，以及color屬性）

CSS優(yōu)先級

定義CSS樣式時，經(jīng)常出現(xiàn)兩個或更多規(guī)則應(yīng)用在同一元素上，此時，

• 選擇器相同，則執(zhí)行層疊性

• 選擇器不同，就會出現(xiàn)優(yōu)先級的問題。

權(quán)重計算

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

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

  div {
      color: pink!important;  
  }

權(quán)重疊加

我們經(jīng)常用交集選擇器，后代選擇器等，是有多個基礎(chǔ)選擇器組合而成，那么此時，就會出現(xiàn)權(quán)重疊加。

• 例如:

• 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

• 注意:

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

繼承的權(quán)重是 0

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

• 如果選中了，那么以上面的公式來計權(quán)重。誰大聽誰的。

• 如果沒有選中，那么權(quán)重是0，因為繼承的權(quán)重為0.

盒子模型

所謂盒子模型：

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

• 盒子模型有元素的內(nèi)容、邊框（border）、內(nèi)邊距（padding）、和外邊距（margin）組成。

• 盒子里面的文字和圖片等元素是 內(nèi)容區(qū)域

• 盒子的厚度 我們成為 盒子的邊框

• 盒子內(nèi)容與邊框的距離是內(nèi)邊距（類似單元格的 cellpadding)

• 盒子與盒子之間的距離是外邊距（類似單元格的 cellspacing）

盒子邊框(border)

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

• 邊框的樣式:

• none: 沒有比那狂即忽略所有邊框的寬度(默認值)

• solid: 邊框為單實線(常用)

• dashed: 邊框為虛線

• dotted: 邊框為點線

邊框綜合設(shè)置

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

盒子邊框?qū)懛偨Y(jié)表

表格的細線邊框

• 通過表格的 cellspaceing="0", 將單元格與單元格之間的距離設(shè)置為0

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

• 通過css屬性設(shè)置:

  table {
  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>

• collapse 為合并的意思

• border-collapse: collapse; 表示相鄰邊框合并在一起。

內(nèi)邊距(padding)

padding屬性用于設(shè)置內(nèi)邊距。是指 邊框與內(nèi)容之間的距離。

• 當我們給盒子指定padding值之后, 發(fā)生了2件事:

• 內(nèi)容和邊框 有了距離, 添加了內(nèi)邊距。

• 盒子會變大了。

• 注意

• 如果沒有給一個盒子指定寬度， 此時，如果給這個盒子指定padding， 則不會撐開盒子。

padding合寫

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

• 寬度

  Element Height = content height + padding + border （Height為內(nèi)容高度）

• 高度

  Element Width = content width + padding + border （Width為內(nèi)容寬度）

• 盒子的實際的大小 = 內(nèi)容的寬度和高度 + 內(nèi)邊距 + 邊框

外邊距(margin)

外邊距

margin屬性用于設(shè)置外邊距。 margin就是控制盒子與盒子之間的距離

屬性

margin值的簡寫 （復(fù)合寫法）代表意思 跟 padding 完全相同。

塊級盒子水平居中

• 可以讓一個塊級盒子實現(xiàn)水平居中:

• 盒子必須指定了寬度(width)。

• 然后就給1左右的外邊距都設(shè)置為auto。

• 例如:

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

  常見的寫法

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

文字居中與盒子居中的區(qū)別

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

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

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

插入圖片和背景圖片區(qū)別

1. 插入圖片 我們用的最多 比如產(chǎn)品展示類 移動位置只能靠盒模型 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 */
   }

清楚元素的默認內(nèi)外邊距

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

* {
padding: 0;
margin: 0;
}

• 注意:

  行內(nèi)元素為了照顧兼容性， 盡量只設(shè)置左右內(nèi)外邊距， 不要設(shè)置上下內(nèi)外邊距。

外邊距合并

使用margin定義塊元素的垂直外邊距時, 可能出現(xiàn)外邊距的合并。

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

• 當上下相鄰的兩個塊元素相遇時, 如果上面的元素有下外邊距margin-bottom

• 下面的元素有上邊距margin-top, 則它們之間的垂直間距不是margin-bottom與margin-top之和

• 取兩個值中的較大者這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并(也成為外邊距塌陷)

• 嵌套塊元素垂直外邊距的合并(塌陷)

• 對于兩個嵌套關(guān)系的塊元素, 如果發(fā)元素沒有上內(nèi)邊距及邊框

• 父元素的上外邊距會與子元素的上外邊距發(fā)生合并

• 合并后的外邊距為兩者中的較大者

盒子模型布局穩(wěn)定性

按照 優(yōu)先使用 寬度 （width） 其次 使用內(nèi)邊距（padding） 再次 外邊距（margin）。

  width >  padding  >   margin

• 原因:

• margin 會有外邊距合并 還有IE6一下margin 加倍的bug 最后使用。

• padding 會影響盒子大小, 需要進行加減計算 其次使用。

• width 沒有問題 我們經(jīng)常使用寬度剩余法 高度剩余法來做。

去掉列表默認的樣式

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

li {
list-style: none;
}

圓角邊框(CSS3)

border-radius: length;

• 其中每一個值可以為 數(shù)值或百分比的形式。

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

  border-radius:50%;

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

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

盒子陰影(CSS3)

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

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

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

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

浮動(float)

CSS布局的三種機制

網(wǎng)頁布局的核心---就是用CSS來擺放盒子。

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

1. 普通流（標準流）

• 常用元素：span、a、i、em等

• 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

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

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

2. 浮動

• 讓盒子從普通流中浮起來,主要作用讓多個塊級盒子一行顯示。

3. 定位

• 將盒子定在瀏覽器的某一個位置——CSS 離不開定位，特別是后面的 js 特效。

概念及作用

概念：元素的浮動是指設(shè)置了浮動屬性的元素會

1. 脫離標準普通流的控制

2. 移動到指定位置。

作用

1. 讓多個盒子(div)水平排列成一行，使得浮動成為布局的重要手段。

2. 可以實現(xiàn)盒子的左右對齊等等..

3. 浮動最早是用來控制圖片，實現(xiàn)文字環(huán)繞圖片的效果。

選擇器 {
float: 屬性值;
}

• float 屬性會讓盒子漂浮在標準流的上面，所以第二個標準流的盒子跑到浮動盒子的底下了。

• float屬性會改變元素display屬性。

• 浮動的元素互相貼靠一起的，但是如果父級寬度裝不下這些浮動的盒子， 多出的盒子會另起一行對齊。

• 浮動元素會改變display屬性， 類似轉(zhuǎn)換為了行內(nèi)塊，但是元素之間沒有空白縫隙

浮動元素與父盒子的關(guān)系

• 子盒子的浮動參照父盒子對齊

• 不會與父盒子的邊框重疊, 也不會超過父盒子的內(nèi)邊距。

浮動元素與兄弟盒子的關(guān)系

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

• 浮動的, 那么當前盒子會與前一個盒子的頂部對齊。

• 普通流, 那么當前盒子會顯示在前一個兄弟盒子的下方。

• 浮動只會影響當前的或者是后面的標準流盒子，不會影響前面的標準流。

清除浮動

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

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

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

清除浮動的方法

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

語法一:

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

語法二(額外標簽法):

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

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

可以給父級添加: overflow: hidden | auto | scroll都可以實現(xiàn)。

語法四(使用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;
}

清除浮動總結(jié):

• 用途:

1. 父級沒有高度。

2. 子盒子浮動。

3. 影響下面布局。

定位(position)

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

定位組成:

定位 = 定位模式 + 邊偏移

邊偏移

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

定位模式

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

選擇器 { position: 屬性值; }

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

靜態(tài)定位(static)

• 靜態(tài)定位是元素的默認定位方式，無定位的意思。它相當于 border 里面的none， 不要定位的時候用。

• 靜態(tài)定位 按照標準流特性擺放位置，它沒有邊偏移。

• 靜態(tài)定位在布局時我們幾乎不用的

相對定位(realative)

• 相對于 自己原來在標準流中位置來移動的

• 原來在標準流的區(qū)域繼續(xù)占有，后面的盒子仍然以標準流的方式對待它。

絕對定位(sbsolute)

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

1. 完全脫標 ---- 不占位置。

2. 父元素沒有定位, 則以瀏覽器為準定位(Document文檔)

3. 父元素需要有定位。將元素依據(jù)最近的已經(jīng)定位（絕對、固定或相對定位）的父元素（祖先）進行定位。

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

固定定位(fixed)

1. 完全脫標 —— 完全不占位置；

2. 只認瀏覽器的可視窗口 —— 瀏覽器可視窗口 + 邊偏移屬性 來設(shè)置元素的位置；

• 跟父元素沒有任何關(guān)系；單獨使用的

• 不隨滾動條滾動。

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

絕對定位的盒子居中

注意：絕對定位/固定定位的盒子不能通過設(shè)置 margin: auto 設(shè)置水平居中。

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

堆疊順序(z-index)

在使用定位布局時，可能會出現(xiàn)盒子重疊的情況。

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

應(yīng)用 z-index 層疊等級屬性可以調(diào)整盒子的堆疊順序。

z-index 的特性如下：

1. 屬性值：正整數(shù)、負整數(shù)或 0，默認值是 0，數(shù)值越大，盒子越靠上；

2. 如果屬性值相同，則按照書寫順序，后來居上；

3. 數(shù)字后面不能加單位。

注意：z-index 只能應(yīng)用于相對定位、絕對定位和固定定位的元素，其他標準流、浮動和靜態(tài)定位無效。

定位改變display屬性

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

• 可以用inline-block 轉(zhuǎn)換為行內(nèi)塊

• 可以用浮動 float 默認轉(zhuǎn)換為行內(nèi)塊（類似，并不完全一樣，因為浮動是脫標的）

• 絕對定位和固定定位也和浮動類似， 默認轉(zhuǎn)換的特性 轉(zhuǎn)換為行內(nèi)塊。

• 注意

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

定位小結(jié)

注意：

1. 邊偏移需要和定位模式聯(lián)合使用，單獨使用無效；

2. top 和 bottom 不要同時使用；

3. left 和 right 不要同時使用。

元素的顯示與隱藏

display顯示

• display設(shè)置或檢索對象是否及如何顯示。

  display: none; /* 隱藏對象 */
  
  display: block /* 除了轉(zhuǎn)換為塊級元素之外，同時還有顯示元素的意思。 */

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

visibility 可見性

• 設(shè)置或檢索是否顯示對象。

  visibility: visible; /* 對象可見 */ 
  
  visibility: hidden; /* 對象隱藏 */

  特點： 隱藏之后，繼續(xù)保留原有位置。

overflow溢出

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

顯示與隱藏總結(jié)

CSS用戶界面樣式

鼠標樣式cursor

設(shè)置或檢索在對象上移的鼠標指針采用何種系統(tǒng)預(yù)定義的光標形狀

• 例如

  <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>

用戶界面樣式總結(jié)

vertical-align 垂直對齊

vertical-align 垂直對齊，它只針對于行內(nèi)元素或者行內(nèi)塊元素，

vertical-align : baseline |top |middle |bottom

注意：

• vertical-align 不影響塊級元素中的內(nèi)容對齊，它只針對于行內(nèi)元素或者行內(nèi)塊元素，

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

圖片、表單和文字對齊

通過vertical-align 控制圖片和文字的垂直關(guān)系了。 默認的圖片會和文字基線對齊。

去除圖片底側(cè)空白縫隙

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

解決:

• 給img vertical-align:middle | top| bottom等等。 讓圖片不要和基線對齊。

• 給img 添加 display：block; 轉(zhuǎn)換為塊級元素就不會存在問題了。

溢出的文字省略號顯示

whithe-space

white-space設(shè)置或檢索對象內(nèi)文本顯示方式。通常我們使用于強制一行顯示內(nèi)容

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

white-space:nowrap ;　
/* 強制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇br標簽對象才換行。 */

text-overflow 文字溢出

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

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

text-overflow：ellipsis ; 
/* 當對象內(nèi)文本溢出時顯示省略標記（...）*/

總結(jié)

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

CSS精靈技術(shù) (sprite)

為了有效地減少服務(wù)器接受和發(fā)送請求的次數(shù)，提高頁面的加載速度。

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

使用方法

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

我們需要使用CSS的

• background-image、

• background-repeat

• background-position屬性進行背景定位，

• 其中最關(guān)鍵的是使用background-position 屬性精確地定位。

1. 精確測量，每個小背景圖片的大小和 位置。

2. 給盒子指定小背景圖片時， 背景定位基本都是 負值。

滑動門

為了使各種特殊形狀的背景能夠自適應(yīng)元素中文本內(nèi)容的多少，出現(xiàn)了CSS滑動門技術(shù)。它從新的角度構(gòu)建頁面，使各種特殊形狀的背景能夠自由拉伸滑動，以適應(yīng)元素內(nèi)部的文本內(nèi)容，可用性更強。 最常見于各種導(dǎo)航欄的滑動門。

使用方法

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

<li>
  <a href="#">
    <span>導(dǎo)航欄內(nèi)容</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);
    }

總結(jié)：

1. a 設(shè)置 背景左側(cè)，padding撐開合適寬度。

2. span 設(shè)置背景右側(cè)， padding撐開合適寬度 剩下由文字繼續(xù)撐開寬度。

3. 之所以a包含span就是因為 整個導(dǎo)航都是可以點擊的。