02-CSS

時間 2019-11-18

標籤 css 欄目 CSS 简体版

原文原文鏈接

課程目標:

學會使用CSS選擇器

熟記CSS樣式和外觀屬性

熟練掌握CSS各類選擇器

熟練掌握CSS各類選擇器

熟練掌握CSS三種顯示模式

熟練掌握CSS背景屬性

熟練掌握CSS三大特性

熟練掌握CSS盒子模型

熟練掌握CSS浮動
10.熟練掌握CSS定位
11.熟練掌握CSS高級技巧強化CSS
typora-copy-images-to:

CSS的發展歷程

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

CSS 網頁的美容師

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

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

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

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

來個更直觀的認識吧：css3

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

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

網頁添加 CSS和不添加CSS 的對比：web

帶有CSS的頁面算法

沒有CSS的頁面

CSS初識

CSS(Cascading Style Sheets)

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

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

CSS樣式規則

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

在上面的樣式規則中:

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

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屬性將不起做用。

開發者工具（chrome）

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

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

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

小技巧：

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

選擇器（重點）

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

如上圖因此，要把裏面的小黃人分爲2組，最快的方法怎辦？

不少，好比一隻眼睛的一組，剩下的一組

這就用到基礎選擇器組：

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

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

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

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

課堂案例：

傳智簡介

類選擇器

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

.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

``>小技巧：

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>

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;                   /* 定義內邊距*/
}

注意：

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

僞類選擇器

僞類選擇器用於向某些選擇器添加特殊的效果。好比給連接添加特殊效果，好比能夠選擇第1個，第n個元素。

爲了和咱們剛纔學的類選擇器相區別，  類選擇器是一個點 好比 .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; /*  鼠標通過的時候，由原來的 灰色 變成了紅色 */
}

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

:first-child :選取屬於其父元素的首個子元素的指定選擇器
:last-child :選取屬於其父元素的最後一個子元素的指定選擇器
:nth-child(n) ：匹配屬於其父元素的第 N 個子元素，不論元素的類型，N從1開始
:nth-last-child(n) ：選擇器匹配屬於其元素的第 N 個子元素的每一個元素，不論元素的類型，從最後一個子元素開始計數。
n 能夠是數字（一、二、3...）、關鍵詞（even、odd）或公式（3n）

li:first-child { /*  選擇第一個孩子 */
                color: pink; 
            }
li:last-child {   /* 最後一個孩子 */
                color: purple;
            }
li:nth-child(4) {   /* 選擇第4個孩子  n  表明 第幾個的意思 */ 
                color: skyblue;
            }
li:nth-child(3n) {   /* n從0開始，選擇第3*n個孩子 即0、三、六、9... */ 
                color: red;
            }

目標僞類選擇器(CSS3)

:target目標僞類選擇器 :選擇器可用於選取當前活動的目標元素

:target {
        color: red;
        font-size: 30px;
}

CSS註釋

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

例如：

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

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 就是一個漢字的寬度

letter-spacing:字間距

letter-spacing屬性用於定義字間距，所謂字間距就是字符與字符之間的空白。其屬性值可爲不一樣單位的數值，容許使用負值，默認爲normal。

word-spacing:單詞間距

word-spacing屬性用於定義英文單詞之間的間距，對中文字符無效。和letter-spacing同樣，其屬性值可爲不一樣單位的數值，容許使用負值，默認爲normal。

word-spacing和letter-spacing都可對英文進行設置。不一樣的是letter-spacing定義的爲字母之間的間距，而word-spacing定義的爲英文單詞之間的間距。

顏色半透明(css3)

文字顏色到了CSS3咱們能夠採起半透明的格式了語法格式以下：

color: rgba(r,g,b,a)  a 是alpha  透明的意思  取值範圍 0~1之間    color: rgba(0,0,0,0.3)

文字陰影(CSS3)

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

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

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

sublime快捷方式

sublime能夠快速提升咱們代碼的書寫方式

生成標籤直接輸入標籤名按tab鍵便可好比 div 而後tab 鍵，就能夠生成
若是想要生成多個相同標籤加上 * 就能夠了好比 div*3 就能夠快速生成3個div
若是有父子級關係的標籤，能夠用 > 好比 ul > li就能夠了
若是有兄弟關係的標籤，用 + 就能夠了好比 div+p
若是生成帶有類名或者id名字的，直接寫 .demo 或者 #two tab 鍵就能夠了

引入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文件的路徑" type="text/CSS" rel="stylesheet" />
</head>

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

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

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

三種樣式表總結

樣式表	優勢	缺點	使用狀況	控制範圍
行內樣式表	書寫方便，權重高	沒有實現樣式和結構相分離	較少	控制一個標籤（少）
內部樣式表	部分結構和樣式相分離	沒有完全分離	較多	控制一個頁面（中）
外部樣式表	徹底實現結構和樣式相分離	須要引入	最多，強烈推薦	控制整個站點（多）

標籤顯示模式（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特殊）

注意：

只有文字才能組成段落所以 p 裏面不能放塊級元素，同理還有這些標籤h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標籤，裏面不能放其餘塊級元素。
連接裏面不能再放連接。

塊級元素和行內元素區別

塊級元素的特色：
（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;

此階段，咱們只需關心這三個，其餘的是咱們後面的工做。

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>

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

連接登陸的顏色爲紅色,同時主導航欄裏面的全部的連接改成藍色 (簡單)
主導航欄和側導航欄裏面文字都是14像素而且是微軟雅黑。（中等)
主導航欄裏面的一級菜單連接文字顏色爲綠色。（難)

屬性選擇器

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

/* 獲取到 擁有 該屬性的元素 */
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)

E::first-letter文本的第一個單詞或字（如中文、日文、韓文等）
E::first-line 文本第一行；
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，這樣作的目的是用來作兼容處理。

E:after、E:before後面的練習中會反覆用到，目前只須要有個大體瞭解

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

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
}

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

參數：

說明：

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

注意：

position 後面是x座標和y座標。能夠使用方位名詞或者精確單位。
若是和精確單位和方位名字混合使用，則必須是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之間

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

一樣能夠給文字和邊框透明，都是rgba的格式來寫

背景縮放(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;

凹凸文字

<head>
        <meta charset="utf-8">
        <style>
        body {
            background-color: #ccc;
        }
        div {
            color: #ccc;
            font: 700 80px "微軟雅黑";
        }
        div:first-child {
            /* text-shadow: 水平位置  垂直位置  模糊距離 陰影顏色; */
            text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
        }
        div:last-child {
            /* text-shadow: 水平位置  垂直位置  模糊距離 陰影顏色; */
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }

        </style>
    </head>
    <body>
    <div>我是凸起的文字</div>
    <div>我是凹下的文字</div>
    </body>

導航欄案例

文本的裝飾

text-decoration 一般咱們用於給連接修改裝飾效果

值	描述
none	默認。定義標準的文本。
underline	定義文本下的一條線。下劃線也是咱們連接自帶的
overline	定義文本上的一條線。
line-through	定義穿過文本下的一條線。

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

<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 必須掌握的三個特性。

CSS層疊性

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

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

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

通常狀況下，若是出現樣式衝突，則會按照CSS書寫的順序，以最後的樣式爲準。

樣式衝突，遵循的原則是就近原則。那個樣式離着結構近，就執行那個樣式。
樣式不衝突，不會層疊

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 { color:orange!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能遇上一個類選擇器的狀況。

繼承的權重是 0

總結優先級：

使用了 !important聲明的規則。
內嵌在 HTML 元素的 style屬性裏面的聲明。
使用了 ID 選擇器的規則。
使用了類選擇器、屬性選擇器、僞元素和僞類選擇器的規則。
使用了元素選擇器的規則。
只包含一個通用選擇器的規則。
同一類選擇器則遵循就近原則。

總結：權重是優先級的算法，層疊是優先級的表現

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

表格的細線邊框

之前學過的html表格邊框很粗，這裏只須要CSS一句話就能夠美觀起來。讓咱們真的相信，CSS就是咱們的白馬王子（白雪公主）。

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

border-collapse:collapse; 表示邊框合併在一塊兒。

圓角邊框(CSS3)

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

語法格式：

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

課堂案例:

<style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        div:first-child {  /* 結構僞類選擇器 選親兄弟 */
            border-radius: 10px;  /*  一個數值表示4個角都是相同的 10px 的弧度 */ 
        }

        div:nth-child(2) {
            /*border-radius: 100px;    取寬度和高度 一半  則會變成一個圓形 */
            border-radius: 50%;   /*  100px   50% 取寬度和高度 一半  則會變成一個圓形 */
        }

        div:nth-child(3) {
            border-radius: 10px 40px;  /* 左上角  和 右下角  是 10px  右上角 左下角 40px 對角線 */
        }
        
        div:nth-child(4) {
            border-radius: 10px 40px  80px;   /* 左上角 10    右上角  左下角 40   右下角80 */
        }
        div:nth-child(5) {
            border-radius: 10px 40px  80px  100px;   /* 左上角 10    右上角 40  右下角 80   左下角   右下角100 */
        }
        div:nth-child(6) {
            border-radius: 100px;  
            height: 100px; 
        }
        div:nth-child(7) {
            border-radius: 100px 0;  
        }   
</style>

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

課堂案例：新浪導航

外邊距（margin）

margin屬性用於設置外邊距。設置外邊距會在元素之間建立「空白」，這段空白一般不能放置其餘內容。

margin-top:上外邊距

margin-right:右外邊距

margin-bottom:下外邊距

margin-left:上外邊距

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

取值順序跟內邊距相同。

外邊距實現盒子居中

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

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

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

實際工做中經常使用這種方式進行網頁佈局，示例代碼以下：

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

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

文字水平居中是 text-align: center
盒子水平居中左右margin 改成 auto

text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改成 auto 就闊以了 */

插入圖片咱們用的最多好比產品展現類
背景圖片咱們通常用於小圖標背景或者超大背景圖片

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像素的上邊框或上內邊距。
能夠爲父元素添加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

緣由：

margin 會有外邊距合併還有 ie6下面margin 加倍的bug（討厭）因此最後使用。
padding 會影響盒子大小，須要進行加減計算（麻煩）其次使用。
width 沒有問題（嗨皮）咱們常用寬度剩餘法高度剩餘法來作。

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裏面的 */
}

盒子陰影

語法格式：

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

前兩個屬性是必須寫的。其他的能夠省略。
外陰影 (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	元素不浮動（默認值）

浮動詳細內幕特性

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

浮動首先建立包含塊的概念（包裹）。就是說， 浮動的元素老是找理它最近的父級元素對齊。可是不會超出內邊距的範圍。

浮動的元素排列位置，跟上一個元素（塊級）有關係。若是上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；若是上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊。

由2能夠推斷出，一個父盒子裏面的子盒子，若是其中一個子級有浮動的，則其餘子級都須要浮動。這樣才能一行對齊顯示。

元素添加浮動後，元素會具備行內塊元素的特性。元素的大小徹底取決於定義的大小或者默認的內容多少浮動根據元素書寫的位置來顯示相應的浮動。

總結：浮動 --->

浮動的目的就是爲了讓多個塊級元素同一行上顯示。

float 浮漏特

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

版心和佈局流程

閱讀報紙時容易發現，雖然報紙中的內容不少，可是通過合理地排版，版面依然清晰、易讀。一樣，在製做網頁時，要想使頁面結構清晰、有條理，也須要對網頁進行「排版」。

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

佈局流程

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

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

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

三、製做HTML結構。

四、CSS初始化，而後開始運用盒子模型的原理，經過DIV+CSS佈局來控制網頁的各個模塊。

一列固定寬度且居中

最普通的，最爲經常使用的結構

兩列左窄右寬型

好比小米小米官網

通欄平均分佈型

好比錘子錘子官網

清除浮動

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

途經國貿，羨慕繁華；

途經天安門，幻想權力；

途經金融街，夢想發財；

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

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

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

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

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

爲何要清除浮動

咱們前面說過，浮動本質是用來作一些文字混排效果的，可是被咱們拿來作佈局用，則會有不少的問題出現，可是，你不能說浮動很差
。

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

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

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

清除浮動本質

清除浮動主要爲了解決父級元素由於子級浮動引發內部高度爲0 的問題。

清除浮動的方法

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

在CSS中，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:"." 裏面儘可能跟一個小點，或者其餘，儘可能不要爲空，不然再firefox 7.0前的版本會有生成空格。

*使用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 工具是咱們使用頻率比較高的軟件之一，咱們學習PS目的不是爲了設計海報作電商和UI的，而是要求：

會簡單的摳圖
會簡單的修改PSD效果圖
熟練的切圖
能和網站美工美眉有共同話題。。。。。

Photoshop基本使用

PS界面組成：

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

工做區：（新建）

調整浮動面板

基本操做

文件下拉菜單：
一、新建新建文檔 CTRL+N

單位：像素釐米毫米

屏幕顯示：單位像素 72像素/英寸 RGB顏色模式

二、關閉文檔 CTRL+W

三、存儲 CTRL+S （替存）

四、存儲爲 CTRL+SHIFT+S 另存一份文件

五、格式：
.psd PS源文件格式圖層、文字、樣式等，可再次編輯
（給本身）
.jpg 有損壓縮格式（給客戶）品質最高12

六、文件打開：
1）文件下拉菜單-打開（CTRL+O歐）

2）雙擊軟件空白處也能打開

移動工具 V

一、不一樣文件之間拖拽圖像。

自由變形

ctrl + T 能夠改變圖像的大小

按下enter 回車確認操做。

圖層操做(重點)

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

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

一、圖層縮覽圖判斷

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

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

圖層面板中加選圖層：

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

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

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

一、按ALT拖拽圖像

二、CTRL+J （重合）

案例：擺放一個自行車

圖層編組

選中目標圖層，CTRL+G

取消編組：CTRL+SHIFT+G

雙擊圖層名稱可從新命名

雙擊組名稱，可命名組

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

圖層上下位置移動

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

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

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

移動選區或圖像時：

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

ps中的撤銷操做是：

ctrl+z 撤銷一步

ctrl+alt+z 撤銷多步

圖層合併

ctrl+e 能夠合併圖層

圖層透明度

不透明度：設置圖層的不透明程度 0%徹底透明，不可見

100%徹底不透明，真實可見

填充：與不透明度效果相似

鍵盤數字鍵，可快速設置透明度數值

矩形選區工具 M

用來選擇某部分區域咱們成爲選區工具

取消選區： ctrl+d

顏色填充

套索工具 L

一、套索工具 L 在屏幕上拖拽鼠標左鍵，釋放後生成選區

二、多邊形套索 L 連續單擊繪製多邊形選區

閉合方法：一、單擊起始點二、雙擊任意位置

DELETE刪除當前點

磁性套索 L

L 在顏色交界的位置單擊後拖動。單擊起始點後，生成選區。

魔棒工具 W

以單擊位置爲選擇色，選擇類似顏色生成選區。

容差：選擇顏色的範圍容差小，顏色選擇精確。 0-255

連續：勾選連續時，相連顏色生成選區。

不勾選，畫面中全部類似顏色被選中生成選區。

按SHIFT在未生成選區位置單擊，可選區相加。

選區反選：CTRL+SHIFT+I

選區布爾運算

選區面積大小的變化。

新選區：保持選中狀態

添加到選區：相加運算（按住SHIFT再繪製選區）

從選區減去：相減（按住ALT再繪製選區）

與選區交叉：重合部分保留。（按住ALT+SHIFT再繪製選區）

夢幻星球

鋼筆工具： P

做用：繪製路徑，生成選區，摳圖。

組成;路徑線和錨點

繪製路徑後，CTRL+回車，生成選區。

路徑類型：

直線型路徑：連續單擊

曲線型路徑：第一點單擊，第二點拖動鼠標。

文字工具

T 能夠直接輸入文字

Photoshop 切圖

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

切片工具

利用切片工具手動劃出
圖層菜單---新建基於圖層的切片
利用標尺基於參考線的切片（選擇切片工具）
先選個一個整個的切片，切片選擇工具-- 屬性面板中有「劃分」 --能夠等分數平分切圖

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

輔助線和切片使用及清除

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

切圖插件

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

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

注意： cutterman插件要求你的ps 必須是完整版，不能是綠色版，因此你們須要重新安裝完整版本。

項目案例：學成網

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

還有ps的使用。

製做步驟：

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

定位(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：靜態定位其實沒啥可說的。

相對定位relative(自戀型)

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

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

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

注意：

相對定位最重要的一點是，它能夠經過邊偏移移動位置，可是原來的所佔的位置，繼續佔有。
其次，每次移動的位置，是以本身的左上角爲基點移動（相對於本身來移動位置）

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

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

絕對定位absolute (拼爹型)

小笑話：

吃早飯時，老婆往兒子碗裏放了兩個煎蛋，兒子全給了我，還一本正經地說：「爸爸，多吃點，男人養家不容易。」 <br/>

我一陣感動，剛想誇他兩句。 

兒子接着說：「之後全靠你讓我拼爹了！」

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

當position屬性的取值爲absolute時，能夠將元素的定位模式設置爲絕對定位。

注意：絕對定位最重要的一點是，它能夠經過邊偏移移動位置，可是它徹底脫標，徹底不佔位置。

父級沒有定位

若全部父元素都沒有定位，以瀏覽器爲準對齊(document文檔)。

父級有定位

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

子絕父相

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

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

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

就是說，子級是絕對定位，父親只要是定位便可（無論父親是絕對定位仍是相對定位，甚至是固定定位均可以），就是說，子絕父絕，子絕父相都是正確的。

可是，在咱們網頁佈局的時候，最常說的子絕父相是怎麼來的呢？請看以下圖：

因此，咱們能夠得出以下結論：

由於子級是絕對定位，不會佔有位置，能夠放到父盒子裏面的任何一個地方。

父盒子佈局時，須要佔有位置，所以父親只能是相對定位.

這就是子絕父相的由來。

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

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

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

首先left 50% 父盒子的一半大小
而後走本身外邊距負的一半值就能夠了 margin-left。

固定定位fixed(認死理型)

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

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

固定定位有兩點：

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

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

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

疊放次序（z-index）

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

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

好比： z-index: 2;

注意：

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

四種定位總結

定位模式	是否脫標占有位置	是否能夠使用邊偏移	移動位置基準
靜態static	不脫標，正常模式	不能夠	正常模式
相對定位relative	不脫標，佔有位置	能夠	相對自身位置移動（自戀型）
絕對定位absolute	徹底脫標，不佔有位置	能夠	相對於定位父級移動位置（拼爹型）
固定定位fixed	徹底脫標，不佔有位置	能夠	相對於瀏覽器移動位置（認死理型）

定位模式轉換

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

** 所以好比行內元素若是添加了絕對定位或者固定定位後浮動後，能夠不用轉換模式，直接給高度和寬度就能夠了。**

元素的顯示與隱藏

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

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

display 顯示

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

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

特色：隱藏以後，再也不保留位置。

visibility 可見性

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

visible : 　對象可視

hidden : 　對象隱藏

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

overflow 溢出

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

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

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

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

scroll : 　無論超出內容否，老是顯示滾動條

CSS高級技巧

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 控制圖片和文字的垂直關係了。默認的圖片會和文字基線對齊。

去除圖片底側空白縫隙

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

解決的方法就是：

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

溢出的文字隱藏

word-break:自動換行

normal 使用瀏覽器默認的換行規則。

break-all 容許在單詞內換行。

keep-all 只能在半角空格或連字符處換行。

主要處理英文單詞

white-space

white-space設置或檢索對象內文本顯示方式。一般咱們使用於強制一行顯示內容

normal : 　默認處理方式
nowrap : 　強制在同一行內顯示全部文本，直到文本結束或者遭遇br標籤對象才換行。

能夠處理中文

text-overflow 文字溢出

text-overflow : clip | ellipsis

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

clip : 　不顯示省略標記（...），而是簡單的裁切

ellipsis : 　當對象內文本溢出時顯示省略標記（...）

注意：必定要首先強制一行內顯示，再次和overflow屬性搭配使用

white-space: nowrap; /* 強制一行內顯示 */
text-overflow: ellipsis | clip;

CSS精靈技術（sprite）小妖精雪碧

精靈技術產生的背景

圖所示爲網頁的請求原理圖，當用戶訪問一個網站時，須要向服務器發送請求，網頁上的每張圖像都要通過一次請求才能展示給用戶。

然而，一個網頁中每每會應用不少小的背景圖像做爲修飾，當網頁中的圖像過多時，服務器就會頻繁地接受和發送請求，這將大大下降頁面的加載速度。爲了有效地減小服務器接受和發送請求的次數，提升頁面的加載速度，出現了CSS精靈技術（也稱CSS Sprites、CSS雪碧）。

精靈技術本質

簡單地說，CSS精靈是一種處理網頁背景圖像的方式。它將一個頁面涉及到的全部零星背景圖像都集中到一張大圖中去，而後將大圖應用於網頁，這樣，當用戶訪問該頁面時，只需向服務發送一次請求，網頁中的背景圖像便可所有展現出來。一般狀況下，這個由不少小的背景圖像合成的大圖被稱爲精靈圖（雪碧圖），以下圖所示爲京東網站中的一個精靈圖。

精靈技術的使用

CSS 精靈實際上是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），然而，各個網頁元素一般只須要精靈圖中不一樣位置的某個小圖，要想精肯定位到精靈圖中的某個小圖，就須要使用CSS的background-image、background-repeat和background-position屬性進行背景定位，其中最關鍵的是使用background-position屬性精確地定位。

製做精靈圖

CSS 精靈實際上是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），那咱們要作的，就是把小圖拼合成一張大圖。

大部分狀況下，精靈圖都是網頁美工作。

咱們精靈圖上放的都是小的裝飾性質的背景圖片。 插入圖片不能往上放。
咱們精靈圖的寬度取決於最寬的那個背景。 
咱們能夠橫向擺放也能夠縱向擺放，可是每一個圖片之間，間隔至少隔開偶數像素合適。
在咱們精靈圖的最低端，留一片空隙，方便咱們之後添加其餘精靈圖。

結束語：小公司，背景圖片不多的狀況，沒有必要使用精靈技術，維護成本過高。若是是背景圖片比較多，能夠建議使用精靈技術。

字體圖標

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

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

首先把如下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 重新上傳，而後，選中本身想要新的圖標，重新下載壓縮包，替換原來文件便可。

滑動門

先來體會下現實中的滑動門,或者你能夠叫作推拉門：

滑動門出現的背景

製做網頁時，爲了美觀，經常須要爲網頁元素設置特殊形狀的背景，好比微信導航欄，有凸起和凹下去的感受，最大的問題是裏面的字數不同多，咋辦？

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

核心技術

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

通常的經典佈局都是這樣的：

<li>
  <a href="#">
    <span>導航欄內容</span>
  </a>
</li>

總結：

a 設置背景左側，padding撐開合適寬度。
span 設置背景右側， padding撐開合適寬度剩下由文字繼續撐開寬度。
之因此a包含span就是由於整個導航都是能夠點擊的。

before和after僞元素(詳解)

之因此被稱爲僞元素，是由於他們不是真正的頁面元素，html沒有對應的元素，可是其全部用法和表現行爲與真正的頁面元素同樣，能夠對其使用諸如頁面元素同樣的css樣式，表面上看上去貌似是頁面的某些元素來展示，其實是css樣式展示的行爲，所以被稱爲僞元素。是僞元素在html代碼機構中的展示，能夠看出沒法僞元素的結構沒法審查

注意

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

過渡(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 屬性定義當元素不面向屏幕時是否可見。

backface-visibility: hidden | visible;

翻轉盒子案例

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佈局使用很少

各屬性詳解

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

min-width/min-height 設置最小寬/高

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

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;

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

相關標籤/搜索

02css

CSS

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。