css筆記

  • 2019 年 10 月 10 日
  • 筆記

SS的發展歷程

從HTML被發明開始，樣式就以各種形式存在。不同的瀏覽器結合它們各自的樣式語言為用戶提供頁面效果的控制。最初的HTML只包含很少的顯示屬性。 隨着HTML的成長，為了滿足頁面設計者的要求，HTML添加了很多顯示功能。但是隨着這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。於是CSS便生了。

CSS 網頁的美容師

CSS的出現，拯救了混亂的HTML，當讓更加拯救了我們web開發者。 讓我們的網頁更加豐富多彩。

CSS的最大貢獻就是： 讓 HTML 從樣式中解脫苦海， 實現了 HTML 專註去做 結構呈現。 而樣式交給 CSS 後，你完全可以放心的早點洗洗睡了！

而且。。。。。 CSS 做的很出色，如果JavaScript是網頁的魔法師，那麼CSS它是我們網頁的美容師，不信，你看:

ps: 你跟Angelababy只差了一個妝容的距離

有人說， 沒有不漂亮的女人，只有不會打扮的女人。

我想說， 沒有不好看的網頁，只有不會CSS的前端。

CSS初識

CSS(Cascading Style Sheets) 美化樣式

CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表），主要用於設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。

CSS以HTML為基礎，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設置不同的樣式。

引入CSS樣式表（書寫位置）

CSS可以寫到那個位置？ 是不是一定寫到html文件裏面呢？

內部樣式表

內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標籤中，並且用style標籤定義，其基本語法格式如下：

<head>  <style type="text/CSS">      選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}  </style>  </head>

語法中，style標籤一般位於head標籤中title標籤之後，也可以把他放在HTML文檔的任何地方。

type="text/CSS" 在html5中可以省略， 寫上也比較符合規範， 所以這個地方可以寫也可以省略。

行內式（內聯樣式）

內聯樣式，又有人稱行內樣式、行間樣式、內嵌樣式。是通過標籤的style屬性來設置元素的樣式，其基本語法格式如下：

<標籤名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標籤名>

語法中style是標籤的屬性，實際上任何HTML標籤都擁有style屬性，用來設置行內式。其中屬性和值的書寫規範與CSS樣式規則相同，行內式只對其所在的標籤及嵌套在其中的子標籤起作用。

外部樣式表（外鏈式）

鏈入式是將所有的樣式放在一個或多個以.CSS為擴展名的外部樣式表文件中，通過link標籤將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下：

<head>    <link href="CSS文件的路徑"  rel="stylesheet" />  </head>

注意： link 是個單標籤哦!!!

該語法中，link標籤需要放在head頭部標籤中，並且必須指定link標籤的三個屬性，具體如下：

href：定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。  type：定義所鏈接文檔的類型，在這裡需要指定為「text/CSS」，表示鏈接的外部文件為CSS樣式表。  rel：定義當前文檔與被鏈接文檔之間的關係，在這裡需要指定為「stylesheet」，表示被鏈接的文檔是一個樣式表文件。

三種樣式表總結（位置）

樣式表

優點

缺點

使用情況

控制範圍

行內樣式表

書寫方便，權重高

沒有實現樣式和結構相分離

較少

控制一個標籤（少）

內部樣式表

部分結構和樣式相分離

沒有徹底分離

較多

控制一個頁面（中）

外部樣式表

完全實現結構和樣式相分離

需要引入

最多，強烈推薦

控制整個站點（多）

CSS樣式規則

使用HTML時，需要遵從一定的規範。CSS亦如此，要想熟練地使用CSS對網頁進行修飾，首先需要了解CSS樣式規則，具體格式如下：

在上面的樣式規則中:    1.選擇器用於指定CSS樣式作用的HTML對象，花括號內是對該對象設置的具體樣式。  2.屬性和屬性值以「鍵值對」的形式出現。  3.屬性是對指定的對象設置的樣式屬性，例如字體大小、文本顏色等。  4.屬性和屬性值之間用英文「:」連接。  5.多個「鍵值對」之間用英文「;」進行區分。  可以用段落 和 表格的對齊的演示。

選擇器（重點）

要想將CSS樣式應用於特定的HTML元素，首先需要找到該目標元素。在CSS中，執行這一任務的樣式規則部分被稱為選擇器（選擇符）。

如上圖所以，要把裏面的小黃人分為2組，最快的方法怎辦？

很多， 比如 一隻眼睛的一組，剩下的一組

選擇器幹啥的？ 選擇標籤用的

這就用到基礎選擇器組：

CSS基礎選擇器

標籤選擇器（元素選擇器）

標籤選擇器是指用HTML標籤名稱作為選擇器，按標籤名稱分類，為頁面中某一類標籤指定統一的CSS樣式。其基本語法格式如下：

標籤名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }  或者  元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

標籤選擇器最大的優點是能快速為頁面中同類型的標籤統一樣式，同時這也是他的缺點，不能設計差異化樣式。

標籤選擇器 可以把某一類標籤全部選擇出來 div span

課堂案例：

傳智簡介

類選擇器

類選擇器使用「.」（英文點號）進行標識，後面緊跟類名，其基本語法格式如下：

.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
 標籤調用的時候用 class=「類名」  即可。

類選擇器最大的優勢是可以為元素對象定義單獨或相同的樣式。 可以選擇一個或者多個標籤

小技巧：

1.長名稱或詞組可以使用中橫線來為選擇器命名。  2.不建議使用「_」下劃線來命名CSS選擇器。

​ 輸入的時候少按一個shift鍵; 　瀏覽器兼容問題 (比如使用_tips的選擇器命名，在IE6是無效的) 　能良好區分JavaScript變量命名(JS變量命名是用「_」)

3.不要純數字、中文等命名， 盡量使用英文字母來表示。

猜謎底遊戲：

你猜？

命名規範： 見附件（Web前端開發規範手冊.doc）

命名是我們通俗約定的，但是沒有規定必須用這些常用的命名。

課堂案例：

<head>          <meta charset="utf-8">          <style>          span {              font-size: 100px;          }          .blue {              color: blue;          }          .red {              color: red;          }          .orange {              color: orange;          }          .green {              color: green;          }          </style>      </head>      <body>          <span class="blue">G</span>          <span class="red">o</span>          <span class="orange">o</span>          <span class="blue">g</span>          <span class="green">l</span>          <span class="red">e</span>      </body>

多類名選擇器

我們可以給標籤指定多個類名，從而達到更多的選擇目的。

注意：

1. 樣式顯示效果跟HTML元素中的類名先後順序沒有關係,受CSS樣式書寫的上下順序有關。  2. 各個類名中間用空格隔開。

多類名選擇器在後期布局比較複雜的情況下，還是較多使用的。

<div class="pink fontWeight font20">亞瑟</div>  <div class="font20">劉備</div>  <div class="font14 pink">安其拉</div>  <div class="font14">貂蟬</div>

類名選擇器 ：< div class=「nav」> 這個 div 的名字 就是 nav nav 就是 div 這個 div 也是 nav

< 人 class = 劉德華 > 我們想要吧div 找到 div {} .nav {}

id選擇器

id選擇器使用「#」進行標識，後面緊跟id名，其基本語法格式如下：

#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

該語法中，id名即為HTML元素的id屬性值，大多數HTML元素都可以定義id屬性，元素的id值是唯一的，只能對應於文檔中某一個具體的元素。

用法基本和類選擇器相同。

id選擇器和類選擇器區別

W3C標準規定，在同一個頁面內，不允許有相同名字的id對象出現，但是允許相同名字的class。

類選擇器（class） 好比人的名字， 是可以多次重複使用的， 比如 張偉 王偉 李偉 李娜

id選擇器 好比人的身份證號碼， 全中國是唯一的， 不得重複。 只能使用一次。

id選擇器和類選擇器最大的不同在於 使用次數上

通配符選擇器

通配符 選擇器用「*」號表示，他是所有選擇器中作用範圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下：

* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

例如下面的代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標記的默認邊距。

* {    margin: 0;                    /* 定義外邊距*/    padding: 0;                   /* 定義內邊距*/  }

注意：

這個通配符選擇器，就像我們的電影明星中的夢中情人， 想想它就好了，但是它不會和你過日子。

CSS字體樣式屬性

font-size:字號大小

font-size屬性用於設置字號，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位。其中，相對長度單位比較常用，推薦使用像素單位px，絕對長度單位使用較少。具體如下：

font-family:字體

font-family屬性用於設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網頁中所有段落文本的字體設置為微軟雅黑，可以使用如下CSS樣式代碼：

p{ font-family:"微軟雅黑";}

可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。

常用技巧：

1. 現在網頁中普遍使用14px+。  2. 盡量使用偶數的數字字號。ie6等老式瀏覽器支持奇數會有bug。  3. 各種字體之間必須使用英文狀態下的逗號隔開。  4. 中文字體需要加英文狀態下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位於中文字體名之前。  5. 如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font-family: "Times New Roman";。  6. 盡量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。

CSS Unicode字體

在 CSS 中設置字體名稱，直接寫中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時會產生亂碼的錯誤。xp 系統不支持 類似微軟雅黑的中文。

方案一： 你可以使用英文來替代。 比如 font-family:"Microsoft Yahei"。

方案二： 在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤。使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的。 font-family: "5FAE8F6F96C59ED1"，表示設置字體為「微軟雅黑」。

可以通過escape() 來測試屬於什麼字體。

字體名稱

英文名稱

Unicode 編碼

宋體

SimSun

5B8B4F53

新宋體

NSimSun

65B05B8B4F53

黑體

SimHei

9ED14F53

微軟雅黑

Microsoft YaHei

5FAE8F6F96C59ED1

楷體_GB2312

KaiTi_GB2312

69774F53_GB2312

隸書

LiSu

96B64E66

幼園

YouYuan

5E7C5706

華文細黑

STXihei

534E65877EC69ED1

細明體

MingLiU

7EC6660E4F53

新細明體

PMingLiU

65B07EC6660E4F53

為了照顧不同電腦的字體安裝問題，我們盡量只使用宋體和微軟雅黑中文字體

font-weight:字體粗細

字體加粗除了用 b 和 strong 標籤之外，可以使用CSS 來實現，但是CSS 是沒有語義的。

font-weight屬性用於定義字體的粗細，其可用屬性值：normal、bold、bolder、lighter、100~900（100的整數倍）。

小技巧：

數字 400 等價於 normal，而 700 等價於 bold。  但是我們更喜歡用數字來表示。

font-style:字體風格

字體傾斜除了用 i 和 em 標籤之外，可以使用CSS 來實現，但是CSS 是沒有語義的。

font-style屬性用於定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值如下：

normal：默認值，瀏覽器會顯示標準的字體樣式。

italic：瀏覽器會顯示斜體的字體樣式。

oblique：瀏覽器會顯示傾斜的字體樣式。

小技巧：

平時我們很少給文字加斜體，反而喜歡給斜體標籤（em，i）改為普通模式。

font:綜合設置字體樣式 (重點)

font屬性用於對字體樣式進行綜合設置，其基本語法格式如下：

選擇器{font: font-style  font-weight  font-size/line-height  font-family;}
使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。    注意：其中不需要設置的屬性可以省略（取默認值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。

CSS外觀屬性

color:文本顏色

color屬性用於定義文本的顏色，其取值方式有如下3種：

1.預定義的顏色值，如red，green，blue等。

2.十六進制，如#FF0000，#FF6600，#29D794等。實際工作中，十六進制是最常用的定義顏色的方式。

3.RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是，如果使用RGB代碼的百分比顏色值，取值為0時也不能省略百分號，必須寫為0%。

line-height:行間距

ine-height屬性用於設置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。line-height常用的屬性值單位有三種，分別為像素px，相對值em和百分比%，實際工作中使用最多的是像素px

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

text-align:水平對齊方式

text-align屬性用於設置文本內容的水平對齊，相當於html中的align對齊屬性。其可用屬性值如下：

left：左對齊（默認值）

right：右對齊

center：居中對齊

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

text-indent:首行縮進

text-indent屬性用於設置首行文本的縮進，其屬性值可為不同單位的數值、em字符寬度的倍數、或相對於瀏覽器窗口寬度的百分比%，允許使用負值, 建議使用em作為設置單位。

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

text-decoration 文本的裝飾

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

值

描述

none

默認。定義標準的文本。

underline

定義文本下的一條線。下劃線 也是我們鏈接自帶的

overline

定義文本上的一條線。

line-through

定義穿過文本下的一條線。

開發者工具（chrome）

此工具是我們的必備工具，以後代碼出了問題，我們首先第一反應就是：

「按F12」或者是 「shift+ctrl+i」 打開 開發者工具。

菜單： 右擊網頁空白出—查看

小技巧：

  1. ctrl+滾輪 可以 放大開發者工具代碼大小。
  2. 左邊是HTML元素結構 右邊是CSS樣式。
  3. 右邊CSS樣式可以改動數值和顏色查看更改後效果。

CSS複合選擇器

複合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標籤。

交集選擇器

交集選擇器由兩個選擇器構成，其中第一個為標籤選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，如h3.special。

記憶技巧：

交集選擇器 是 並且的意思。 即…又…的意思

比如：   p.one   選擇的是： 類名為 .one  的 段落標籤。

用的相對來說比較少，不太建議使用。

並集選擇器

並集選擇器（CSS選擇器分組）是各個選擇器通過逗號連接而成的，任何形式的選擇器（包括標籤選擇器、class類選擇器id選擇器等），都可以作為並集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用並集選擇器為它們定義相同的CSS樣式。

記憶技巧：

並集選擇器 和 的意思， 就是說，只要逗號隔開的，所有選擇器都會執行後面樣式。

比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 這三個選擇器都會執行顏色為紅色。  通常用於集體聲明。

和他，在一起， 在一起 一起的意思

後代選擇器

後代選擇器又稱為包含選擇器，用來選擇元素或元素組的後代，其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔。當標籤發生嵌套時，內層標籤就成為外層標籤的後代。

子孫後代都可以這麼選擇。 或者說，它能選擇任何包含在內 的標籤。

子元素選擇器

子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個 > 進行連接，注意，符號左右兩側各保留一個空格。

白話： 這裡的子 指的是 親兒子 不包含孫子 重孫子之類。

 比如：  .demo > h3 {color: red;}   說明  h3 一定是demo 親兒子。  demo 元素包含着h3。

測試題

<div class="nav">    <!-- 主導航欄 -->    <ul>      <li><a href="#">公司首頁</a></li>      <li><a href="#">公司簡介</a></li>      <li><a href="#">公司產品</a></li>      <li>           <a href="#">聯繫我們</a>           <ul>                      <li><a href="#">公司郵箱</a></li>                      <li><a href="#">公司電話</a></li>           </ul>      </li>    </ul>  </div>  <div class="sitenav">    <!-- 側導航欄 -->    <div class="site-l">左側側導航欄</div>    <div class="site-r"><a href="#">登錄</a></div>  </div>

在不修改以上代碼的前提下，完成以下任務：

  1. 鏈接 登錄 的顏色為紅色,同時主導航欄裏面的所有的鏈接改為橙色 (簡單)
  2. 主導航欄和側導航欄裏面文字都是14像素並且是微軟雅黑。（中等)
  3. 主導航欄裏面的一級菜單鏈接文字顏色為綠色。（難)

偽類選擇器

偽類選擇器用於向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果， 比如可以選擇 第1個，第n個元素。

偽娘

類 .one

偽類 :link

為了和我們剛才學的類選擇器相區別，  類選擇器是一個點 比如 .demo {}   而我們的偽類 用 2個點 就是 冒號  比如  :link{}

鏈接偽類選擇器

  • :link /* 未訪問的鏈接 */
  • :visited /* 已訪問的鏈接 */
  • :hover /* 鼠標移動到鏈接上 */
  • :active /* 選定的鏈接 */ 注意寫的時候，他們的順序盡量不要顛倒 按照 lvha 的順序。 love hate 愛上了討厭 記憶法 或者 lv 包包 非常 hao
a {   /* a是標籤選擇器  所有的鏈接 */              font-weight: 700;              font-size: 16px;              color: gray;          }  a:hover {   /* :hover 是鏈接偽類選擇器 鼠標經過 */              color: red; /*  鼠標經過的時候，由原來的 灰色 變成了紅色 */  }

CSS注釋

CSS規則是使用     /*  需要注釋的內容  */  進行注釋的，即在需要注釋的內容前使用 「/*」 標記開始注釋，在內容的結尾使用 「*/」結束。

例如：

p {    font-size: 14px;                 /* 所有的字體是14像素大小*/  }

sublime快捷方式

sublime可以快速提高我們代碼的書寫方式

  1. 生成標籤 直接輸入標籤名 按tab鍵即可 比如 div 然後tab 鍵， 就可以生成
  2. 如果想要生成多個相同標籤 加上 * 就可以了 比如 div*3 就可以快速生成3個div
  3. 如果有父子級關係的標籤，可以用 > 比如 ul > li就可以了
  4. 如果有兄弟關係的標籤，用 + 就可以了 比如 div+p
  5. 如果生成帶有類名或者id名字的， 直接寫 .demo 或者 #two tab 鍵就可以了 ​

標籤顯示模式（display）

非洲黑人： 皮膚內黑色素含量高，以吸收陽光中的紫外線，保護皮膚內部結構免遭損害，頭髮象羊毛一樣捲曲，使每根捲髮周圍都有許多空隙，空隙充滿空氣，捲髮有隔熱作用。

歐洲白人： 生活寒帶或着是說常年溫度較低的地緣,加上年日照時間少，身體的黑色素沉澱比較少“所以出現皮膚、發色、瞳暈都呈現淺色

傳智黃人： 我中間的。。。

最重要的總結： 是為了更好的適應環境而完成的自然選擇。

同理，我們網頁的標籤非常多，再不同地方會用到不同類型的標籤，以便更好的完成我們的網頁。

標籤的類型(顯示模式)

HTML標籤一般分為塊標籤和行內標籤兩種類型，它們也稱塊元素和行內元素。具體如下：

塊級元素(block-level)

每個塊元素通常都會獨自佔據一整行或多整行，可以對其設置寬度、高度、對齊等屬性，常用於網頁布局和網頁結構的搭建。 霸道

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

塊級元素的特點：

（1）總是從新行開始

（2）高度，行高、外邊距以及內邊距都可以控制。

（3）寬度默認是容器的100%

（4）可以容納內聯元素和其他塊元素。

行內元素(inline-level)

行內元素（內聯元素）不佔有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬度、高度、對齊等屬性，常用於控制頁面中文本的樣式。

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

我一樣重要

行內元素的特點：

（1）和相鄰行內元素在一行上。

（2）高、寬無效，但水平方向的padding和margin可以設置，垂直方向的無效。

（3）默認寬度就是它本身內容的寬度。

（4）行內元素只能容納文本或則其他行內元素。（a特殊 a裏面可以放塊級元素 ）

注意：

  1. 只有 文字才 能組成段落 因此 p 裏面不能放塊級元素，同理還有這些標籤h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標籤，裏面不能放其他塊級元素。
  2. 鏈接裏面不能再放鏈接。
  3. a裏面可以放塊級元素

塊級元素和行內元素區別

塊級元素的特點：  （1）總是從新行開始  （2）高度，行高、外邊距以及內邊距都可以控制。  （3）寬度默認是容器的100%  （4）可以容納內聯元素和其他塊元素。
行內元素的特點：  （1）和相鄰行內元素在一行上。  （2）高、寬無效，但水平方向的padding和margin可以設置，垂直方向的無效。  （3）默認寬度就是它本身內容的寬度。  （4）行內元素只能容納文本或則其他行內元素。

行內塊元素（inline-block）

在行內元素中有幾個特殊的標籤——<img />、<input />、<td>，可以對它們設置寬高和對齊屬性，有些資料可能會稱它們為行內塊元素。    行內塊元素的特點：  （1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。  （2）默認寬度就是它本身內容的寬度。  （3）高度，行高、外邊距以及內邊距都可以控制。

標籤顯示模式轉換 display

塊轉行內：display:inline;

行內轉塊：display:block;

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

此階段，我們只需關心這三個，其他的是我們後面的工作。

課堂練習

1.寫 三個 div 給定 100 * 100 的紅色盒子 — 寬度 高度 背景色

2.三個 span 也要求 150 * 150 綠色盒子

  1. 三個 a 鏈接 80 * 20 藍色 盒子 要求 必須一行顯示 這三個盒子
  2. 鼠標經過3個a鏈接的時候， 背景顏色變為 橙色 hover bgc
  3. 導航欄案例

CSS書寫規範

開始就形成良好的書寫規範，是你專業化的開始。

空格規範

【強制】 選擇器 與 { 之間必須包含空格。

示例： .selector { }

【強制】 屬性名 與之後的 : 之間不允許包含空格， : 與 屬性值 之間必須包含空格。

示例：

font-size: 12px;

選擇器規範

【強制】 當一個 rule 包含多個 selector 時，每個選擇器聲明必須獨佔一行。

示例：

/* good */  .post,  .page,  .comment {      line-height: 1.5;  }      /* bad */  .post, .page, .comment {      line-height: 1.5;  }

【建議】 選擇器的嵌套層級應不大於 3 級，位置靠後的限定條件應儘可能精確。

示例：

/* good */  #username input {}  .comment .avatar {}    /* bad */  .page .header .login #username input {}  .comment div * {}

屬性規範

【強制】 屬性定義必須另起一行。

示例：

/* good */  .selector {      margin: 0;      padding: 0;  }    /* bad */  .selector { margin: 0; padding: 0; }

【強制】 屬性定義後必須以分號結尾。

示例：

/* good */  .selector {      margin: 0;  }    /* bad */  .selector {      margin: 0  }

行高的測量

行高我們利用最多的一個地方是： 可以讓一行文本在盒子中垂直居中對齊。

做法就是： 文字的行高等於盒子的高度。

這裡情況些許複雜，開始學習，我們可以先從簡單地方入手學會。

上距離和下距離總是相等的，因此文字看上去是垂直居中的。

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

如果行高 大於 高度 文字會 偏下

如果行高小於高度 文字會 偏上

CSS 三大特性

層疊 繼承 優先級 是我們學習CSS 必須掌握的三個特性。

CSS層疊性

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

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

比如先給某個標籤指定了內部文字顏色為紅色，接着又指定了顏色為藍色，此時出現一個標籤指定了相同樣式不同值的情況，這就是樣式衝突。 就近原則

一般情況下，如果出現樣式衝突，則會按照CSS書寫的順序，以最後的樣式為準。

  1. 樣式衝突，遵循的原則是就近原則。 那個樣式離着結構近，就執行那個樣式。
  2. 樣式不衝突，不會層疊
CSS最後的執行口訣：  長江後浪推前浪，前浪死在沙灘上。

CSS繼承性

所謂繼承性是指書寫CSS樣式表時，子標籤會繼承父標籤的某些樣式，如文本顏色和字號。想要設置一個可繼承的屬性，只需將它應用於父元素即可。

簡單的理解就是： 子承父業。

CSS最後的執行口訣：  龍生龍，鳳生鳳，老鼠生的孩子會打洞。

注意：

恰當地使用繼承可以簡化代碼，降低CSS樣式的複雜性。子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的都可以繼承，以及color屬性）

CSS優先級

定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，這時就會出現優先級的問題。

在考慮權重時，初學者還需要注意一些特殊的情況，具體如下：

繼承樣式的權重為0。即在嵌套結構中，不管父元素樣式的權重多大，被子元素繼承時，他的權重都為0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。    行內樣式優先。應用style屬性的元素，其行內樣式的權重非常高，可以理解為遠大於100。總之，他擁有比上面提高的選擇器都大的優先級。    權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優先級，或者說排在最後的樣式優先級最大。    CSS定義了一個!important命令，該命令被賦予最大的優先級。也就是說不管權重如何以及樣式位置的遠近，!important都具有最大優先級。

CSS特殊性（Specificity）

關於CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity，我們稱為CSS 特性或稱非凡性，它是一個衡量CSS值優先級的一個標準 具體規範入如下：

specificity用一個四位的數 字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大於一級，數位之間沒有進制，級別之間不可超越。

繼承或者* 的貢獻值

0,0,0,0

每個元素（標籤）貢獻值為

0,0,0,1

每個類，偽類貢獻值為

0,0,1,0

每個ID貢獻值為

0,1,0,0

每個行內樣式貢獻值

1,0,0,0

每個!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    #nav p       ----->       0,1,0,1

​

​

注意：

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

  1. 繼承的 權重是 0

總結優先級：

  1. 使用了 !important聲明的規則。
  2. 內嵌在 HTML 元素的 style屬性裏面的聲明。
  3. 使用了 ID 選擇器的規則。
  4. 使用了類選擇器、屬性選擇器、偽元素和偽類選擇器的規則。
  5. 使用了元素選擇器的規則。
  6. 只包含一個通用選擇器的規則。
  7. 同一類選擇器則遵循就近原則。
總結：權重是優先級的算法，層疊是優先級的表現

CSS 背景(background)

CSS 可以添加背景顏色和背景圖片，以及來進行圖片設置。

background-color

背景顏色

background-image

背景圖片地址

background-repeat

是否平鋪

background-position

背景位置

background-attachment

背景固定還是滾動

背景的合寫（複合屬性）

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

背景圖片(image)

語法：

background-image : none | url (url)

參數：

none : 　無背景圖（默認的） url : 　使用絕對或相對地址指定背景圖像

background-image 屬性允許指定一個圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用。 如果圖片不重複地話，圖片覆蓋不到地地方都會被背景色填充。 如果有背景圖片平鋪，則會覆蓋背景顏色。

小技巧： 我們提倡 背景圖片後面的地址，url不要加引號。

背景平鋪（repeat）

語法：

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

參數：

repeat : 　背景圖像在縱向和橫向上平鋪（默認的）

no-repeat : 　背景圖像不平鋪

repeat-x : 　背景圖像在橫向上平鋪

repeat-y : 　背景圖像在縱向平鋪

設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。

repeat-x : 　背景圖像在橫向上平鋪

repeat-y : 　背景圖像在縱向平鋪

設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。

背景位置(position)

語法：

background-position : length || length    background-position : position || position

參數：

length : 　百分數 | 由浮點數字和單位標識符組成的長度值。請參閱長度單位 position : 　top | center | bottom | left | center | right

說明：

設置或檢索對象的背景圖像位置。必須先指定background-image屬性。默認值為：(0% 0%)。 如果只指定了一個值，該值將用於橫坐標。縱坐標將默認為50%。第二個值將用於縱坐標。

注意：

  1. position 後面是x坐標和y坐標。 可以使用方位名詞或者 精確單位。
  2. 如果和精確單位和方位名字混合使用，則必須是x坐標在前，y坐標後面。比如 background-position: 15px top; 則 15px 一定是 x坐標 top是 y坐標。

實際工作用的最多的，就是背景圖片居中對齊了。

背景附着

語法：

background-attachment : scroll | fixed

參數：

scroll : 　背景圖像是隨對象內容滾動 fixed : 　背景圖像固定

說明：

設置或檢索背景圖像是隨對象內容滾動還是固定的。

背景簡寫

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

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

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

背景透明(CSS3)

CSS3支持背景半透明的寫法語法格式是:

background: rgba(0,0,0,0.3);

最後一個參數是alpha 透明度 取值範圍 0~1之間

注意： 背景半透明是指盒子背景半透明， 盒子裏面的內容不收影響。

導航欄案例

使用技巧：在一行內的盒子內，我們設定行高等於盒子的高度，就可以使文字垂直居中。

<head>          <meta charset="utf-8">          <style>          body {              background-color: #000;          }          a {              width: 200px;              height: 50px;              /* background-color: orange; */              display: inline-block;  /* 把a 行內元素轉換為行內塊元素 */              text-align: center;  /* 文字水平居中 */              line-height: 50px;  /* 我們設定行高等於盒子的高度，就可以使文字垂直居中 */              color: #fff;              font-size: 22px;              text-decoration: none;  /* 取消下劃線 文本裝飾 */          }          a:hover {  /* 鼠標經過 給我們的鏈接添加背景圖片*/              background: url(images/h.png) no-repeat;          }          </style>      </head>      <body>      <a href="#">專區說明</a>      <a href="#">申請資格</a>      <a href="#">兌換獎勵</a>      <a href="#">下載遊戲</a>      </body>

盒子模型（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:四邊寬度 四邊樣式 四邊顏色;

 
    border-top: 1px solid red; /*上邊框*/      border-bottom: 2px solid green; /*下邊框*/      border-left: 1px solid blue;      border-right: 5px solid pink;        border: 1px solid red;

表格的細線邊框

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

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

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

內邊距（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 順時針

課堂案例： 新浪導航

關於盒子寬度下列正確的是（）

(A) 盒子寬：就是width的大小

(B) 盒子寬： padding-left + width + padding-right

(C) 盒子寬： border-left + width + border-right

(D) 盒子寬： border-left+ padding-left + width + padding-right + border-right

w 100 padding 10 border 5 ? 實際大小 ？ 130

3關於盒子高度下列正確的是（）

(A) 盒子高：就是height的大小

(B) 盒子高：padding-top +height + padding-bottom

(C) 盒子高：border-top + height + border-bottom

(D) 盒子高：border-top + padding-top +height + padding-bottom + border-bottom

4** 關於根據下列代碼計算 盒子寬高下列說法正確的是（）******

div {

​ width: 200px;

​ height: 200px;

​ border: 1px solid #000000;

​ border-top: 5px solid blue;

​ padding: 50px;

​ padding-left: 100px;

​ }

(A) 寬度為200px 高度為200px

(B) 寬度為352px 高度為306px

(C) 寬度為302px 高度為307px

(D) 寬度為302px 高度為252px

外邊距（margin）

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

margin-top:上外邊距

margin-right:右外邊距

margin-bottom:下外邊距

margin-left:上外邊距

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

取值順序跟內邊距相同。

外邊距實現盒子居中

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

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

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

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

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

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

  1. 文字水平居中是 text-align: center
  2. 盒子水平居中 左右margin 改為 auto
text-align: center; /*  文字居中水平 */  margin: 10px auto;  /* 盒子水平居中  左右margin 改為 auto 就闊以了 */
  1. 插入圖片 我們用的最多 比如產品展示類
  2. 背景圖片我們一般用於小圖標背景 或者 超大背景圖片
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. 可以為父元素定義1像素的上邊框或上內邊距。
  2. 可以為父元素添加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

原因：

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

圓角邊框(CSS3)

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

語法格式：

border-radius: 50%;   讓一個正方形  變成圓圈

盒子陰影(CSS3)

語法格式：

box-shadow:水平陰影 垂直陰影 模糊距離（虛實）  陰影尺寸（影子大小）  陰影顏色  內/外陰影；
  1. 前兩個屬性是必須寫的。其餘的可以省略。
  2. 外陰影 (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

元素不浮動（默認值）

浮動詳細內幕特性

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

1. 浮動首先創建包含塊的概念（包裹）。就是說， 浮動的元素總是找理它最近的父級元素對齊。但是不會超出內邊距的範圍。
2.一個父盒子裏面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。
3. 元素添加浮動後，元素會具有行內塊元素的特性。元素的大小完全取決於定義的大小或者默認的內容多少浮動根據元素書寫的位置來顯示相應的浮動。

總結： 浮動 —>

浮動的目的就是為了讓多個塊級元素同一行上顯示。 最核心的關鍵點就是 怎麼排列的， 是否佔有位置

float 浮 漏 特

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

版心和布局流程

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

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

布局流程

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

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

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

3、製作HTML結構 。

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

一列固定寬度且居中

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

兩列左窄右寬型

比如小米 小米官網

通欄平均分佈型

比如鎚子 鎚子官網

清除浮動

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

途經國貿，羨慕繁華；

途經天安門，幻想權力；

途經金融街，夢想發財；

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

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

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

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

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

為什麼要清除浮動

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

。

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

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

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

清除浮動本質

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

清除浮動的方法

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

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

選擇器{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:"" 盡量不帶點

使用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。

代表網站： 小米、騰訊等

Photoshop基本使用

PS界面組成：

ctrl + r 顯示隱藏標尺 右擊 標尺 — 把裏面的單位一律改為像素

ctrl+ d 取消選區

菜單欄、選項欄、工具欄、浮動面板（拖拽名稱，可單獨操作面板）、繪圖窗口 ​ 窗口菜單，可顯示隱藏所有面板

工作區：（新建）

調整浮動面板

圖層操作(重點)

圖層面板快捷鍵 F7 其實圖層就是一張張透明的紙 可以實現疊加問題。

圖層選擇： 使用移動工具V

1、圖層縮覽圖判斷

2、按住CTRL,在目標圖像上單擊

3、將光標放置在目標圖像上右鍵，選擇圖層名稱

圖層面板中加選圖層：

1、按SHIFT，單擊另一目標圖層 中間所有圖層被選中

2、按CTRL，單擊另一目標圖層 只選中目標圖層

複製圖層：選中目標圖層後（移動工具狀態下）

1、按ALT拖拽圖像

2、CTRL+J （重合）

案例： 擺放一個單車

圖層編組

選中目標圖層，CTRL+G

取消編組：CTRL+SHIFT+G

雙擊圖層名稱可重新命名

雙擊組名稱，可命名組

移動工具V選擇組或圖層時，需設置選項欄

圖層上下位置移動

1、選中目標圖層，在圖層面拖拽

2、CTRL+] 向上移動圖層 ​ CTRL+[ 向下移動圖層

3、CTRL+SHIFT+] 圖層置頂 ​ CTRL+SHIFT+[ 圖層置底

移動選區或圖像時：

移動過程中，沒釋放鼠標，按住SHIFT，可同一水平線、同一垂線、45度移動。

ps中的撤銷操作是：

ctrl+z 撤銷一步

ctrl+alt+z 撤銷多步

Photoshop 切圖

PS切圖 可以 分為 手動 利用切片切圖 以及 利用PS的插件快速切圖

切片工具

  1. 利用切片工具手動划出
  2. 圖層菜單—新建基於圖層的切片
  3. 利用標尺 基於參考線的切片 （選擇切片工具） ​
  4. 先選個一個整個的切片， 切片選擇工具– 屬性面板中有 「劃分」 –可以等分數平分切圖

導出切片： 文件– 存儲為web設備所用格式

輔助線和切片使用及清除

視圖菜單– 清除 輔助線/ 清除切片

切圖插件

Cutterman是一款運行在photoshop中的插件，能夠自動將你需要的圖層進行輸出， 以替代傳統的手工 "導出web所用格式" 以及使用切片工具進行挨個切圖的繁瑣流程。 它支持各種各樣的圖片尺寸、格式、形態輸出，方便你在pc、ios、Android等端上使用。 它不需要你記住一堆的語法、規則，純點擊操作，方便、快捷，易於上手。

官網: http://www.cutterman.cn/zh/cutterman

注意： cutterman插件要求你的ps 必須是完整版，不能是綠色版，所以大家需要從新安裝完整版本。

項目案例： 雲道頁面

案例練習目的是總結以前的css和html

還有ps的使用。

製作步驟：

  1. 準備相關文件。（內部樣式表) html文件(index.html) 圖片文件
  2. 準備CSS 初始化。 書寫結構和樣式
  3. 確定版心（是1200像素)和各個模塊。

定位(position)

background-position 背景定位

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

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

為什麼要用定位？

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

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

第二幅圖， 左右箭頭壓住圖片：

第三幅圖, hot 再盒子外面多出一塊，更加突出：

以上三個小地方，如果用標準流或者浮動，實現會比較複雜或者難以實現，此時我們用定位來做，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： 靜態定位其實沒啥可說的。

靜態定位唯一的用處： 就是 取消定位。 position: static;

相對定位relative(自戀型)

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

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

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

注意：

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

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

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

絕對定位absolute (拼爹型)

小笑話：    吃早飯時，老婆往兒子碗里放了兩個煎蛋，兒子全給了我，還一本正經地說：「爸爸，多吃點，男人養家不容易。」 <br/>    我一陣感動，剛想誇他兩句。    兒子接著說：「以後全靠你讓我拼爹了！」

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

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

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

父級沒有定位

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

父級有定位

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

子絕父

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

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

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

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

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

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

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

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

這就是子絕父相的由來。

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

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

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

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

固定定位fixed(認死理型)

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

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

固定定位有兩點：

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

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

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

疊放次序（z-index）

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

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

比如： z-index: 2; font-weight: 700

注意：

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

四種定位總結

定位模式

是否脫標佔有位置

是否可以使用邊偏移

移動位置基準

靜態static

不脫標，正常模式

不可以

正常模式

相對定位relative

脫標，佔有位置

可以

相對自身位置移動（自戀型）

絕對定位absolute

完全脫標，不佔有位置

可以

相對於定位父級移動位置（拼爹型）

固定定位fixed

完全脫標，不佔有位置

可以

相對於瀏覽器移動位置（認死理型）

定位模式轉換

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

行內塊 的寬度和高度 跟內容有關係

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

CSS高級技巧

元素的顯示與隱藏

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

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

display 顯示

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

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

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

visibility 可見性

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

visible : 　對象可視

hidden : 　對象隱藏

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

overflow 溢出

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

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

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

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

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

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  style="resize: none;"></textarea>

vertical-align 垂直對齊

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

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

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

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

vertical-align : baseline |top |middle |bottom

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

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

圖片、表單和文字對齊

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

去除圖片底側空白縫隙

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

解決的方法就是：

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

溢出的文字隱藏

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>

總結：

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

web字體

字體格式

不同瀏覽器所支持的字體格式是不一樣的，我們有必要了解一下有關字體格式的知識。

1、TureType(.ttf)格式

.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

2、OpenType(.otf)格式

.otf字體被認為是一種原始的字體格式，其內置在TureType的基礎上，支持這種字體的瀏覽器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；

3、Web Open Font Format(.woff)格式

woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

4、Embedded Open Type(.eot)格式

.eot字體是IE專用字體，可以從TrueType創建此格式字體，支持這種字體的瀏覽器有IE4+；

5、SVG(.svg)格式

.svg字體是基於SVG字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

了解了上面的知識後，我們就需要為不同的瀏覽器準備不同格式的字體，通常我們會通過字體生成工具幫我們生成各種格式的字體，因此無需過於在意字體格式間的區別差異。

字體圖標

圖片是有諸多優點的，但是缺點很明顯，比如圖片不但增加了總文件的大小，還增加了很多額外的"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

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

  1. 首先把 以下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 從新上傳，然後，選中自己想要新的圖標，從新下載壓縮包，替換原來文件即可。

京東項目(一)

京東項目介紹

項目名稱：京東網 項目描述：京東首頁公共部分的頭部和尾部製作，京東首頁中間部分。

項目背景

現階段電商類網站很流行，很多同學畢業之後會進入電商類企業工作，同時電商類網站需要的技術也是較為複雜的，這裡用京東電商網站複習、總結、提高前面所學布局技術。其實，最主要的原因還是，為啥寫京東？ 因為劉強東，賺了我們的錢，搶了我們的女神， 我們也要學劉強東，賺別人的錢，搶別人..額，自己的女神。。。

設計目標

  • 保證瀏覽器 ie7及以上, 火狐, 360, safari，chrome等。誰讓我再測ie6，就跟誰急。。
  • 熟悉CSS+DIV布局，頁面的搭建工作
  • 了解常用電商類網站的布局模式
  • 為後期京東移動端做鋪墊

幾點思考

(1). 開發工具 sublime 、fireworks（ps）、各種瀏覽器(ie6.7 要測看心情)

(2). CSS Reset 類庫,為跨瀏覽器兼容做準備(也可以直接運用jd網站的初始化)

normalize.css   只是一個很小的CSS文件，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比於傳統的CSS reset，Normalize.css是一種現代的、為HTML5準備的優質替代方案。Normalize.css現在已經被用於Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及許許多多其他框架、工具和網站上。 你值得擁有。。    - 保護有用的瀏覽器默認樣式而不是完全去掉它們    - 一般化的樣式：為大部分HTML元素提供    - 修復瀏覽器自身的bug並保證各瀏覽器的一致性    - 優化CSS可用性：用一些小技巧    - 解釋代碼：用注釋和詳細的文檔來

(3). 技術棧

HTML 結構 + CSS  布局 (因為我們就會這些。。。嘻嘻)

(4). 低版本瀏覽器 單獨製作一個跳轉頁面 (都是孩子，也捨不得打，捨不得扔)

https://h5.m.jd.com/dev/3dm8aE4LDBNMkDfcCaRxLnVQ7rqo/index.html

目錄說明

要實現結構和樣式相分離的設計思想。 根目錄下有這4個文件（目錄）。

名稱

說明

css

用於存放CSS文件

images

用於存放圖片

index

京東首頁 HTML

js

用於後期存放javascript文件

運用知識點

引入ico圖標

代碼：  <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>

注意：

  1. 她(它)不是iconfont字體哦 也不是圖片。
  2. 位置是放到 head 標籤中間。
  3. 後面的type="image/x-icon" 屬性可以省略。（我相信你也願意省略。）
  4. 為了兼容性，請將favicon.ico 這個圖標放到根目錄下。（我們就不要任性了，聽話放位置，省很多麻煩。。你好，我也好） ​

轉換ico圖標

我們可以自己做的圖片，轉換為 ico圖標，以便放到我們站點裏面。 http://www.bitbug.net/

網站優化三大標籤

SEO是由英文Search Engine Optimization縮寫而來， 中文意譯為「搜索引擎優化」！SEO是指通過對網站進行站內優化、網站結構調整、網站內容建設、網站代碼優化等)和站外優化，從而提高網站的關鍵詞排名以及公司產品的曝光度。 簡單的說就是，把產品做好，搜索引擎就會介紹客戶來。

我們現在階段主要進行站內優化。網站優化，我們應該要懂。。。

網頁title 標題

title具有不可替代性，是我們的內頁第一個重要標籤，是搜索引擎了解網頁的入口，和對網頁主題歸屬的最佳判斷點。

建議：

首頁標題：網站名（產品名）- 網站的介紹

例如：

京東(JD.COM)-綜合網購首選-正品低價、品質保障、配送及時、輕鬆購物！

小米商城 – 小米5s、紅米Note 4、小米MIX、小米筆記本官方網站

Description 網站說明

對於關鍵詞的作用明顯降低，但由於很多搜索引擎，仍然大量採用網頁的MATA標籤中描述部分作為搜索結果的「內容摘要」。 就是簡要說明我們網站的主要做什麼的。 我們提倡，Description作為網站的總體業務和主題概括，多採用「我們是…」「我們提供…」「×××網作為…」「電話：010…」之類語句。

京東網：

<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!" />

注意點：

  1. 描述中出現關鍵詞，與正文內容相關，這部分內容是給人看的，所以要寫的很詳細，讓人感興趣， 吸引用戶點擊。
  2. 同樣遵循簡短原則，字符數含空格在內不要超過 120 個漢字。
  3. 補充在 title 和 keywords 中未能充分表述的說明.
  4. 用英文逗號 關鍵詞1,關鍵詞2
<meta name="description" content="小米商城直營小米公司旗下所有產品，囊括小米手機系列小米MIX、小米Note 2，紅米手機系列紅米Note 4、紅米4，智能硬件，配件及小米生活周邊，同時提供小米客戶服務及售後支持。" />

Keywords 關鍵字

Keywords是頁面關鍵詞，是搜索引擎關注點之一。Keywords應該限制在6～8個關鍵詞左右，電商類網站可以多 少許。

京東網：

<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,存儲卡,京東" />

小米網：

<meta name="keywords" content="小米,小米6,紅米Note4,小米MIX,小米商城" />

頂部（快捷菜單）所用知識點

知識點

說明

通欄的盒子

不用給寬度 默認為 100% 但是加了浮動和定位的盒子需要 添加 100%

盒子居中對齊

margin: auto; 注意必須有寬度的塊級元素，文字水平居中對齊是 text-align:center;

行高會繼承

文字性質的，比如 顏色、文字大小、字體、行高等會繼承父級元素

浮動元素、固定定位，絕對定位會模式轉換

具有行內塊特性，比如一行放多個，有高度和寬度，如果沒有指定寬度，則會根據內容多少撐開。

logo 和搜索 header 區域所用知識點

網頁布局穩定性

寬度剩餘法：

知識點

說明

浮動元素特性

1. 浮動可以讓多個元素同一行顯示 2. 浮動的元素是頂部對齊

logo優化

text-indent: -20000px; 隱藏文字， 背景圖片

清除浮動

清除浮動的目的就是為了解決父親高度為0的問題

鼠標樣式

cursor: pointer; 小手 cursor: move; 四角箭頭 cursor: text; 插入光標 cursor: default; 小白

不允許換行

white-space: nowrap;

nav導航欄所用知識點

名稱

說明

邊框底側

border-bottom: 2px solid #ccc;

定位重點

絕對定位不佔位置 相對定位佔有位置

標籤語義化dl

dl也是塊級元素 dt 是 定義標題 dd 是定義描述，dd是圍繞這dt來描述的，也就是說，dd算是dt 的解釋說明詳細分解。

標題標籤h

盡量少用h1，可以多用h2和h3等標籤

頁面底部所用知識點

名稱

說明

絕對定位的盒子居中對齊

盒子 left 50% 然後通過 margin 負值自己的寬度一半（固定定位也是如此）

固定定位的盒子靠近版心右側對齊

跟絕對定位的盒子居中對齊原理差不多。

left 50% 然後 margin-left 版心寬度一半。

學習目標:

  • 掌握京東中間部分製作
  • 理解BFC使用
  • 了解優雅降級和漸進增強
  • 了解CSS壓縮和驗證工具 typora-copy-images-to: media

京東項目(二)

nav導航欄所用知識點

名稱

說明

邊框底側

border-bottom: 2px solid #ccc;

定位重點

絕對定位不佔位置 相對定位佔有位置

標籤語義化dl

dl也是塊級元素 dt 是 定義標題 dd 是定義描述，dd是圍繞這dt來描述的，也就是說，dd算是dt 的解釋說明詳細分解。

標題標籤h

盡量少用h1，可以多用h2和h3等標籤

固定定位的盒子靠近版心右側對齊

跟絕對定位的盒子居中對齊原理差不多。

left 50% 然後 margin-left 版心寬度一半。

焦點圖部分所用知識點

名稱

說明

圓角矩形

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

負值自己的寬度一半（固定定位也是如此）

背景半透明

1.強烈推薦： background: rgba(r,g,b,alpha);

​ r,g,b 是紅綠藍的顏色， alpha 是透明度的意思，取值範圍是 0~1 之間。

2.了解ie低版本瀏覽器 半透明

filter:Alpha(opacity=50) ； // opacity值為0 到 100

但是 此屬性是盒子半透明，不是背景半透明哦，因為裏面的內容也一起半透明了

因此，低版本的 ie6.7瀏覽器，我們不需要透明了，直接採用優雅降級的做法。

background: gary;

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

寫上兩句 背景， 低版本ie只執行gray， 其他瀏覽器執行 半透明下面這一句。

CSS W3C 統一驗證工具

CssStats 是一個在線的 CSS 代碼分析工具

網址是：  http://www.cssstats.com/

如果你想要更全面的，這個神奇，你值得擁有：

W3C 統一驗證工具： http://validator.w3.org/unicorn/ ☆☆☆☆☆

因為它可以檢測本地文件哦！！

http://tool.chinaz.com/Tools/CssFormat.aspx css 代碼壓縮

HTML5新標籤與特性

兼容性問題 （ie9 以上的版本）

文檔類型設定

  • document
    • HTML: sublime 輸入 html:4s
    • XHTML: sublime 輸入 html:xt
    • HTML5 sublime 輸入 html:5 <!DOCTYPE html>

字符設定

  • ：HTML與XHTML中建議這樣去寫
  • ：HTML5的標籤中建議這樣去寫

常用新標籤

w3c 手冊中文官網 : http://w3school.com.cn/

  • header：定義文檔的頁眉 頭部
  • nav：定義導航鏈接的部分
  • footer：定義文檔或節的頁腳 底部
  • article：定義文章。
  • section：定義文檔中的節（section、區段）
  • aside：定義其所處內容之外的內容 側邊 <header> 語義 :定義頁面的頭部 頁眉</header> <nav> 語義 :定義導航欄 </nav> <footer> 語義: 定義 頁面底部 頁腳</footer> <article> 語義: 定義文章</article> <section> 語義： 定義區域</section> <aside> 語義： 定義其所處內容之外的內容 側邊</aside> ​
  • datalist 標籤定義選項列表。請與 input 元素配合使用該元素 <input type="text" value="請輸入明星" list="star"/> <datalist id="star"> <option value="劉德華">劉德華</option> <option value="劉若英">劉若英</option> <option value="劉曉慶">劉曉慶</option> <option value="戚薇">戚薇</option> <option value="戚繼光">戚繼光</option> </datalist> ​
  • fieldset 元素可將表單內的相關元素分組，打包 legend 搭配使用 <fieldset> <legend>用戶登錄</legend> 標題 用戶名: <input type="text"><br /><br /> 密　碼: <input type="password"> </fieldset> ​

新增的input type屬性值：

類型****

使用示例****

含義****

email****

輸入郵箱格式

tel****

輸入手機號碼格式

url****

輸入url格式

number****

輸入數字格式

search****

搜索框（體現語義化）

range****

自由拖動滑塊

time****

小時分鐘

date****

年月日

datetime****

時間

month****

月年

week****

星期 年

常用新屬性

屬性****

用法****

含義****

placeholder****

佔位符 當用戶輸入的時候 裏面的文字消失 刪除所有文字，自動返回

autofocus****

規定當頁面加載時 input 元素應該自動獲得焦點

multiple****

多文件上傳

autocomplete****

規定表單是否應該啟用自動完成功能 有2個值，一個是on 一個是off on 代表記錄已經輸入的值 1.autocomplete 首先需要提交按鈕 2.這個表單您必須給他名字

required****

必填項 內容不能為空

accesskey****

規定激活（使元素獲得焦點）元素的快捷鍵 採用 alt + s的形式

綜合案例

<form action="">    <fieldset>      <legend>學生檔案</legend>      <label for="userName">姓名:</label>      <input type="text" name="userName" id="userName" placeholder="請輸入用戶名"> <br>      <label for="userPhone">手機號碼:</label>      <input type="tel" name="userPhone" id="userPhone" pattern="^1d{10}$"><br>      <label for="email">郵箱地址:</label>      <input type="email" required name="email" id="email"><br>      <label for="collage">所屬學院:</label>      <input type="text" name="collage" id="collage" list="cList" placeholder="請選擇"><br>      <datalist id="cList">        <option value="前端與移動開發學院"></option>        <option value="java學院"></option>        <option value="c++學院"></option>      </datalist><br>      <label for="score">入學成績:</label>      <input type="number" max="100" min="0" value="0" id="score"><br>     <form action="">      <fieldset>          <legend>學生檔案思密達</legend>          <label>姓名: <input type="text" placeholder="請輸入學生名字"/></label> <br /><br />          <label>手機號: <input type="tel" /></label> <br /><br />          <label>郵箱: <input type="email" /></label> <br /><br />          <label>所屬學院:  <input type="text" placeholder="請選擇學院" list="xueyuan"/>          <datalist id="xueyuan">              <option>java學院</option>              <option>前端學院</option>              <option>php學院</option>              <option>設計學院</option>          </datalist>            <br /><br />            <label>出生日期:   <input type="date" /></label> <br /><br />          <label>成績:  <input type="number" /></label> <br /><br />          <label>畢業時間:  <input type="date" /></label> <br /><br />          <input type="submit" />  <input type="reset" />      </fieldset>      </form>      <label for="inTime">入學日期:</label>      <input type="date" id="inTime" name="inTime"><br>      <label for="leaveTime">畢業日期:</label>      <input type="date" id="leaveTime" name="leaveTime"><br>      <input type="submit">    </fieldset>  </form>

多媒體標籤

  • embed：標籤定義嵌入的內容
  • audio：播放音頻
  • video：播放視頻

多媒體 embed（會使用）

embed可以用來插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url為音頻或視頻文件及其路徑，可以是相對路徑或絕對路徑。

因為兼容性問題，我們這裡只講解 插入網絡視頻， 後面H5會講解 audio 和video 視頻多媒體。

<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

​

優酷，馬鈴薯，愛奇藝，騰訊、樂視等等

  1. 先上傳
  2. 在分享

多媒體 audio

HTML5通過標籤來解決音頻播放的問題。

使用相當簡單，如下圖所示

並且可以通過附加屬性可以更友好控制音頻的播放，如：

autoplay 自動播放

controls 是否顯不默認播放控件

loop 循環播放 如果這個屬性不寫 默認播放一次 loop 或者 loop = 「loop」 表示無限循環

由於版權等原因，不同的瀏覽器可支持播放的格式是不一樣的，如下圖供參考

多瀏覽器支持的方案，如下圖

標籤允許您規定可替換的視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇

多媒體 video

HTML5通過標籤來解決音頻播放的問題。

同音頻播放一樣，使用也相當簡單，如下圖

同樣，通過附加屬性可以更友好的控制視頻的播放

autoplay 自動播放

controls 是否顯示默認播放控件

loop 循環播放

width 設置播放窗口寬度

height 設置播放窗口的高度

由於版權等原因，不同的瀏覽器可支持播放的格式是不一樣的，如下圖供參考

多瀏覽器支持的方案，如下圖****

CSS3 新增選擇器

結構(位置)偽類選擇器（CSS3)

  • :first-child :選取屬於其父元素的首個子元素的指定選擇器
  • :last-child :選取屬於其父元素的最後一個子元素的指定選擇器
  • :nth-child(n) ： 匹配屬於其父元素的第 N 個子元素，不論元素的類型
  • :nth-last-child(n) ：選擇器匹配屬於其元素的第 N 個子元素的每個元素，不論元素的類型，從最後一個子元素開始計數。 n 可以是數字、關鍵詞或公式
  • ​
li:first-child { /*  選擇第一個孩子 */                  color: pink;              }  li:last-child {   /* 最後一個孩子 */                  color: purple;              }  li:nth-child(4) {   /* 選擇第4個孩子  n  代表 第幾個的意思 */                  color: skyblue;              }

屬性選擇器

選取標籤帶有某些特殊屬性的選擇器 我們成為屬性選擇器

/* 獲取到 擁有 該屬性的元素 */  div[class^=font] { /*  class^=font 表示 font 開始位置就行了 */              color: pink;          }  div[class$=footer] { /*  class$=footer 表示 footer 結束位置就行了 */              color: skyblue;          }  div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */              color: green;          }
<div class="font12">屬性選擇器</div>      <div class="font12">屬性選擇器</div>      <div class="font24">屬性選擇器</div>      <div class="font24">屬性選擇器</div>      <div class="font24">屬性選擇器</div>      <div class="24font">屬性選擇器123</div>      <div class="sub-footer">屬性選擇器footer</div>      <div class="jd-footer">屬性選擇器footer</div>      <div class="news-tao-nav">屬性選擇器</div>      <div class="news-tao-header">屬性選擇器</div>      <div class="tao-header">屬性選擇器</div>

偽元素選擇器（CSS3)

  1. E::first-letter文本的第一個單詞或字（如中文、日文、韓文等）
  2. E::first-line 文本第一行；
  3. E::selection 可改變選中文本的樣式；
p::first-letter {    font-size: 20px;    color: hotpink;  }    /* 首行特殊樣式 */  p::first-line {    color: skyblue;  }    p::selection {    /* font-size: 50px; */    color: orange;  }

4、E::before和E::after

在E元素內部的開始位置和結束位創建一個元素，該元素為行內元素，且必須要結合content屬性使用。

div::befor {    content:"開始";  }  div::after {    content:"結束";  }

E:after、E:before 在舊版本里是偽元素，CSS3的規範里「:」用來表示偽類，「::」用來表示偽元素，但是在高版本瀏覽器下E:after、E:before會被自動識別為E::after、E::before，這樣做的目的是用來做兼容處理。

":" 與 "::" 區別在於區分偽類和偽元素

之所以被稱為偽元素，是因為他們不是真正的頁面元素，html沒有對應的元素，但是其所有用法和表現行為與真正的頁面元素一樣，可以對其使用諸如頁面元素一樣的css樣式，表面上看上去貌似是頁面的某些元素來展現，實際上是css樣式展現的行為，因此被稱為偽元素。是偽元素在html代碼機構中的展現，可以看出無法偽元素的結構無法審查

注意

偽元素:before和:after添加的內容默認是inline元素**；這個兩個偽元素的content屬性，表示偽元素的內容,設置:before和:after時必須設置其content屬性，否則偽元素就不起作用。

CSS3盒模型

CSS3中可以通過box-sizing 來指定盒模型，即可指定為content-box、border-box，這樣我們計算盒子大小的方式就發生了改變。

可以分成兩種情況：

1、box-sizing: content-box 盒子大小為 width + padding + border content-box:此值為其默認值，其讓元素維持W3C的標準Box Mode

2、box-sizing: border-box 盒子大小為 width 就是說 padding 和 border 是包含到width裏面的

註：上面的標註的width指的是CSS屬性里設置的width: length，content的值是會自動調整的。

div:first-child {              width: 200px;              height: 200px;              background-color: pink;              box-sizing: content-box;  /*  就是以前的標準盒模型  w3c */              padding: 10px;              border: 15px solid red;              /* 盒子大小為 width + padding + border   content-box:此值為其默認值，其讓元素維持W3C的標準Box Mode */          }          div:last-child {              width: 200px;              height: 200px;              background-color: purple;              padding: 10px;              box-sizing: border-box;   /* padding border  不撐開盒子 */              border: 15px solid red;              /* margin: 10px; */              /* 盒子大小為 width    就是說  padding 和 border 是包含到width裏面的 */  }

學成在線綜合案例

過渡(CSS3)

過渡（transition)是CSS3中具有顛覆性的特徵之一，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。

幀動畫：通過一幀一幀的畫面按照固定順序和速度播放。如電影膠片

在CSS3里使用transition可以實現補間動畫（過渡效果），並且當前元素只要有「屬性」發生變化時即存在兩種狀態(我們用A和B代指），就可以實現平滑的過渡，為了方便演示採用hover切換兩種狀態，但是並不僅僅局限於hover狀態來實現過渡。

語法格式:

transition: 要過渡的屬性  花費時間  運動曲線  何時開始;  如果有多組屬性變化，還是用逗號隔開。

屬性

描述

CSS

transition

簡寫屬性，用於在一個屬性中設置四個過渡屬性。

3

transition-property

規定應用過渡的 CSS 屬性的名稱。

3

transition-duration

定義過渡效果花費的時間。默認是 0。

3

transition-timing-function

規定過渡效果的時間曲線。默認是 "ease"。

3

transition-delay

規定過渡效果何時開始。默認是 0。

3

如果想要所有的屬性都變化過渡， 寫一個all 就可以

transition-duration 花費時間 單位是 秒 s 比如 0.5s 這個s單位必須寫 ms 毫秒

運動曲線 默認是 ease

何時開始 默認是 0s 立馬開始

運動曲線示意圖：

div {              width: 200px              height: 100px;              background-color: pink;              /* transition: 要過渡的屬性  花費時間  運動曲線  何時開始; */              transition: width 0.6s ease 0s, height 0.3s ease-in 1s;              /* transtion 過渡的意思  這句話寫到div裏面而不是 hover裏面 */      }  div:hover {  /* 鼠標經過盒子，我們的寬度變為400 */                width: 600px;              height: 300px  }    transition: all 0.6s;  /* 所有屬性都變化用all 就可以了  後面倆個屬性可以省略 */

2D變形(CSS3) transform

transform是CSS3中具有顛覆性的特徵之一，可以實現元素的位移、旋轉、傾斜、縮放，甚至支持矩陣方式，配合過渡和即將學習的動畫知識，可以取代大量之前只能靠Flash才可以實現的效果。

變形轉換 transform transform 變換 變形的意思 《 transformers 變形金剛》

移動 translate(x, y)

translate 移動平移的意思

translate(50px,50px)

使用translate方法來將文字或圖像在水平方向和垂直方向上分別垂直移動50像素。

可以改變元素的位置，x、y可為負值；

 translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）   translateX(x)僅水平方向移動（X軸移動）   translateY(Y)僅垂直方向移動（Y軸移動）
.box {    width: 499.9999px;    height: 400px;    background: pink;    position: absolute;    left:50%;    top:50%;    transform:translate(-50%,-50%);  /* 走的自己的一半 */  }

讓定位的盒子水平居中

縮放 scale(x, y)

transform:scale(0.8,1);

可以對元素進行水平和垂直方向的縮放。該語句使用scale方法使該元素在水平方向上縮小了20%，垂直方向上不縮放。

scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）  scaleX(x)元素僅水平方向縮放（X軸縮放）  scaleY(y)元素僅垂直方向縮放（Y軸縮放）

scale()的取值默認的值為1，當值設置為0.01到0.99之間的任何值，作用使一個元素縮小；而任何大於或等於1.01的值，作用是讓元素放大

旋轉 rotate(deg)

可以對元素進行旋轉，正值為順時針，負值為逆時針；

transform:rotate(45deg);

注意單位是 deg 度數

transform-origin可以調整元素轉換變形的原點

 div{transform-origin: left top;transform: rotate(45deg); }  /* 改變元素原點到左上角，然後進行順時旋轉45度 */

如果是4個角，可以用 left top這些，如果想要精確的位置， 可以用 px 像素。

 div{transform-origin: 10px 10px;transform: rotate(45deg); }  /* 改變元素原點到x 為10  y 為10，然後進行順時旋轉45度 */

案例旋轉楚喬傳

div {              width: 250px;              height: 170px;              border: 1px solid pink;              margin: 200px auto;              position: relative;            }          div img {              width: 100%;              height: 100%;              position: absolute;              top: 0;              left: 0;              transition: all 0.6s;              transform-origin: top right;            }          div:hover img:nth-child(1) {  /* 鼠標經過div  第一張圖片旋轉 */              transform: rotate(60deg);          }          div:hover img:nth-child(2) {              transform: rotate(120deg);          }          div:hover img:nth-child(3) {              transform: rotate(180deg);          }          div:hover img:nth-child(4) {              transform: rotate(240deg);          }          div:hover img:nth-child(5) {              transform: rotate(300deg);          }          div:hover img:nth-child(6) {              transform: rotate(360deg);          }

傾斜 skew(deg, deg)

transform:skew(30deg,0deg);

該實例通過skew方法把元素水平方向上傾斜30度，處置方向保持不變。

可以使元素按一定的角度進行傾斜，可為負值，第二個參數不寫默認為0。

3D變形(CSS3) transform

2d x y

3d x y z

左手坐標系

伸出左手，讓拇指和食指成「L」形，大拇指向右，食指向上，中指指向前方。這樣我們就建立了一個左手坐標系，拇指、食指和中指分別代表X、Y、Z軸的正方向。如下圖

CSS3中的3D坐標系與上述的3D坐標系是有一定區別的，相當於其繞着X軸旋轉了180度，如下圖

簡單記住他們的坐標：

x左邊是負的，右邊是正的

y 上面是負的， 下面是正的

z 裏面是負的， 外面是正的

rotateX()

就是沿着 x 立體旋轉.

img {    transition:all 0.5s ease 0s;  }  img:hove {      transform:rotateX(180deg);  }

rotateY()

沿着y軸進行旋轉

img {    transition:all 0.5s ease 0s;  }  img:hove {      transform:rotateX(180deg);  }

rotateZ()

沿着z軸進行旋轉

img {    transition:all .25s ease-in 0s;  }  img:hover {    /* transform:rotateX(180deg); */    /* transform:rotateY(180deg); */    /* transform:rotateZ(180deg); */    /* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */  }

透視(perspective)

電腦顯示屏是一個2D平面，圖像之所以具有立體感（3D效果），其實只是一種視覺呈現，通過透視可以實現此目的。

透視可以將一個2D平面，在轉換的過程當中，呈現3D效果。

  • 透視原理： 近大遠小 。
  • 瀏覽器透視：把近大遠小的所有圖像，透視在屏幕上。
  • perspective：視距，表示視點距離屏幕的長短。視點，用於模擬透視效果時人眼的位置

註：並非任何情況下需要透視效果，根據開發需要進行設置。

perspective 一般作為一個屬性，設置給父元素，作用於所有3D轉換的子元素

理解透視距離原理：

translateX(x)

僅水平方向移動**（X軸移動）

主要目的實現移動效果

translateY(y)

僅垂直方向移動（Y軸移動）

translateZ(z)

transformZ的直觀表現形式就是大小變化，實質是XY平面相對於視點的遠近變化（說遠近就一定會說到離什麼參照物遠或近，在這裡參照物就是perspective屬性）。比如設置了perspective為200px;那麼transformZ的值越接近200，就是離的越近，看上去也就越大，超過200就看不到了，因為相當於跑到後腦勺去了，我相信你正常情況下，是看不到自己的後腦勺的。

translate3d(x,y,z)

[注意]其中，x和y可以是長度值，也可以是百分比，百分比是相對於其本身元素水平方向的寬度和垂直方向的高度和；z只能設置長度值

開門案例

body {  }  .door {    width: 300px;    height: 300px;    margin: 100px auto;    border: 1px solid gray;    perspective: 1000px;    background: url('images/dog.gif') no-repeat cover;    position: relative;  }  .door > div {    box-sizing: border-box;    border: 1px solid black;  }  .left {    float: left;    width: 50%;    height: 100%;    background-color: brown;    transform-origin: left center;    transition: 1s;    position: relative;  }  .left::before {    content: '';    position: absolute;    width: 20px;    height: 20px;    border-radius: 50%;    top: 50%;    right: 0px;    transform: translateY(-10px);    border: 1px solid whitesmoke;  }  .right {    width: 50%;    height: 100%;    float: left;    background-color: brown;    transform-origin: right center;    transition: 1s;    position: relative;  }  .right::before {    content: '';    position: absolute;    width: 20px;    height: 20px;    border-radius: 50%;    top: 50%;    left: 0px;    transform: translateY(-10px);    border: 1px solid whitesmoke;  }  .door:hover .left {    transform: rotateY(-130deg);  }  .door:hover .right {    transform: rotateY(130deg);  }

backface-visibility

backface-visibility 屬性定義當元素不面向屏幕時是否可見。

翻轉盒子案例

div {              width: 224px;              height: 224px;              margin: 100px auto;              position: relative;          }          div img {              position: absolute;              top: 0;              left: 0;              transition: all 1s;          }          div img:first-child {              z-index: 1;              backface-visibility: hidden; /* 不是正面對象屏幕，就隱藏 */          }          div:hover img {              transform: rotateY(180deg);  }

動畫(CSS3) animation

動畫是CSS3中具有顛覆性的特徵之一，可通過設置多個節點來精確控制一個或一組動畫，常用來實現複雜的動畫效果。

語法格式：

animation:動畫名稱 動畫時間 運動曲線  何時開始  播放次數  是否反方向;

關於幾個值，除了名字，動畫時間，延時有嚴格順序要求其它隨意r

@keyframes 動畫名稱 {    from{ 開始位置 }  0%    to{  結束  }  100%  }
animation-iteration-count:infinite;  無限循環播放  animation-play-state:paused;   暫停動畫"

小汽車案例

body {    background: white;  }  img {    width: 200px;  }  .animation {    animation-name: goback;    animation-duration: 5s;    animation-timing-function: ease;    animation-iteration-count: infinite;  }  @keyframes goback {    0%{}    49%{      transform: translateX(1000px);    }    55%{      transform: translateX(1000px) rotateY(180deg);    }    95%{      transform: translateX(0) rotateY(180deg);    }    100%{      transform: translateX(0) rotateY(0deg);    }  }

伸縮布局(CSS3)

CSS3在布局方面做了非常大的改進，使得我們對塊級元素的布局排列變得十分靈活，適應性非常強，其強大的伸縮性，在響應式開中可以發揮極大的作用。

主軸：Flex容器的主軸主要用來配置Flex項目，默認是水平方向

側軸：與主軸垂直的軸稱作側軸，默認是垂直方向的

方向：默認主軸從左向右，側軸默認從上到下

主軸和側軸並不是固定不變的，通過flex-direction可以互換。

Flex布局的語法規範經過幾年發生了很大的變化，也給Flexbox的使用帶來一定的局限性，因為語法規範版本眾多，瀏覽器支持不一致，致使Flexbox布局使用不多

2、各屬性詳解****

1.flex子項目在主軸的縮放比例，不指定flex屬性，則不參與伸縮分配

min-width 最小值 min-width: 280px 最小寬度 不能小於 280

max-width: 1280px 最大寬度 不能大於 1280

2.flex-direction調整主軸方向（默認為水平方向）

flex-direction: column 垂直排列

flex-direction: row 水平排列

http://m.ctrip.com/html5/ 攜程網手機端地址

3、justify-content調整主軸對齊（水平對齊）

子盒子如何在父盒子裏面水平對齊

值

描述

白話文

flex-start

默認值。項目位於容器的開頭。

讓子元素從父容器的開頭開始排序但是盒子順序不變

flex-end

項目位於容器的結尾。

讓子元素從父容器的後面開始排序但是盒子順序不變

center

項目位於容器的中心。

讓子元素在父容器中間顯示

space-between

項目位於各行之間留有空白的容器內。

左右的盒子貼近父盒子，中間的平均分佈空白間距

space-around

項目位於各行之前、之間、之後都留有空白的容器內。

相當於給每個盒子添加了左右margin外邊距

4、align-items調整側軸對齊（垂直對齊）

子盒子如何在父盒子裏面垂直對齊（單行）

值

描述

白話文

stretch

默認值。項目被拉伸以適應容器。

讓子元素的高度拉伸適用父容器（子元素不給高度的前提下)

center

項目位於容器的中心。

垂直居中

flex-start

項目位於容器的開頭。

垂直對齊開始位置 上對齊

flex-end

項目位於容器的結尾。

垂直對齊結束位置 底對齊

5、flex-wrap控制是否換行

當我們子盒子內容寬度多於父盒子的時候如何處理

值

描述

nowrap

默認值。規定靈活的項目不拆行或不拆列。 不換行，則 收縮（壓縮） 顯示 強制一行內顯示

wrap

規定靈活的項目在必要的時候拆行或拆列。

wrap-reverse

規定靈活的項目在必要的時候拆行或拆列，但是以相反的順序。

6、flex-flow是flex-direction、flex-wrap的簡寫形式

flex-flow: flex-direction  flex-wrap;

白話記： flex-flow: 排列方向 換不換行;

兩個中間用空格

例如：

display: flex;  /* flex-direction: row;  flex-wrap: wrap;   這兩句話等價於下面的這句話*/  flex-flow: column wrap;  /* 兩者的綜合 */

7、align-content堆棧（由flex-wrap產生的獨立行）多行垂直對齊方式齊

align-content是針對flex容器裏面多軸(多行)的情況,align-items是針對一行的情況進行排列。

必須對父元素設置自由盒屬性display:flex;，並且設置排列方式為橫向排列flex-direction:row;並且設置換行，flex-wrap:wrap;這樣這個屬性的設置才會起作用。

值

描述

測試

stretch

默認值。項目被拉伸以適應容器。

center

項目位於容器的中心。

flex-start

項目位於容器的開頭。

flex-end

項目位於容器的結尾。

space-between

項目位於各行之間留有空白的容器內。

space-around

項目位於各行之前、之間、之後都留有空白的容器內。

8、order控制子項目的排列順序，正序方式排序，從小到大

用css 來控制盒子的前後順序。 用order 就可以

用整數值來定義排列順序，數值小的排在前面。可以為負值。 默認值是 0

order: 1;

此知識點重在理解，要明確找出主軸、側軸、方向，各屬性對應的屬性值

文字陰影(CSS3)

以後我們可以給我們的文字添加陰影效果了 Shadow 影子

text-shadow:水平位置 垂直位置 模糊距離 陰影顏色;
  1. 前兩項是必須寫的。 後兩項可以選寫。

BFC(塊級格式化上下文)

BFC(Block formatting context)

直譯為"塊級格式化上下文"。

元素的顯示模式

我們前面講過 元素的顯示模式 display。

分為 塊級元素 行內元素 行內塊元素 ，其實，它還有很多其他顯示模式。

那些元素會具有BFC的條件

不是所有的元素模式都能產生BFC，w3c 規範：

display 屬性為 block, list-item, table 的元素，會產生BFC.

大家有么有發現這個三個都是用來布局最為合理的元素，因為他們就是用來可視化布局。

注意其他的，display屬性，比如 line 等等，他們創建的是 IFC ，我們暫且不研究。

這個BFC 有着具體的布局特性：

有寬度和高度 ， 有 外邊距margin 有內邊距padding 有邊框 border。

就好比，你有了練習武術的體格了。 有潛力，有資質。

什麼情況下可以讓元素產生BFC

以上盒子具有BFC條件了，就是說有資質了，但是怎樣觸發才會產生BFC，從而創造這個封閉的環境呢？

在好比，你光有資質還不行，你需要一定額外效果才能出發的武學潛力，要麼你掉到懸崖下面，撿到了一本九陰真經，要麼你學習葵花寶典，欲練此功必先….

同樣，要給這些元素添加如下屬性就可以觸發BFC。

-float屬性不為none

-position為absolute或fixed

-display為inline-block, table-cell, table-caption, flex, inline-flex

-overflow不為visible。

BFC元素所具有的特性

BFC布局規則特性：

1.在BFC中，盒子從頂端開始垂直地一個接一個地排列.

2.盒子垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰盒子的margin會發生重疊

3.在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來說，則觸碰到右邊緣）。

  1. BFC的區域不會與浮動盒子產生交集，而是緊貼浮動邊緣。
  2. 計算BFC的高度時，自然也會檢測浮動或者定位的盒子高度。

它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，並且與這個區域外部毫不相干。

白話文： 孩子在家裡願意怎麼折騰都行，但是出了家門口，你就的乖乖的，不能影響外面的任何人。

BFC的主要用途

BFC能用來做什麼？

(1) 清除元素內部浮動

只要把父元素設為BFC就可以清理子元素的浮動了，最常見的用法就是在父元素上設置overflow: hidden樣式，對於IE6加上zoom:1就可以了。

主要用到

計算BFC的高度時，自然也會檢測浮動或者定位的盒子高度。

(2) 解決外邊距合併問題

外邊距合併的問題。

主要用到

盒子垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰盒子的margin會發生重疊

屬於同一個BFC的兩個相鄰盒子的margin會發生重疊，那麼我們創建不屬於同一個BFC，就不會發生margin重疊了。

(3) 製作右側自適應的盒子問題

主要用到

普通流體元素BFC後，為了和浮動元素不產生任何交集，順着浮動邊緣形成自己的封閉上下文

BFC 總結

BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。包括浮動，和外邊距合併等等，因此，有了這個特性，我們布局的時候就不會出現意外情況了。

優雅降級和漸進增強

什麼是漸進增強（progressive enhancement）、優雅降級（graceful degradation）呢？

漸進增強 progressive enhancement：

針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

類似 爬山，由低出往高處爬

優雅降級 graceful degradation：

一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容。

類似蹦極，由高處往低處下落

　　區別：漸進增強是向上兼容，優雅降級是向下兼容。

個人建議： 現在互聯網發展很快， 連微軟公司都拋棄了ie瀏覽器，轉而支持 edge這樣的高版本瀏覽器，我們很多情況下沒有必要再時刻想着低版本瀏覽器了，而是一開始就構建完整的效果，根據實際情況，修補低版本瀏覽器問題。

瀏覽器前綴

瀏覽器前綴

瀏覽器

-webkit-

Google Chrome, Safari, Android Browser

-moz-

Firefox

-o-

Opera

-ms-

Internet Explorer, Edge

-khtml-

Konqueror

後面我們會有 常用的解決H5和C3 的兼容解決文件， 我們這裡暫且不涉及。

背景漸變

在線性漸變過程中，顏色沿着一條直線過渡：從左側到右側、從右側到左側、從頂部到底部、從底部到頂部或着沿任何任意軸。如果你曾使用過製作圖件，比如說Photoshop，你對線性漸變並不會陌生。

兼容性問題很嚴重，我們這裡之講解線性漸變

語法格式：

background:-webkit-linear-gradient(漸變的起始位置， 起始顏色， 結束顏色)；
background:-webkit-linear-gradient(漸變的起始位置， 顏色 位置， 顏色位置....)；

背景縮放(CSS3)

通過background-size設置背景圖片的尺寸，就像我們設置img的尺寸一樣，在移動Web開發中做屏幕適配應用非常廣泛。

其參數設置如下：

a) 可以設置長度單位(px)或百分比（設置百分比時，參照盒子的寬高）

b) 設置為cover時，會自動調整縮放比例，保證圖片始終填充滿背景區域，如有溢出部分則會被隱藏。我們平時用的cover 最多

c) 設置為contain會自動調整縮放比例，保證圖片始終完整顯示在背景區域。

background-image: url('images/gyt.jpg');              background-size: 300px 100px;              /* background-size: contain; */              /* background-size: cover; */

多背景(CSS3)

以逗號分隔可以設置多背景，可用於自適應布局 做法就是 用逗號隔開就好了。

  • 一個元素可以設置多重背景圖像。
  • 每組屬性間使用逗號分隔。
  • 如果設置的多重背景圖之間存在着交集（即存在着重疊關係），前面的背景圖會覆蓋在後面的背景圖之上。
  • 為了避免背景色將圖像蓋住，背景色通常都定義在最後一組上，
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,         url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,         url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

VirMach 便宜 VPS

QNews

QNews