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

• 基本語(yǔ)法:

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

• 注意

• 使用font屬性時(shí),必須按上面的語(yǔ)法格式中的順序書寫,不能更換順序, 各個(gè)屬性以空格隔開(kāi)。

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

font總結(jié)

CSS外觀屬性

顏色">color: 文本顏色

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

• 取值方式:

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

• 十六進(jìn)制顏色可以簡(jiǎn)寫。

text-align: 文本水平對(duì)齊方式

• 作用:

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

• 其可用屬性值:

  屬性	解釋
  left	左對(duì)齊（默認(rèn)值）
  right	右對(duì)齊
  center	居中對(duì)齊

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

line-height：行間距

• 作用

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

• 單位

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

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

  line-height: 24px;

text-indent: 首行縮進(jìn)

• 作用:

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

• 屬性值

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

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

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

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

text-decitation 文本的裝飾

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

CSS外觀屬性總結(jié)

標(biāo)簽顯示模式(display)

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

塊級(jí)元素(block)

常見(jiàn)的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標(biāo)簽是最典型的塊元素。

• 塊級(jí)元素的特點(diǎn)

1. 獨(dú)占一行。

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

3. 寬度默認(rèn)是容器的100%。

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

• 注意

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

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

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

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

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

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

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

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

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

• 注意:

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

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

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

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

• 特點(diǎn):

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

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

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

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

標(biāo)簽顯示模式轉(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)有 頂線, 中線, 基線, 底線。 行高測(cè)量: 為兩行中基線與基線的距離為行高。

• 單行文字垂直居中

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

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

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

• 如果 行高 等 高度 文字會(huì) 垂直居中

• 如果行高 大于 高度 文字會(huì) 偏下

• 如果行高小于高度 文字會(huì) 偏上

CSS背景(background)

顏色backgroung-color">背景顏色(backgroung-color)

background-color: 顏色值;  
/* 默認(rèn)的值是 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坐標(biāo)和y坐標(biāo)。 可以使用方位名詞或者 精確單位。

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

• 如果只指定了一個(gè)方位名詞，另一個(gè)值默認(rèn)居中對(duì)齊。

• 如果position 后面是精確坐標(biāo)， 那么第一個(gè)，肯定是 x 第二的一定是y

• 如果只指定一個(gè)數(shù)值,那該數(shù)值一定是x坐標(biāo)，另一個(gè)默認(rèn)垂直居中

• 如果指定的兩個(gè)值是 精確單位和方位名字混合使用，則第一個(gè)值是x坐標(biāo)，第二個(gè)值是y坐標(biāo)

背景附著(attachment)

背景附著就是解釋背景是滾動(dòng)的還是固定的

background-attachment: scroll | fixed

背景簡(jiǎn)寫

• background：屬性的值的書寫順序官方并沒(méi)有強(qiáng)制標(biāo)準(zhǔn)的。為了可讀性，建議大家如下寫：

• background: 背景顏色 背景圖片地址 背景平鋪 背景滾動(dòng) 背景位置;

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

背景透明(CSS3 rgba)

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

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

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

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

• 因?yàn)槭荂SS3 ，所以 低于 ie9 的版本是不支持的。

背景總結(jié)

CSS 三大特性

CSS層疊性

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

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

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

• 樣式不沖突，不會(huì)層疊

CSS繼承性

子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式，如文本顏色和字號(hào)。

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

• 注意：

• 恰當(dāng)?shù)厥褂美^承可以簡(jiǎn)化代碼，降低CSS樣式的復(fù)雜性。比如有很多子級(jí)孩子都需要某個(gè)樣式，可以給父級(jí)指定一個(gè)，這些孩子繼承過(guò)來(lái)就好了。

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

CSS優(yōu)先級(jí)

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

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

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

權(quán)重計(jì)算

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

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

  div {
      color: pink!important;  
  }

權(quán)重疊加

我們經(jīng)常用交集選擇器，后代選擇器等，是有多個(gè)基礎(chǔ)選擇器組合而成，那么此時(shí)，就會(huì)出現(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ù)位之間沒(méi)有進(jìn)制 比如說(shuō)： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不會(huì)存在10個(gè)div能趕上一個(gè)類選擇器的情況。

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

我們修改樣式，一定要看該標(biāo)簽有沒(méi)有被選中。

• 如果選中了，那么以上面的公式來(lái)計(jì)權(quán)重。誰(shuí)大聽(tīng)誰(shuí)的。

• 如果沒(méi)有選中，那么權(quán)重是0，因?yàn)槔^承的權(quán)重為0.

盒子模型

所謂盒子模型：

就是把HTML頁(yè)面中的布局元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(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: 沒(méi)有比那狂即忽略所有邊框的寬度(默認(rèn)值)

• solid: 邊框?yàn)閱螌?shí)線(常用)

• dashed: 邊框?yàn)樘摼€

• dotted: 邊框?yàn)辄c(diǎn)線

邊框綜合設(shè)置

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

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

表格的細(xì)線邊框

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

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

• 通過(guò)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)容之間的距離。

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

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

• 盒子會(huì)變大了。

• 注意

• 如果沒(méi)有給一個(gè)盒子指定寬度， 此時(shí)，如果給這個(gè)盒子指定padding， 則不會(huì)撐開(kāi)盒子。

padding合寫

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

• 寬度

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

• 高度

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

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

外邊距(margin)

外邊距

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

屬性

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

塊級(jí)盒子水平居中

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

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

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

• 例如:

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

  常見(jiàn)的寫法

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

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

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

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

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

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

1. 插入圖片 我們用的最多 比如產(chǎn)品展示類 移動(dòng)位置只能靠盒模型 padding margin

2. 背景圖片我們一般用于小圖標(biāo)背景 或者 超大背景圖片 背景圖片 只能通過(guò) background-position

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

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

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

* {
padding: 0;
margin: 0;
}

• 注意:

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

外邊距合并

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

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

• 當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí), 如果上面的元素有下外邊距margin-bottom

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

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

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

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

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

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

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

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

  width >  padding  >   margin

• 原因:

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

• padding 會(huì)影響盒子大小, 需要進(jìn)行加減計(jì)算 其次使用。

• width 沒(méi)有問(wèn)題 我們經(jīng)常使用寬度剩余法 高度剩余法來(lái)做。

去掉列表默認(rèn)的樣式

無(wú)序和有序列表前面默認(rèn)的列表樣式, 在不同瀏覽器顯示效果不同, 所以一般會(huì)去掉這些列表樣式。

li {
list-style: none;
}

圓角邊框(CSS3)

border-radius: length;

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

• 可以讓一個(gè)正方形 變成圓圈

  border-radius:50%;

• 如果為矩形的圓角, 就不要用百分比了, 因?yàn)榘俜直葧?huì)是表示高度和寬度的一般。

• 這里矩形就只用高度的一半就號(hào)。 精確單位。

盒子陰影(CSS3)

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

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

• 外陰影(outset)是默認(rèn)的 但是不能寫 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);
  }

浮動(dòng)(float)

CSS布局的三種機(jī)制

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

CSS 提供了 3 種機(jī)制來(lái)設(shè)置盒子的擺放位置，分別是普通流（標(biāo)準(zhǔn)流）、浮動(dòng)和定位，其中：

1. 普通流（標(biāo)準(zhǔn)流）

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

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

• 塊級(jí)元素會(huì)獨(dú)占一行，從上向下順序排列；

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

2. 浮動(dòng)

• 讓盒子從普通流中浮起來(lái),主要作用讓多個(gè)塊級(jí)盒子一行顯示。

3. 定位

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

概念及作用

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

1. 脫離標(biāo)準(zhǔn)普通流的控制

2. 移動(dòng)到指定位置。

作用

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

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

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

選擇器 {
float: 屬性值;
}

• float 屬性會(huì)讓盒子漂浮在標(biāo)準(zhǔn)流的上面，所以第二個(gè)標(biāo)準(zhǔn)流的盒子跑到浮動(dòng)盒子的底下了。

• float屬性會(huì)改變?cè)豥isplay屬性。

• 浮動(dòng)的元素互相貼靠一起的，但是如果父級(jí)寬度裝不下這些浮動(dòng)的盒子， 多出的盒子會(huì)另起一行對(duì)齊。

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

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

• 子盒子的浮動(dòng)參照父盒子對(duì)齊

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

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

在一個(gè)父級(jí)盒子中, 如果前一個(gè)兄弟盒子是:

• 浮動(dòng)的, 那么當(dāng)前盒子會(huì)與前一個(gè)盒子的頂部對(duì)齊。

• 普通流, 那么當(dāng)前盒子會(huì)顯示在前一個(gè)兄弟盒子的下方。

• 浮動(dòng)只會(huì)影響當(dāng)前的或者是后面的標(biāo)準(zhǔn)流盒子，不會(huì)影響前面的標(biāo)準(zhǔn)流。

清除浮動(dòng)

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

• 準(zhǔn)確地說(shuō)，并不是清除浮動(dòng)，而是清除浮動(dòng)后造成的影響

• 清除浮動(dòng)主要為了解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)引起內(nèi)部高度為0 的問(wèn)題。清除浮動(dòng)之后， 父級(jí)就會(huì)根據(jù)浮動(dòng)的子盒子自動(dòng)檢測(cè)高度。父級(jí)有了高度，就不會(huì)影響下面的標(biāo)準(zhǔn)流了

清除浮動(dòng)的方法

在CSS中, clear屬性用于清除浮動(dòng)。

語(yǔ)法一:

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

語(yǔ)法二(額外標(biāo)簽法):

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

語(yǔ)法三(父級(jí)添加overflow屬性方法):

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

語(yǔ)法四(使用after偽元素清除浮動(dòng))：

:after 方式為空元素額外標(biāo)簽法的升級(jí)版

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

語(yǔ)法五(使用雙偽元素清除浮動(dòng)):

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

清除浮動(dòng)總結(jié):

• 用途:

1. 父級(jí)沒(méi)有高度。

2. 子盒子浮動(dòng)。

3. 影響下面布局。

定位(position)

將盒子定在某一個(gè)位置 自由的漂浮在其他盒子(包括標(biāo)準(zhǔn)流和浮動(dòng))的上面

定位組成:

定位 = 定位模式 + 邊偏移

邊偏移

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

定位模式

在 CSS 中，通過(guò) position 屬性定義元素的定位模式，語(yǔ)法如下：

選擇器 { position: 屬性值; }

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

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

• 靜態(tài)定位是元素的默認(rèn)定位方式，無(wú)定位的意思。它相當(dāng)于 border 里面的none， 不要定位的時(shí)候用。

• 靜態(tài)定位 按照標(biāo)準(zhǔn)流特性擺放位置，它沒(méi)有邊偏移。

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

相對(duì)定位(realative)

• 相對(duì)于 自己原來(lái)在標(biāo)準(zhǔn)流中位置來(lái)移動(dòng)的

• 原來(lái)在標(biāo)準(zhǔn)流的區(qū)域繼續(xù)占有，后面的盒子仍然以標(biāo)準(zhǔn)流的方式對(duì)待它。

絕對(duì)定位(sbsolute)

絕對(duì)定位是元素以帶有定位的父級(jí)元素來(lái)移動(dòng)位置

1. 完全脫標(biāo) ---- 不占位置。

2. 父元素沒(méi)有定位, 則以瀏覽器為準(zhǔn)定位(Document文檔)

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

• 子級(jí)是絕對(duì)定位，父級(jí)要用相對(duì)定位。

固定定位(fixed)

1. 完全脫標(biāo) —— 完全不占位置；

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

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

• 不隨滾動(dòng)條滾動(dòng)。

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

絕對(duì)定位的盒子居中

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

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

堆疊順序(z-index)

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

加了定位的盒子，默認(rèn)后來(lái)者居上， 后面的盒子會(huì)壓住前面的盒子。

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

z-index 的特性如下：

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

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

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

注意：z-index 只能應(yīng)用于相對(duì)定位、絕對(duì)定位和固定定位的元素，其他標(biāo)準(zhǔn)流、浮動(dòng)和靜態(tài)定位無(wú)效。

定位改變display屬性

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

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

• 可以用浮動(dòng) float 默認(rèn)轉(zhuǎn)換為行內(nèi)塊（類似，并不完全一樣，因?yàn)楦?dòng)是脫標(biāo)的）

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

• 注意

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

定位小結(jié)

注意：

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

2. top 和 bottom 不要同時(shí)使用；

3. left 和 right 不要同時(shí)使用。

元素的顯示與隱藏

display顯示

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

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

  特點(diǎn)： 隱藏之后，不再保留位置。

visibility 可見(jiàn)性

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

  visibility: visible; /* 對(duì)象可見(jiàn) */ 
  
  visibility: hidden; /* 對(duì)象隱藏 */

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

overflow溢出

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

顯示與隱藏總結(jié)

CSS用戶界面樣式

鼠標(biāo)樣式cursor

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

• 例如

  <ul>
    <li style="cursor:default">我是小白</li>
    <li style="cursor:pointer">我是小手</li>
    <li style="cursor:move">我是移動(dòng)</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 垂直對(duì)齊

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

vertical-align : baseline |top |middle |bottom

注意：

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

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

圖片、表單和文字對(duì)齊

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

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

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

解決:

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

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

溢出的文字省略號(hào)顯示

whithe-space

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

white-space:normal ;
/* 默認(rèn)處理方式 */

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

text-overflow 文字溢出

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

text-overflow : clip ;
/* 不顯示省略標(biāo)記（...），而是簡(jiǎn)單的裁切 */

text-overflow：ellipsis ; 
/* 當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（...）*/

總結(jié)

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

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

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

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

使用方法

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

我們需要使用CSS的

• background-image、

• background-repeat

• background-position屬性進(jìn)行背景定位，

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

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

2. 給盒子指定小背景圖片時(shí)， 背景定位基本都是 負(fù)值。

滑動(dòng)門

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

使用方法

核心技術(shù)就是利用CSS精靈（主要是背景位置）和 盒子padding撐開(kāi)寬度, 以便能適應(yīng)不同字?jǐn)?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撐開(kāi)合適寬度。

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

3. 之所以a包含span就是因?yàn)?整個(gè)導(dǎo)航都是可以點(diǎn)擊的。