文章目錄

• CSS的發(fā)展歷程
• CSS 網(wǎng)頁的美容師
• CSS初識
• CSS樣式規(guī)則
• CSS字體樣式屬性
• • font-size:字號大小
  • font-family:字體
  • font-weight:字體粗細(xì)
  • font-style:字體風(fēng)格
  • font:綜合設(shè)置字體樣式 (重點)
• 選擇器
• • 標(biāo)簽選擇器（元素選擇器）
  • 類選擇器
  • 多類名選擇器
  • id選擇器
  • id選擇器和類選擇器區(qū)別
  • 通配符選擇器
  • 偽類選擇器
  • • 鏈接偽類選擇器
    • 結(jié)構(gòu)(位置)偽類選擇器（CSS3)
    • 目標(biāo)偽類選擇器(CSS3)
• CSS注釋
• CSS外觀屬性
• • color:文本顏色
  • line-height:行間距
  • text-align:水平對齊方式
  • text-indent:首行縮進(jìn)
  • letter-spacing:字間距
  • word-spacing:單詞間距
  • 顏色半透明(css3)
  • 文字陰影(CSS3)
• 引入CSS樣式表（書寫位置）
• • 行內(nèi)式（內(nèi)聯(lián)樣式）
  • 內(nèi)部樣式表（內(nèi)嵌式）
  • 外部樣式表（外鏈?zhǔn)?#xff09;
  • 三種樣式表總結(jié)
• 標(biāo)簽顯示模式（display）
• • 塊級元素(block-level)
  • 行內(nèi)元素(inline-level)
  • 塊級元素和行內(nèi)元素區(qū)別
  • 行內(nèi)塊元素（inline-block）
• CSS復(fù)合選擇器
• • 交集選擇器
  • 并集選擇器
  • 后代選擇器
  • 子元素選擇器
  • 屬性選擇器
  • • 偽元素選擇器（CSS3)
• CSS 背景(background)
• • 背景圖片(image)
  • 背景平鋪（repeat）
  • 背景位置(position)
  • 背景附著
  • 背景簡寫
  • 背景透明(CSS3)
  • 背景縮放(CSS3)
  • 多背景(CSS3)
• CSS 三大特性
• • CSS層疊性
  • CSS優(yōu)先級
  • CSS特殊性（Specificity）
• 盒子模型（CSS重點）
• • 看透網(wǎng)頁布局的本質(zhì)
  • 盒子模型（Box Model）
  • 盒子邊框（border）
  • • 表格的細(xì)線邊框
    • 盒子邊框總結(jié)表
    • 圓角邊框(CSS3)
  • 內(nèi)邊距（padding）
  • 外邊距（margin）
  • • 外邊距實現(xiàn)盒子居中
    • 清除元素的默認(rèn)內(nèi)外邊距
  • 外邊距合并
  • • 相鄰塊元素垂直外邊距的合并
    • 嵌套塊元素垂直外邊距的合并
  • content寬度和高度
  • 盒子模型布局穩(wěn)定性
  • CSS3盒模型
  • 盒子陰影
• 浮動(float)
• • 普通流(normal flow)
  • 什么是浮動？
  • 浮動詳細(xì)內(nèi)幕特性
• 清除浮動
• • 為什么要清除浮動
  • 清除浮動本質(zhì)
  • 清除浮動的方法
  • • 額外標(biāo)簽法
    • 父級添加overflow屬性方法
    • 使用after偽元素清除浮動
    • 使用before和after雙偽元素清除浮動
• 版心和布局流程
• • 布局流程
  • 一列固定寬度且居中
  • 兩列左窄右寬型
  • 通欄平均分布型
• Photoshop
• • Photoshop基本使用
  • PS界面組成：
  • 基本操作
  • 移動工具 V
  • 圖層操作
  • 圖層編組
  • 圖層上下位置移動
  • 圖層透明度
  • 套索工具 L
  • 磁性套索 L
  • 魔棒工具 W
  • 選區(qū)布爾運算
  • 鋼筆工具： P
  • Photoshop 切圖
  • • 切片工具
    • 切圖插件
• 定位(position)
• • 元素的定位屬性
  • 靜態(tài)定位(static)
  • 相對定位relative
  • 絕對定位absolute
  • • 父級沒有定位
    • 父級有定位
    • 絕對定位的盒子沒有邊偏移
    • 子絕父相
  • 固定定位fixed(認(rèn)死理型)
  • 疊放次序（z-index）
• 四種定位總結(jié)
• 定位模式轉(zhuǎn)換
• 元素的顯示與隱藏
• • display 顯示
  • visibility 可見性
  • overflow 溢出
• CSS高級技巧
• • CSS用戶界面樣式
  • • 鼠標(biāo)樣式cursor
    • 輪廓 outline
    • 防止拖拽文本域resize
  • vertical-align 垂直對齊
  • • 圖片和文字對齊
    • 去除圖片底側(cè)空白縫隙
  • CSS精靈技術(shù)（sprite）
  • • 核心技術(shù)
  • 過渡(CSS3)
  • 2D變形(CSS3)
  • 動畫(CSS3)

CSS的發(fā)展歷程

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

CSS 網(wǎng)頁的美容師

CSS的出現(xiàn)，拯救了混亂的HTML，當(dāng)讓更加拯救了我們web開發(fā)者。 讓我們的網(wǎng)頁更加豐富多彩。

CSS初識

CSS(Cascading Style Sheets)

CSS通常稱為CSS樣式表或?qū)盈B樣式表（級聯(lián)樣式表），主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。

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

CSS樣式規(guī)則

使用HTML時，需要遵從一定的規(guī)范。CSS亦如此，要想熟練地使用CSS對網(wǎng)頁進(jìn)行修飾，首先需要了解CSS樣式規(guī)則，具體格式如下：

在上面的樣式規(guī)則中:1.選擇器用于指定CSS樣式作用的HTML對象，花括號內(nèi)是對該對象設(shè)置的具體樣式。 2.屬性和屬性值以“鍵值對”的形式出現(xiàn)。 3.屬性是對指定的對象設(shè)置的樣式屬性，例如字體大小、文本顏色等。 4.屬性和屬性值之間用英文“:”連接。 5.多個“鍵值對”之間用英文“;”進(jìn)行區(qū)分。 可以用段落 和 表格的對齊的演示。

CSS字體樣式屬性

font-size:字號大小

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

font-family:字體

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

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

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

常用技巧：

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

font-weight:字體粗細(xì)

字體加粗除了用 b 和 strong 標(biāo)簽之外，可以使用CSS 來實現(xiàn)，但是CSS 是沒有語義的。

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

小技巧：

數(shù)字 400 等價于 normal，而 700 等價于 bold。 但是我們更喜歡用數(shù)字來表示。

font-style:字體風(fēng)格

字體傾斜除了用 i 和 em 標(biāo)簽之外，可以使用CSS 來實現(xiàn)，但是CSS 是沒有語義的。

font-style屬性用于定義字體風(fēng)格，如設(shè)置斜體、傾斜或正常字體，其可用屬性值如下：

normal：默認(rèn)值，瀏覽器會顯示標(biāo)準(zhǔn)的字體樣式。

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

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

<小技巧：

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

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

font屬性用于對字體樣式進(jìn)行綜合設(shè)置，其基本語法格式如下：

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

選擇器

標(biāo)簽選擇器（元素選擇器）

標(biāo)簽選擇器是指用HTML標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱分類，為頁面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式。其基本語法格式如下：

標(biāo)簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 或者 元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

標(biāo)簽選擇器最大的優(yōu)點是能快速為頁面中同類型的標(biāo)簽統(tǒng)一樣式，同時這也是他的缺點，不能設(shè)計差異化樣式。

課堂案例：

類選擇器

類選擇器使用“.”（英文點號）進(jìn)行標(biāo)識，后面緊跟類名，其基本語法格式如下：

.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 標(biāo)簽調(diào)用的時候用 class=“類名” 即可。

類選擇器最大的優(yōu)勢是可以為元素對象定義單獨或相同的樣式。

小技巧：

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

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

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

下面講的是google的案例

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

多類名選擇器

我們可以給標(biāo)簽指定多個類名，從而達(dá)到更多的選擇目的。

注意：

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

多類名選擇器在后期布局比較復(fù)雜的情況下，還是較多使用的。

<div class="pink fontWeight font20">周杰倫</div> <div class="font20">劉備</div> <div class="font14 pink">安其拉</div> <div class="font14">貂蟬</div>

id選擇器

id選擇器使用“#”進(jìn)行標(biāo)識，后面緊跟id名，其基本語法格式如下：

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

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

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

id選擇器和類選擇器區(qū)別

W3C標(biāo)準(zhǔn)規(guī)定，在同一個頁面內(nèi)，不允許有相同名字的id對象出現(xiàn)，但是允許相同名字的class。

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

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

id選擇器和類選擇器最大的不同在于 使用次數(shù)上。

通配符選擇器

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

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

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

* {margin: 0; /* 定義外邊距*/padding: 0; /* 定義內(nèi)邊距*/ }

注意：

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

偽類選擇器

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

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

鏈接偽類選擇器

• :link /* 未訪問的鏈接 */

• :visited /* 已訪問的鏈接 */

• :hover /* 鼠標(biāo)移動到鏈接上 */

• :active /* 選定的鏈接 */

  注意寫的時候，他們的順序盡量不要顛倒 按照 lvha 的順序。 love hate 愛上了討厭 記憶法 或者 lv 包包 非常 hao

a { /* a是標(biāo)簽選擇器 所有的鏈接 */font-weight: 700;font-size: 16px;color: gray;} a:hover { /* :hover 是鏈接偽類選擇器 鼠標(biāo)經(jīng)過 */color: red; /* 鼠標(biāo)經(jīng)過的時候，由原來的 灰色 變成了紅色 */ }

結(jié)構(gòu)(位置)偽類選擇器（CSS3)

• :first-child :選取屬于其父元素的首個子元素的指定選擇器
• :last-child :選取屬于其父元素的最后一個子元素的指定選擇器
• :nth-child(n) ： 匹配屬于其父元素的第 N 個子元素，不論元素的類型
• :nth-last-child(n) ：選擇器匹配屬于其元素的第 N 個子元素的每個元素，不論元素的類型，從最后一個子元素開始計數(shù)。
  n 可以是數(shù)字、關(guān)鍵詞或公式

li:first-child { /* 選擇第一個孩子 */color: pink; } li:last-child { /* 最后一個孩子 */color: purple;} li:nth-child(4) { /* 選擇第4個孩子 n 代表 第幾個的意思 */ color: skyblue;}

目標(biāo)偽類選擇器(CSS3)

:target目標(biāo)偽類選擇器 :選擇器可用于選取當(dāng)前活動的目標(biāo)元素

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

CSS注釋

CSS規(guī)則是使用 /* 需要注釋的內(nèi)容 */ 進(jìn)行注釋的，即在需要注釋的內(nèi)容前使用 “/*” 標(biāo)記開始注釋，在內(nèi)容的結(jié)尾使用 “*/”結(jié)束。

例如：

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

CSS外觀屬性

color:文本顏色

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

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

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

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

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

line-height:行間距

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

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

text-align:水平對齊方式

text-align屬性用于設(shè)置文本內(nèi)容的水平對齊，相當(dāng)于html中的align對齊屬性。其可用屬性值如下：

left：左對齊（默認(rèn)值）

right：右對齊

center：居中對齊

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

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

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

letter-spacing:字間距

letter-spacing屬性用于定義字間距，所謂字間距就是字符與字符之間的空白。其屬性值可為不同單位的數(shù)值，允許使用負(fù)值，默認(rèn)為normal。

word-spacing:單詞間距

word-spacing屬性用于定義英文單詞之間的間距，對中文字符無效。和letter-spacing一樣，其屬性值可為不同單位的數(shù)值，允許使用負(fù)值，默認(rèn)為normal。

word-spacing和letter-spacing均可對英文進(jìn)行設(shè)置。不同的是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:水平位置 垂直位置 模糊距離 陰影顏色;

前兩項是必須寫的。 后兩項可以選寫。

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

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

行內(nèi)式（內(nèi)聯(lián)樣式）

是通過標(biāo)簽的style屬性來設(shè)置元素的樣式，其基本語法格式如下：

<標(biāo)簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內(nèi)容 </標(biāo)簽名>

語法中style是標(biāo)簽的屬性，實際上任何HTML標(biāo)簽都擁有style屬性，用來設(shè)置行內(nèi)式。其中屬性和值的書寫規(guī)范與CSS樣式規(guī)則相同，行內(nèi)式只對其所在的標(biāo)簽及嵌套在其中的子標(biāo)簽起作用。

內(nèi)部樣式表（內(nèi)嵌式）

內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的head頭部標(biāo)簽中，并且用style標(biāo)簽定義，其基本語法格式如下：

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

語法中，style標(biāo)簽一般位于head標(biāo)簽中title標(biāo)簽之后，也可以把他放在HTML文檔的任何地方。

外部樣式表（外鏈?zhǔn)?#xff09;

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

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

注意： link 是個單標(biāo)簽哦!!!

該語法中，link標(biāo)簽需要放在head頭部標(biāo)簽中，并且必須指定link標(biāo)簽的三個屬性，具體如下：

href：定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。 type：定義所鏈接文檔的類型，在這里需要指定為“text/CSS”，表示鏈接的外部文件為CSS樣式表。 rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件。

三種樣式表總結(jié)

樣式表優(yōu)點缺點使用情況控制范圍

行內(nèi)樣式表	書寫方便，權(quán)重高	沒有實現(xiàn)樣式和結(jié)構(gòu)相分離	較少	控制一個標(biāo)簽（少）
內(nèi)嵌樣式表	部分結(jié)構(gòu)和樣式相分離	沒有徹底分離	較多	控制一個頁面（中）
外部樣式表	完全實現(xiàn)結(jié)構(gòu)和樣式相分離	需要引入	最多，強烈推薦	控制整個站點（多）

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

塊級元素(block-level)

每個塊元素通常都會獨自占據(jù)一整行或多整行，可以對其設(shè)置寬度、高度、對齊等屬性，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建。

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

塊級元素的特點：

（1）總是從新行開始

（2）高度，行高、外邊距以及內(nèi)邊距都可以控制。

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

（4）可以容納內(nèi)聯(lián)元素和其他塊元素。

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

行內(nèi)元素（內(nèi)聯(lián)元素）不占有獨立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)，一般不可以設(shè)置寬度、高度、對齊等屬性，常用于控制頁面中文本的樣式。

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

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

（1）和相鄰行內(nèi)元素在一行上。

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

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

（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素。（a特殊）

注意：

只有 文字才 能組成段落 因此 p 里面不能放塊級元素，同理還有這些標(biāo)簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標(biāo)簽，里面不能放其他塊級元素。

鏈接里面不能再放鏈接。

塊級元素和行內(nèi)元素區(qū)別

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

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

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

CSS復(fù)合選擇器

復(fù)合選擇器是由兩個或多個基礎(chǔ)選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準(zhǔn)確更精細(xì)的目標(biāo)元素標(biāo)簽。

交集選擇器

交集選擇器由兩個選擇器構(gòu)成，其中第一個為標(biāo)簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格

記憶技巧：

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

比如： p.one 選擇的是： 類名為 .one 的 段落標(biāo)簽。

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

并集選擇器

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

記憶技巧：

并集選擇器 和 的意思， 就是說，只要逗號隔開的，所有選擇器都會執(zhí)行后面樣式。

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

后代選擇器

后代選擇器又稱為包含選擇器，用來選擇元素或元素組的后代，其寫法就是把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。

子孫后代都可以這么選擇。 或者說，它能選擇任何包含在內(nèi) 的標(biāo)簽。

子元素選擇器

子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標(biāo)簽寫在前面，子級標(biāo)簽寫在后面，中間跟一個 > 進(jìn)行連接，注意，符號左右兩側(cè)各保留一個空格。

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

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

屬性選擇器

**選擇器**示例**含義

E[attr]****		存在attr屬性即可
E[attr=val]****		屬性值完全等于val
E[attr*=val]****		屬性值里包含val字符并且在“任意”位置
E[attr^=val]****		屬性值里包含val字符并且在“開始”位置
E[attr$=val]****		屬性值里包含val字符并且在“結(jié)束”位置

/* 獲取到 擁有 該屬性的元素 */ li[type] {border: 1px solid gray; } /* 獲取 屬性等于某個值的 元素 屬性值 可以使用 引號進(jìn)行包裹 */ li[type="vegetable"] {background-color: green; } /* 使用空格分隔的 多個屬性 其中有某個屬性即可獲取 */ li[type~="hot"] {font-size: 40px; } /* 獲取以某個屬性開頭的語法 */ li[color^='green'] {background-color: orange; } /* 獲取以某個值 結(jié)尾的屬性 */ li[type$='t']{color: hotpink;font-weight: 900; }/* 獲取 屬性中 擁有某個值的 元素 */ li[type*=ea] {font-size: 100px; } /* 如果屬性的值 只有very 也能夠獲取 用來獲取 多個屬性 并且 使用-連接 */ li[price|='very'] {background-color: darkred; } <ul><li type='fruit' color='green'>西瓜</li><li type='vegetable' color='greenyellow'>西蘭花</li><li type='meat'>牛肉</li><li type='meat hot'>豬肉</li><li type='drink hot'>可樂</li><li type='drink hot'>雪碧</li><li price='very-cheap'>紅酒</li><li price='very'>白酒</li> </ul>

偽元素選擇器（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; }

4、E::before和E::after

在E元素內(nèi)部的開始位置和結(jié)束位創(chuàng)建一個元素，該元素為行內(nèi)元素，且必須要結(jié)合content屬性使用。

div::befor {content:"開始"; } div::after {content:"結(jié)束"; }

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

E:after、E:before后面的練習(xí)中會反復(fù)用到，目前只需要有個大致了解

“:” 與 “::” 區(qū)別在于區(qū)分偽類和偽元素

CSS 背景(background)

CSS 可以添加背景顏色和背景圖片，以及來進(jìn)行圖片設(shè)置。

background-color背景顏色

background-image	背景圖片地址
background-repeat	是否平鋪
background-position	背景位置
background-attachment	背景固定還是滾動
背景的合寫（復(fù)合屬性）
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置

背景圖片(image)

語法：

background-image : none | url (url)

參數(shù)：

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

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

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

背景平鋪（repeat）

語法：

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

參數(shù)：

repeat : 　背景圖像在縱向和橫向上平鋪（默認(rèn)的）

no-repeat : 　背景圖像不平鋪

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

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

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

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

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

背景位置(position)

語法：

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

參數(shù)：

length : 　百分?jǐn)?shù) | 由浮點數(shù)字和單位標(biāo)識符組成的長度值。請參閱長度單位
position : 　top | center | bottom | left | center | right

說明：

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

注意：

position 后面是x坐標(biāo)和y坐標(biāo)。 可以使用方位名詞或者 精確單位。

如果和精確單位和方位名字混合使用，則必須是x坐標(biāo)在前，y坐標(biāo)后面。比如 background-position: 15px top; 則 15px 一定是 x坐標(biāo) top是 y坐標(biāo)。

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

背景附著

語法：

background-attachment : scroll | fixed

參數(shù)：

scroll : 　背景圖像是隨對象內(nèi)容滾動
fixed : 　背景圖像固定

說明：

設(shè)置或檢索背景圖像是隨對象內(nèi)容滾動還是固定的。

背景簡寫

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

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

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

背景透明(CSS3)

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

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

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

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

同樣， 可以給 文字和邊框透明 都是 rgba 的格式來寫。

color:rgba(0,0,0,0.3); border: 1px solid rgba(0,0,0,0.3);

背景縮放(CSS3)

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

其參數(shù)設(shè)置如下：

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

b) 設(shè)置為cover時，會自動調(diào)整縮放比例，保證圖片始終填充滿背景區(qū)域，如有溢出部分則會被隱藏。

c) 設(shè)置為contain會自動調(diào)整縮放比例，保證圖片始終完整顯示在背景區(qū)域。

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

多背景(CSS3)

以逗號分隔可以設(shè)置多背景，可用于自適應(yīng)布局

background-image: url('images/gyt.jpg'),url('images/robot.png');

CSS 三大特性

層疊 繼承 優(yōu)先級 是我們學(xué)習(xí)CSS 必須掌握的三個特性。

CSS層疊性

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

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

比如先給某個標(biāo)簽指定了內(nèi)部文字顏色為紅色，接著又指定了顏色為藍(lán)色，此時出現(xiàn)一個標(biāo)簽指定了相同樣式不同值的情況，這就是樣式?jīng)_突。

一般情況下，如果出現(xiàn)樣式?jīng)_突，則會按照CSS書寫的順序，以最后的樣式為準(zhǔn)。

所謂繼承性是指書寫CSS樣式表時，子標(biāo)簽會繼承父標(biāo)簽的某些樣式，如文本顏色和字號。想要設(shè)置一個可繼承的屬性，只需將它應(yīng)用于父元素即可。

簡單的理解就是： 子承父業(yè)。

注意：

恰當(dāng)?shù)厥褂美^承可以簡化代碼，降低CSS樣式的復(fù)雜性。子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的都可以繼承，以及color屬性）

CSS優(yōu)先級

定義CSS樣式時，經(jīng)常出現(xiàn)兩個或更多規(guī)則應(yīng)用在同一元素上，這時就會出現(xiàn)優(yōu)先級的問題。

在考慮權(quán)重時，初學(xué)者還需要注意一些特殊的情況，具體如下：

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

CSS特殊性（Specificity）

關(guān)于CSS權(quán)重，我們需要一套計算公式來去計算，這個就是 CSS Specificity，我們稱為CSS 特性或稱非凡性，它是一個衡量CSS值優(yōu)先級的一個標(biāo)準(zhǔn) 具體規(guī)范入如下：

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

繼承或者* 的貢獻(xiàn)值0,0,0,0

每個元素（標(biāo)簽）貢獻(xiàn)值為	0,0,0,1
每個類，偽類貢獻(xiàn)值為	0,0,1,0
每個ID貢獻(xiàn)值為	0,1,0,0
每個行內(nèi)樣式貢獻(xiàn)值	1,0,0,0
每個!important貢獻(xiàn)值	∞ 無窮大

比如的例子：

div ul li ------> 0,0,0,3.nav ul li ------> 0,0,1,2a:hover -----—> 0,0,1,1.nav a ------> 0,0,1,1 #nav p -----> 0,1,0,1

?

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

總結(jié)優(yōu)先級：

使用了 !important聲明的規(guī)則。

內(nèi)嵌在 HTML 元素的 style屬性里面的聲明。

使用了 ID 選擇器的規(guī)則。

使用了類選擇器、屬性選擇器、偽元素和偽類選擇器的規(guī)則。

使用了元素選擇器的規(guī)則。

只包含一個通用選擇器的規(guī)則。

總結(jié)：權(quán)重是優(yōu)先級的算法，層疊是優(yōu)先級的表現(xiàn)

盒子模型（CSS重點）

其實，CSS就三個大模塊： 盒子模型 、 浮動 、 定位，其余的都是細(xì)節(jié)。要求這三部分，無論如何也要學(xué)的非常精通。

所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內(nèi)容的容器。每個矩形都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。

看透網(wǎng)頁布局的本質(zhì)

網(wǎng)頁布局中，我們是如何把里面的文字，圖片，按照美工給我們的效果圖排列的整齊有序

盒子模型（Box Model）

所有的文檔元素（標(biāo)簽）都會生成一個矩形框，我們成為元素框（element box），它描述了一個文檔元素再網(wǎng)頁布局匯總所占的位置大小。因此，每個盒子除了有自己大小和位置外，還影響著其他盒子的大小和位置。

盒子邊框（border）

語法：

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

邊框?qū)傩浴O(shè)置邊框樣式（border-style）

邊框樣式用于定義頁面中邊框的風(fēng)格，常用屬性值如下：

none：沒有邊框即忽略所有邊框的寬度（默認(rèn)值）solid：邊框為單實線(最為常用的)dashed：邊框為虛線dotted：邊框為點線double：邊框為雙實線

表格的細(xì)線邊框

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

table{ border-collapse:collapse; }

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

盒子邊框總結(jié)表

設(shè)置內(nèi)容	樣式屬性	常用屬性值
上邊框	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:寬度 樣式 顏色;
樣式綜合設(shè)置	border-style:上邊 [右邊 下邊 左邊];	none無（默認(rèn)）、solid單實線、dashed虛線、dotted點線、double雙實線
寬度綜合設(shè)置	border-width:上邊 [右邊 下邊 左邊];	像素值
顏色綜合設(shè)置	border-color:上邊 [右邊 下邊 左邊];	顏色值、#十六進(jìn)制、rgb(r,g,b)、rgb(r%,g%,b%)
邊框綜合設(shè)置	border:四邊寬度 四邊樣式 四邊顏色;

圓角邊框(CSS3)

從此以后，我們的世界不只有矩形。

語法格式：

Border-radius: 水平半徑/垂直半徑；

一般我們垂直半徑都是省略的默認(rèn)和水平半徑一樣。

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

課堂案例:

<style>div {width:200px;height:200px;border:1px solid red;margin:10px 40px;text-align: center;line-height: 200px;}div:first-child {border:10px solid red;border-radius: 20px/50px;}div:nth-child(2) {border-radius: 20px;}div:nth-child(3) {border-radius: 15px 0;}div:nth-child(4) {border-radius:100px;}div:nth-child(5) {border-radius: 50%;}div:nth-child(6) {border-radius: 100px 0;}div:nth-child(7) {border-radius: 200px 0 0 0;}div:nth-child(8) {border-radius: 100px 100px 0 0;height:100px; /*高度減半*/}div:nth-child(9) {border-radius: 100px;height:100px;}div:nth-child(10) {border-radius: 100%;height:100px;} </style

內(nèi)邊距（padding）

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

padding-right:右內(nèi)邊距

padding-bottom:下內(nèi)邊距

padding-left:左內(nèi)邊距

注意： 后面跟幾個數(shù)值表示的意思是不一樣的。

值的個數(shù)表達(dá)意思

1個值	padding：上下左右邊距 比如padding: 3px; 表示上下左右都是3像素
2個值	padding: 上下邊距 左右邊距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3個值	padding：上邊距 左右邊距 下邊距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4個值	padding:上內(nèi)邊距 右內(nèi)邊距 下內(nèi)邊距 左內(nèi)邊距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 順時針

外邊距（margin）

margin屬性用于設(shè)置外邊距。 設(shè)置外邊距會在元素之間創(chuàng)建“空白”， 這段空白通常不能放置其他內(nèi)容。

margin-top:上外邊距

margin-right:右外邊距

margin-bottom:下外邊距

margin-left:上外邊距

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

取值順序跟內(nèi)邊距相同。

外邊距實現(xiàn)盒子居中

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

必須是塊級元素。

盒子必須指定了寬度（width）

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

實際工作中常用這種方式進(jìn)行網(wǎng)頁布局，示例代碼如下：

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

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

為了更方便地控制網(wǎng)頁中的元素，制作網(wǎng)頁時，可使用如下代碼清除元素的默認(rèn)內(nèi)外邊距：

* {padding:0; /* 清除內(nèi)邊距 */margin:0; /* 清除外邊距 */ }

注意： 行內(nèi)元素是只有左右內(nèi)外邊距的，是沒有上下內(nèi)外邊距的。

外邊距合并

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

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

當(dāng)上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。

解決方案： 避免就好了。

嵌套塊元素垂直外邊距的合并

對于兩個嵌套關(guān)系的塊元素，如果父元素沒有上內(nèi)邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發(fā)生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發(fā)生合并。

解決方案：

可以為父元素定義1像素的上邊框或上內(nèi)邊距。

可以為父元素添加overflow:hidden。

待續(xù)。。。。

content寬度和高度

使用寬度屬性width和高度屬性height可以對盒子的大小進(jìn)行控制。

width和height的屬性值可以為不同單位的數(shù)值或相對于父元素的百分比%，實際工作中最常用的是像素值。

大多數(shù)瀏覽器，如Firefox、IE6及以上版本都采用了W3C規(guī)范，符合CSS規(guī)范的盒子模型的總寬度和總高度的計算原則是：

盒子的總寬度= width+左右內(nèi)邊距之和+左右邊框?qū)挾戎?#43;左右外邊距之和 盒子的總高度= height+上下內(nèi)邊距之和+上下邊框?qū)挾戎?#43;上下外邊距之和

注意：

1、寬度屬性width和高度屬性height僅適用于塊級元素，對行內(nèi)元素?zé)o效（ img 標(biāo)簽和 input除外）。

2、計算盒子模型的總高度時，還應(yīng)考慮上下兩個盒子垂直外邊距合并的情況。

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

開始學(xué)習(xí)盒子模型，同學(xué)們最大的困惑就是， 分不清內(nèi)外邊距的使用，什么情況下使用內(nèi)邊距，什么情況下使用外邊距？

答案是： 其實他們大部分情況下是可以混用的。 就是說，你用內(nèi)邊距也可以，用外邊距也可以。 你覺得哪個方便，就用哪個。

但是，總有一個最好用的吧，我們根據(jù)穩(wěn)定性來分，建議如下：

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

width > padding > margin

原因：

margin 會有外邊距合并 還有 ie6下面margin 加倍的bug（討厭）所以最后使用。

padding 會影響盒子大小， 需要進(jìn)行加減計算（麻煩） 其次使用。

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

CSS3盒模型

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

可以分成兩種情況：

1、box-sizing: border-box 盒子大小為 width

2、box-sizing: content-box 盒子大小為 width + padding + border

注：上面的標(biāo)注的width指的是CSS屬性里設(shè)置的width: length，content的值是會自動調(diào)整的。

div {width: 100px;height: 100px;background: skyblue;margin: 0 auto;border: 1px solid gray;/* 默認(rèn)的設(shè)置 如果我們添加了 border屬性 該容器的大小會發(fā)生改變因為他要優(yōu)先保證內(nèi)部的內(nèi)容所占區(qū)域 不變*//* box-sizing 如果不設(shè)置 默認(rèn)的值 就是 content-box: 優(yōu)先保證內(nèi)容的大小 對盒子進(jìn)行縮放;border-box: 讓 盒子 優(yōu)先保證自己所占區(qū)域的大小,對內(nèi)容進(jìn)行壓縮;*/box-sizing: border-box; }

盒子陰影

語法格式：

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

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

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

img {border:10px solid orange;box-shadow:3px 3px 5px 4px rgba(0,0,0,1); }

浮動(float)

普通流(normal flow)

這個單詞很多人翻譯為 文檔流 ， 字面翻譯 普通流 或者標(biāo)準(zhǔn)流都可以。

前面我們說過，網(wǎng)頁布局的核心，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置？

CSS的定位機制有3種：普通流（標(biāo)準(zhǔn)流）、浮動和定位。

html語言當(dāng)中另外一個相當(dāng)重要的概念----------標(biāo)準(zhǔn)流！或者普通流。普通流實際上就是一個網(wǎng)頁內(nèi)標(biāo)簽元素正常從上到下，從左到右排列順序的意思，比如塊級元素會獨占一行，行內(nèi)元素會按順序依次前后排列；按照這種大前提的布局排列之下絕對不會出現(xiàn)例外的情況叫做普通流布局。

浮動最早是用來控制圖片，以便達(dá)到其他元素（特別是文字）實現(xiàn)“環(huán)繞”圖片的效果。

后來，我們發(fā)現(xiàn)浮動有個很有意思的事情：就是讓任何盒子可以一行排列,因此我們就慢慢的偏離主題，用浮動的特性來布局了。（CSS3已經(jīng)我們真正意義上的網(wǎng)頁布局，具體CSS3我們會詳細(xì)解釋）

什么是浮動？

元素的浮動是指設(shè)置了浮動屬性的元素會脫離標(biāo)準(zhǔn)普通流的控制，移動到其父元素中指定位置的過程。

在CSS中，通過float屬性來定義浮動，其基本語法格式如下：

選擇器{float:屬性值;} 屬性值描述

left	元素向左浮動
right	元素向右浮動
none	元素不浮動（默認(rèn)值）

浮動詳細(xì)內(nèi)幕特性

浮動首先創(chuàng)建包含塊的概念（包裹）。就是說， 浮動的元素總是找理它最近的父級元素對齊。但是不會超出內(nèi)邊距的范圍。 浮動的元素排列位置，跟上一個元素（塊級）有關(guān)系。如果上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；如果上一個元素是標(biāo)準(zhǔn)流，則A元素的頂部會和上一個元素的底部對齊。 由2可以推斷出，一個父盒子里面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。 浮動脫離標(biāo)準(zhǔn)流，不占位置，會影響標(biāo)準(zhǔn)流。浮動只有左右浮動。 元素添加浮動后，元素會具有行內(nèi)塊元素的特性。元素的大小完全取決于定義的大小或者默認(rèn)的內(nèi)容多少 浮動根據(jù)元素書寫的位置來顯示相應(yīng)的浮動。

總結(jié)： 浮動 —> 浮漏特

浮： 加了浮動的元素盒子是浮起來的，漂浮在其他的標(biāo)準(zhǔn)流盒子上面。
漏： 加了浮動的盒子，不占位置的，它浮起來了，它原來的位置漏 給了標(biāo)準(zhǔn)流的盒子。
特： 特別注意，這是特殊的使用，有很多的不好處，使用要謹(jǐn)慎。

清除浮動

為什么要清除浮動

我們前面說過，浮動本質(zhì)是用來做一些文字混排效果的，但是被我們拿來做布局用，則會有很多的問題出現(xiàn)，

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

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

清除浮動本質(zhì)

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

清除浮動的方法

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

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

選擇器{clear:屬性值;} 屬性值描述

left	不允許左側(cè)有浮動元素（清除左側(cè)浮動的影響）
right	不允許右側(cè)有浮動元素（清除右側(cè)浮動的影響）
both	同時清除左右兩側(cè)浮動的影響

額外標(biāo)簽法

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

優(yōu)點： 通俗易懂，書寫方便

缺點： 添加許多無意義的標(biāo)簽，結(jié)構(gòu)化較差。 我只能說，w3c你推薦的方法我不接受，你不值得擁有。。。

父級添加overflow屬性方法

可以通過觸發(fā)BFC的方式，可以實現(xiàn)清除浮動效果。（BFC后面講解）

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

優(yōu)點： 代碼簡潔

缺點： 內(nèi)容增多時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素。

使用after偽元素清除浮動

使用方法：

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

優(yōu)點： 符合閉合浮動思想 結(jié)構(gòu)語義化正確

缺點： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。

使用before和after雙偽元素清除浮動

使用方法：

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

優(yōu)點： 代碼更簡潔

缺點： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。

代表網(wǎng)站： 小米、騰訊等

版心和布局流程

閱讀報紙時容易發(fā)現(xiàn)，雖然報紙中的內(nèi)容很多，但是經(jīng)過合理地排版，版面依然清晰、易讀。同樣，在制作網(wǎng)頁時，要想使頁面結(jié)構(gòu)清晰、有條理，也需要對網(wǎng)頁進(jìn)行“排版”。

“版心”是指網(wǎng)頁中主體內(nèi)容所在的區(qū)域。一般在瀏覽器窗口中水平居中顯示，常見的寬度值為960px、980px、1000px、1200px等。

布局流程

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

1、確定頁面的版心（可視區(qū)）。

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

3、制作HTML頁面，CSS文件。

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

一列固定寬度且居中

最普通的，最為常用的結(jié)構(gòu)

兩列左窄右寬型

比如小米 小米官網(wǎng)

通欄平均分布型

比如錘子 錘子官網(wǎng)

Photoshop

Photoshop基本使用

PS界面組成：

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

工作區(qū)：（新建）

1、調(diào)整浮動面板

2、選項欄后方，新建工作區(qū)，命名。

刪除工作區(qū)：先選擇其他工作區(qū)，再操作刪除工作區(qū)。

基本操作

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

單位：像素 厘米 毫米

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

印刷行業(yè)： 單位 CM/MM 300像素/英寸 CMYK顏色模式

2、關(guān)閉文檔 CTRL+W

3、存儲 CTRL+S （替存）

4、存儲為 CTRL+SHIFT+S 另存一份文件

5、格式：
? .psd PS源文件格式 圖層、文字、樣式等，可再次編輯
? （給自己）
? .jpg 有損壓縮格式 （給客戶） 品質(zhì) 最高12

6、文件打開：
? 1）文件下拉菜單-打開（CTRL+O歐）（雙擊軟件空白處=打開）
? 2）拖拽文件至選項欄上方，釋放鼠標(biāo)

移動工具 V

1、不同文件之間拖拽圖像。

圖層操作

圖層面板快捷鍵 F7

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

1、圖層縮覽圖判斷

2、按住CTRL,在目標(biāo)圖像上單擊

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

圖層面板中加選圖層：

1、按SHIFT，單擊另一目標(biāo)圖層 中間所有圖層被選中

2、按CTRL，單擊另一目標(biāo)圖層 只選中目標(biāo)圖層

復(fù)制圖層：選中目標(biāo)圖層后（移動工具狀態(tài)下）

1、按ALT拖拽圖像

2、CTRL+J （重合）

3、拖拽目標(biāo)至創(chuàng)建新圖層按鈕

圖層編組

選中目標(biāo)圖層，CTRL+G

取消編組：CTRL+SHIFT+G

雙擊圖層名稱可重新命名

雙擊組名稱，可命名組

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

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-b8Gc8m6m-1615418691626)(media/1498465862231.png)]

圖層上下位置移動

1、選中目標(biāo)圖層，在圖層面拖拽

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

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

移動選區(qū)或圖像時：

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

圖層透明度

不透明度：設(shè)置圖層的不透明程度 0%完全透明，不可見

? 100%完全不透明，真實可見

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

鍵盤數(shù)字鍵，可快速設(shè)置透明度數(shù)值

套索工具 L

1、套索工具 L 在屏幕上拖拽鼠標(biāo)左鍵，釋放后生成選區(qū)

2、多邊形套索 L 連續(xù)單擊繪制多邊形選區(qū)

? 閉合方法：1、單擊起始點 2、雙擊任意位置

? DELETE刪除當(dāng)前點

3、磁性套索工具 L 單擊顏色交界后，沿交界線拖拽鼠標(biāo)，可生成選區(qū)。

磁性套索 L

L 在顏色交界的位置單擊后拖動。單擊起始點后，生成選區(qū)。 大小寫鍵：CAPSLOCK 可控制光標(biāo)精確狀態(tài)。

魔棒工具 W

以單擊位置為選擇色，選擇相似顏色生成選區(qū)。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BGPRXYGJ-1615418691628)(media/1498465928343.png)]

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

連續(xù)：勾選連續(xù)時，相連顏色生成選區(qū)。

? 不勾選，畫面中所有相似顏色被選中生成選區(qū)。

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

選區(qū)反選：CTRL+SHIFT+I

選區(qū)布爾運算

選區(qū)面積大小的變化。

新選區(qū)：保持選中狀態(tài)

添加到選區(qū)：相加運算（按住SHIFT再繪制選區(qū)）

從選區(qū)減去：相減（按住ALT再繪制選區(qū)）

與選區(qū)交叉：重合部分保留。（按住ALT+SHIFT再繪制選區(qū)）

鋼筆工具： P

作用：繪制路徑，生成選區(qū)，摳圖。

組成;路徑線和錨點

繪制路徑后，CTRL+回車，生成選區(qū)。

路徑類型：

直線型路徑：連續(xù)單擊

曲線型路徑：第一點單擊，第二點拖動鼠標(biāo)。

Photoshop 切圖

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

切片工具

利用切片工具手動劃出

2.圖層—新建基于圖層的切片

利用標(biāo)尺 基礎(chǔ)參考線的切片

切圖插件

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

定位(position)

如果，說浮動， 關(guān)鍵在一個 “浮” 字上面， 那么 我們的定位，關(guān)鍵在于一個 “位” 上。

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

元素的定位屬性

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

1、邊偏移

邊偏移屬性描述

top	頂端偏移量，定義元素相對于其父元素上邊線的距離
bottom	底部偏移量，定義元素相對于其父元素下邊線的距離
left	左側(cè)偏移量，定義元素相對于其父元素左邊線的距離
right	右側(cè)偏移量，定義元素相對于其父元素右邊線的距離

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

2、定位模式

在CSS中，position屬性用于定義元素的定位模式，其基本語法格式如下：

選擇器{position:屬性值;}

position屬性的常用值

值描述

static	自動定位（默認(rèn)定位方式）
relative	相對定位，相對于其原文檔流的位置進(jìn)行定位
absolute	絕對定位，相對于其上一個已經(jīng)定位的父元素進(jìn)行定位
fixed	固定定位，相對于瀏覽器窗口進(jìn)行定位

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

靜態(tài)定位是所有元素的默認(rèn)定位方式，當(dāng)position屬性的取值為static時，可以將元素定位于靜態(tài)位置。 所謂靜態(tài)位置就是各個元素在HTML文檔流中默認(rèn)的位置。

上面的話翻譯成白話： 就是網(wǎng)頁中所有元素都默認(rèn)的是靜態(tài)定位哦！ 其實就是標(biāo)準(zhǔn)流的特性。

在靜態(tài)定位狀態(tài)下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。

PS： 靜態(tài)定位其實沒啥可說的。

相對定位relative

相對定位是將元素相對于它在標(biāo)準(zhǔn)流中的位置進(jìn)行定位，當(dāng)position屬性的取值為relative時，可以將元素定位于相對位置。

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

注意： 相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來的所占的位置，繼續(xù)占有。

就是說，相對定位的盒子仍在標(biāo)準(zhǔn)流中，它后面的盒子仍以標(biāo)準(zhǔn)流方式對待它。

絕對定位absolute

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

當(dāng)position屬性的取值為absolute時，可以將元素的定位模式設(shè)置為絕對定位。

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

父級沒有定位

若所有父元素都沒有定位，以瀏覽器為準(zhǔn)對齊(document文檔)。

父級有定位

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

絕對定位的盒子沒有邊偏移

如果只是給盒子指定了 定位，但是沒有給與邊偏移，則改盒子以標(biāo)準(zhǔn)流來顯示排序，和上一個盒子的底邊對齊，但是不占有位置。

子絕父相

這個“子絕父相”太重要了，是我們學(xué)習(xí)定位的口訣，時時刻刻記住的。

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

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

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

草圖就是如下：

所以，我們可以得出如下結(jié)論：

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

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

這就是子絕父相的由來。

固定定位fixed(認(rèn)死理型)

固定定位是絕對定位的一種特殊形式，它以瀏覽器窗口作為參照物來定義網(wǎng)頁元素。當(dāng)position屬性的取值為fixed時，即可將元素的定位模式設(shè)置為固定定位。

當(dāng)對元素設(shè)置固定定位后，它將脫離標(biāo)準(zhǔn)文檔流的控制，始終依據(jù)瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。

固定定位有兩點：

固定定位的元素跟父親沒有任何關(guān)系，只認(rèn)瀏覽器。

固定定位完全脫標(biāo)，不占有位置，不隨著滾動條滾動。

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

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

疊放次序（z-index）

當(dāng)對多個元素同時設(shè)置定位時，定位元素之間有可能會發(fā)生重疊。

在CSS中，要想調(diào)整重疊定位元素的堆疊順序，可以對定位元素應(yīng)用z-index層疊等級屬性，其取值可為正整數(shù)、負(fù)整數(shù)和0。

比如： z-index: 2;

注意：

z-index的默認(rèn)屬性值是0，取值越大，定位元素在層疊元素中越居上。

如果取值相同，則根據(jù)書寫順序，后來居上。

后面數(shù)字一定不能加單位。

只有相對定位，絕對定位，固定定位有此屬性，其余標(biāo)準(zhǔn)流，浮動，靜態(tài)定位都無此屬性，亦不可指定此屬性。

四種定位總結(jié)

定位模式是否脫標(biāo)占有位置是否可以使用邊偏移移動位置基準(zhǔn)

靜態(tài)static	不脫標(biāo)，正常模式	不可以	正常模式
相對定位relative	不脫標(biāo)，占有位置	可以	相對自身位置移動
絕對定位absolute	完全脫標(biāo)，不占有位置	可以	相對于定位父級移動位置
固定定位fixed	完全脫標(biāo)，不占有位置	可以	相對于瀏覽器移動位置

定位模式轉(zhuǎn)換

跟 浮動一樣， 元素添加了 絕對定位和固定定位之后， 元素模式也會發(fā)生轉(zhuǎn)換， 都轉(zhuǎn)換為 行內(nèi)塊模式， 因此 比如 行內(nèi)元素 如果添加了 絕對定位或者 固定定位后，可以不用轉(zhuǎn)換模式，直接給高度和寬度就可以了。

元素的顯示與隱藏

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

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

display 顯示

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

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

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

visibility 可見性

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

visible : 　對象可視

hidden : 　對象隱藏

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

overflow 溢出

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

visible : 　不剪切內(nèi)容也不添加滾動條。

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

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

scroll : 　不管超出內(nèi)容否，總是顯示滾動條

CSS高級技巧

CSS用戶界面樣式

所謂的界面樣式， 就是更改一些用戶操作樣式， 比如 更改用戶的鼠標(biāo)樣式， 表單輪廓等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制，因此我們就放棄了。 防止表單域拖拽

鼠標(biāo)樣式cursor

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

cursor : default 小白 | pointer 小手 | move 移動 | text 文本

鼠標(biāo)放我身上查看效果哦：

<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

但是我們都不關(guān)心可以設(shè)置多少，我們平時都是去掉的。

最直接的寫法是 ： outline: 0;

<input type="text" style="outline: 0;"/>

防止拖拽文本域resize

resize：none 這個單詞可以防止 火狐 谷歌等瀏覽器隨意的拖動 文本域。

右下角可以拖拽：

右下角不可以拖拽：

<textarea style="resize: none;"></textarea>

vertical-align 垂直對齊

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

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

但是我們從來沒有講過有垂直居中的屬性， 我們的媽媽一直很擔(dān)心我們的垂直居中怎么做。

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

vertical-align : baseline |top |middle |bottom

設(shè)置或檢索對象內(nèi)容的垂直對其方式。

vertical-align 不影響塊級元素中的內(nèi)容對齊，它只針對于 行內(nèi)元素或者行內(nèi)塊元素，特別是行內(nèi)塊元素， 通常用來控制圖片和表單等。

圖片和文字對齊

所以我們知道，我們可以通過vertical-align 控制圖片和文字的垂直關(guān)系了。 默認(rèn)的圖片會和文字基線對齊。

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

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

解決的方法就是：

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

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

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

核心技術(shù)

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

一般的經(jīng)典布局都是這樣的：

<li><a href="#"><span>導(dǎo)航欄內(nèi)容</span></a> </li>

總結(jié)：

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

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

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

過渡(CSS3)

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

在CSS3里使用transition可以實現(xiàn)補間動畫（過渡效果），并且當(dāng)前元素只要有“屬性”發(fā)生變化時即存在兩種狀態(tài)(我們用A和B代指），就可以實現(xiàn)平滑的過渡，為了方便演示采用hover切換兩種狀態(tài)，但是并不僅僅局限于hover狀態(tài)來實現(xiàn)過渡。

語法格式:

transition: 要過渡的屬性 花費時間 運動曲線 何時開始; 屬性描述CSS

transition	簡寫屬性，用于在一個屬性中設(shè)置四個過渡屬性。	3
transition-property	規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。	3
transition-duration	定義過渡效果花費的時間。默認(rèn)是 0。	3
transition-timing-function	規(guī)定過渡效果的時間曲線。默認(rèn)是 “ease”。	3
transition-delay	規(guī)定過渡效果何時開始。默認(rèn)是 0。	3

運動曲線示意圖：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-kpoVLFsn-1615418691629)(media/1498445454760.png)]

img {width:80px; height: 80px; border:8px solid #ccc; border-radius: 50%;transition:transform 0.5s ease-in 0s; } img:hover {transform:rotate(180deg); }

2D變形(CSS3)

轉(zhuǎn)換是CSS3中具有顛覆性的特征之一，可以實現(xiàn)元素的位移、旋轉(zhuǎn)、變形、縮放，甚至支持矩陣方式，配合過渡和即將學(xué)習(xí)的動畫知識，可以取代大量之前只能靠Flash才可以實現(xiàn)的效果。

變形轉(zhuǎn)換 transform

• 移動 translate(x, y)

translate(50px,50px);

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

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

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

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

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

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

• 旋轉(zhuǎn) rotate(deg)

可以對元素進(jìn)行旋轉(zhuǎn)，正值為順時針，負(fù)值為逆時針；

transform:rotate(45deg);

當(dāng)元素旋轉(zhuǎn)以后，坐標(biāo)軸也跟著發(fā)生的轉(zhuǎn)變

調(diào)整順序可以解決，把旋轉(zhuǎn)放到最后

注意單位是 deg 度數(shù)

案例旋轉(zhuǎn)撲克牌

body {background-color: skyblue; } .container {width: 100px;height: 150px;border: 1px solid gray;margin: 300px auto;position: relative; } .container > img {display: block;width: 100%;height: 100%;position: absolute;transform-origin: top right;/* 添加過渡 */transition: all 1s; } .container:hover img:nth-child(1) {transform: rotate(60deg); } .container:hover img:nth-child(2) {transform: rotate(120deg); } .container:hover img:nth-child(3) {transform: rotate(180deg); } .container:hover img:nth-child(4) {transform: rotate(240deg); } .container:hover img:nth-child(5) {transform: rotate(300deg); } .container:hover img:nth-child(6) {transform: rotate(360deg); }

• 傾斜 skew(deg, deg)

transform:skew(30deg,0deg);

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

可以使元素按一定的角度進(jìn)行傾斜，可為負(fù)值，第二個參數(shù)不寫默認(rèn)為0。

5.transform-origin可以調(diào)整元素轉(zhuǎn)換的原點

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

動畫(CSS3)

動畫是CSS3中具有顛覆性的特征之一，可通過設(shè)置多個節(jié)點來精確控制一個或一組動畫，常用來實現(xiàn)復(fù)雜的動畫效果。

語法格式：

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

關(guān)于幾個值，除了名字，動畫時間，延時有嚴(yán)格順序要求其它隨意r

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

總結(jié)

以上是生活随笔為你收集整理的史上最全的CSS基础知识大全！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。