css筆記

時間  2019-11-08
標籤 css 筆記 欄目 CSS 简体版
原文   原文鏈接

CSS的發展歷程

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

CSS 網頁的美容師

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

CSS的最大貢獻就是： 讓 HTML 從樣式中解脫苦海， 實現了 HTML 專一去作 結構呈現。 而樣式交給 CSS 後，你徹底能夠放心的早點洗洗睡了！css

並且。。。。。 CSS 作的很出色，若是JavaScript是網頁的魔法師，那麼CSS它是咱們網頁的美容師，不信，你看:html

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

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

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

CSS初識

CSS(Cascading Style Sheets) 美化樣式ios

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

CSS以HTML爲基礎，提供了豐富的功能，如字體、顏色、背景的控制及總體排版等，並且還能夠針對不一樣的瀏覽器設置不一樣的樣式。c++

引入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 中設置字體名稱，直接寫中文是能夠的。可是在文件編碼（GB23十二、UTF-8 等）不匹配時會產生亂碼的錯誤。xp 系統不支持 相似微軟雅黑的中文。

方案一： 你能夠使用英文來替代。 好比 font-family:"Microsoft Yahei"。

方案二： 在 CSS 直接使用 Unicode 編碼來寫字體名稱能夠避免這些錯誤。使用 Unicode 寫中文字體名稱，瀏覽器是能夠正確的解析的。
font-family: "\5FAE\8F6F\96C5\9ED1"，表示設置字體爲「微軟雅黑」。

能夠經過escape() 來測試屬於什麼字體。

字體名稱 英文名稱 Unicode 編碼
宋體 SimSun \5B8B\4F53
新宋體 NSimSun \65B0\5B8B\4F53
黑體 SimHei \9ED1\4F53
微軟雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
楷體_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
隸書 LiSu \96B6\4E66
幼園 YouYuan \5E7C\5706
華文細黑 STXihei \534E\6587\7EC6\9ED1
細明體 MingLiU \7EC6\660E\4F53
新細明體 PMingLiU \65B0\7EC6\660E\4F53

爲了照顧不一樣電腦的字體安裝問題，咱們儘可能只使用宋體和微軟雅黑中文字體

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爲內容寬度）

注意：

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

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

三、若是一個盒子則會和父親同樣寬 佔滿父親的寬度， 若是此盒子沒有給定寬度 則padding 不會影響本盒子大小。

盒子模型佈局穩定性

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

答案是： 其實他們大部分狀況下是能夠混用的。 就是說，你用內邊距也能夠，用外邊距也能夠。 你以爲哪一個方便，就用哪一個。

可是，總有一個最好用的吧，咱們根據穩定性來分，建議以下：

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

width >  padding  >   margin

緣由：

  1. margin 會有外邊距合併 還有 ie6下面margin 加倍的bug（討厭）因此最後使用。

  2. padding 會影響盒子大小， 須要進行加減計算（麻煩） 其次使用。

  3. width 沒有問題（嗨皮）咱們常用寬度剩餘法 高度剩餘法來作。

    ​

圓角邊框(CSS3)

今後之後，咱們的世界不僅有矩形。radius 半徑（距離）

語法格式：

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

盒子陰影(CSS3)

語法格式：

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

1498467567011

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

佈局流程

爲了提升網頁製做的效率，佈局時一般須要遵照必定的佈局流程，具體以下：

一、肯定頁面的版心（可視區）。

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

三、製做HTML結構 。

四、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;}   /* IE六、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

一、圖層縮覽圖判斷

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

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

圖層面板中加選圖層：

一、按SHIFT，單擊另外一目標圖層 中間全部圖層被選中

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

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

一、按ALT拖拽圖像

二、CTRL+J （重合）

案例： 擺放一個自行車

圖層編組

選中目標圖層，CTRL+G

取消編組：CTRL+SHIFT+G

雙擊圖層名稱可從新命名

雙擊組名稱，可命名組

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

1498465862231

圖層上下位置移動

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

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

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

移動選區或圖像時：

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

ps中的撤銷操做是：

ctrl+z 撤銷一步

ctrl+alt+z 撤銷多步

Photoshop 切圖

PS切圖 能夠 分爲 手動 利用切片切圖 以及 利用PS的插件快速切圖

切片工具

1498466173246

  1. 利用切片工具手動劃出

  2. 圖層菜單---新建基於圖層的切片

  3. 利用標尺 基於參考線的切片 （選擇切片工具）

    ​

    1498466734205

  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！

元素的定位屬性

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

一、邊偏移

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

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

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

在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 不影響塊級元素中的內容對齊，它只針對於 行內元素或者行內塊元素，特別是行內塊元素， 一般用來控制圖片/表單與文字的對齊。

1498467742995

圖片、表單和文字對齊

因此咱們知道，咱們能夠經過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字體

字體格式

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

一、TureType(.ttf)格式

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

二、OpenType(.otf)格式

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

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

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

四、Embedded Open Type(.eot)格式

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

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

1513132290173

下載兼容字體包

剛纔上傳完畢， 網站會給咱們把UI作的svg圖片轉換爲咱們的字體格式， 而後下載下來就行了

固然，咱們不須要本身專門的圖標，是想網上找幾個圖標使用，以上2步能夠直接省略了， 直接到剛纔的網站上找喜歡的下載使用吧。

字體引入到HTML

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

  1. 首先把 如下4個文件放入到 fonts文件夾裏面。 通俗的作法

    1498032122244

    第一步：在樣式裏面聲明字體： 告訴別人咱們本身定義的字體
    @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 四、小米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，智能硬件，配件及小米生活周邊，同時提供小米客戶服務及售後支持。" />

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;
名稱 說明
邊框底側 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

京東項目(二)

名稱 說明
邊框底側 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="^1\d{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經過

使用至關簡單，以下圖所示

1498468026526

而且能夠經過附加屬性能夠更友好控制音頻的播放，如：

autoplay 自動播放

controls 是否顯不默認播放控件

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

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

1498468041058

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

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

1498468052965

多媒體 video

HTML5經過

同音頻播放同樣，

1498468072194

一樣，經過附加屬性能夠更友好的控制視頻的播放

autoplay 自動播放

controls 是否顯示默認播放控件

loop 循環播放

width 設置播放窗口寬度

height 設置播放窗口的高度

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

1498468086199

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

1498468097509

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

四、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，這樣咱們計算盒子大小的方式就發生了改變。

能夠分紅兩種狀況：

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

二、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 的狀況下，當元素從一種樣式變換爲另外一種樣式時爲元素添加效果。

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

1498445034712

在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 立馬開始

運動曲線示意圖：

1498445454760

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 移動平移的意思

1498443715586

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)

1498444645795

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)

能夠對元素進行旋轉，正值爲順時針，負值爲逆時針；

1498443651293

transform:rotate(45deg);

注意單位是 deg 度數

transform-origin能夠調整元素轉換變形的原點

1498443912530

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)

1498443827389

transform:skew(30deg,0deg);

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

能夠使元素按必定的角度進行傾斜，可爲負值，第二個參數不寫默認爲0。

3D變形(CSS3) transform

2d x y

3d x y z

左手座標系

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

1498445587576

CSS3中的3D座標系與上述的3D座標系是有必定區別的，至關於其繞着X軸旋轉了180度，以下圖

1498459001951

簡單記住他們的座標：

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

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

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

rotateX()

就是沿着 x 立體旋轉.

1498445756802

img {
  transition:all 0.5s ease 0s;
}
img:hove {

  transform:rotateX(180deg);
}

rotateY()

沿着y軸進行旋轉

1498446043198

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轉換的子元素

理解透視距離原理：

1498446715314

translateX(x)

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

1498459697576

主要目的實現移動效果

translateY(y)

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

1498459770252

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:動畫名稱 動畫時間 運動曲線  什麼時候開始  播放次數  是否反方向;

1498461096243

關於幾個值，除了名字，動畫時間，延時有嚴格順序要求其它隨意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能夠互換。

1498441839910

Flex佈局的語法規範通過幾年發生了很大的變化，也給Flexbox的使用帶來必定的侷限性，由於語法規範版本衆多，瀏覽器支持不一致，導致Flexbox佈局使用很少

二、各屬性詳解****

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/ 攜程網手機端地址

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

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

值 描述 白話文
flex-start 默認值。項目位於容器的開頭。 讓子元素從父容器的開頭開始排序可是盒子順序不變
flex-end 項目位於容器的結尾。 讓子元素從父容器的後面開始排序可是盒子順序不變
center 項目位於容器的中心。 讓子元素在父容器中間顯示
space-between 項目位於各行之間留有空白的容器內。 左右的盒子貼近父盒子，中間的平均分佈空白間距
space-around 項目位於各行以前、之間、以後都留有空白的容器內。 至關於給每一個盒子添加了左右margin外邊距

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

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

值 描述 白話文
stretch 默認值。項目被拉伸以適應容器。 讓子元素的高度拉伸適用父容器（子元素不給高度的前提下)
center 項目位於容器的中心。 垂直居中
flex-start 項目位於容器的開頭。 垂直對齊開始位置 上對齊
flex-end 項目位於容器的結尾。 垂直對齊結束位置 底對齊

五、flex-wrap控制是否換行

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

值 描述
nowrap 默認值。規定靈活的項目不拆行或不拆列。 不換行，則 收縮（壓縮） 顯示 強制一行內顯示
wrap 規定靈活的項目在必要的時候拆行或拆列。
wrap-reverse 規定靈活的項目在必要的時候拆行或拆列，可是以相反的順序。

六、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;  /* 二者的綜合 */

七、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 項目位於各行以前、之間、以後都留有空白的容器內。

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

用css 來控制盒子的先後順序。 用order 就能夠

用整數值來定義排列順序，數值小的排在前面。能夠爲負值。 默認值是 0

order: 1;

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

文字陰影(CSS3)

之後咱們能夠給咱們的文字添加陰影效果了 Shadow 影子

text-shadow:水平位置 垂直位置 模糊距離 陰影顏色;

1498467502625

  1. 前兩項是必須寫的。 後兩項能夠選寫。

1498467519665

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;
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程