基于黑馬前端視頻學習的CSS3筆記，每一天的知識點都放在一起，方便學習查閱

• ==CSS第一天==
• • 一、css簡介
  • 二、css語法規范
  • 三、css代碼風格
  • 四、css選擇器的作用
  • 五、css基礎選擇器
  • • 1、標簽選擇器：
    • 2、類選擇器
    • 3、多類名選擇器
    • 4、id選擇器：
    • 5、id選擇器和類選擇器的區別
    • 6、通配符選擇器
    • 7、選擇器總結
  • 六、css字體屬性:
  • • 1、字體大小：
    • 2、字體粗細：
    • 3、字體樣式：
    • 4、字體的綜合寫法
    • 5、字體總結：
  • 七、css文本屬性：
  • • 1、文本顏色：
    • 2、文本對齊：
    • 3、修飾文本：
    • 4、文本縮進
    • 5、行間距：
  • 八、css樣式表：
  • • 1、行內樣式表（行內式）
    • 2、內部樣式表（嵌入式）
    • 3、外部樣式表（鏈接式）
  • 九、Chrome調試工具：
• ==CSS第二天==
• • 一、emmet語法
  • • 1、簡介
    • 2、快速生成HTML結構語法
    • 3、快速生成CSS樣式語法
    • 4、快速格式化代碼
  • 二、css的復合選擇器
  • • 1、什么是復合選擇器？
    • 2、后代選擇器 (重要）
    • 3、子選擇器 (重要）
    • 4、并集選擇器 (重要）
    • 5、偽類選擇器
    • 6、鏈接偽類選擇器
    • 7、:focus 偽類選擇器
    • 復合選擇器總結
  • 三、css的顯示模式
  • • 1、什么是元素的顯示模式
    • 2、元素顯示模式的分類
    • • 2.1、塊元素
      • 2.2、行內元素
      • 2.3、行內塊元素
      • 2.4、元素顯示模式總結
    • 3、元素顯示模式的轉換
    • 4、單行文字垂直居中的代碼
  • 四、css的背景
  • • 1、背景顏色
    • 2、背景圖片
    • 3、背景平鋪
    • 4、背景圖片位置
    • 5、背景圖片固定
    • 6、背景樣式合寫
    • 7、背景色半透明
    • 8、背景總結
• ==CSS第三天==
• • 一、css三大特性
  • • 1、層疊性
    • 2、繼承性
    • 3、優先級
    • • 3.1、權重疊加（重點）
  • 二、盒子模型
  • • 1、網頁布局的本質
    • • 1.1、網頁布局過程
      • 1.2、網頁布局三大核心
    • 2、盒子模型（Box Model）組成
    • 3、邊框（border）
    • • 3.1、邊框的使用
      • 3.2、表格的細線邊框
      • 3.3、邊框會影響盒子實際大小
    • 4、內邊距（padding）
    • • 4.1、內邊距的使用方式
      • 4.2、內邊距會影響盒子實際大小
    • 5、外邊距（margin）
    • • 5.1、外邊距的使用方式
      • 5.2、外邊距典型應用
      • 5.3、外邊距合并
      • 5.4、清除內外邊距
  • 三、PS 基本操作
• ==CSS第四天==
• • 一、其他樣式
  • • 1、圓角邊框
    • 2、盒子陰影
    • 3、文字陰影
  • 二、浮動
  • • 1、傳統網頁布局的三種方式
    • 2、標準流（普通流/文檔流）
    • 3、為什么需要浮動？
    • 4、什么是浮動？
    • 5、浮動特性
    • 6、浮動元素經常和標準流父級搭配使用
  • 三、常見網頁布局
  • • 浮動布局注意點
  • 四、清除浮動
  • • 1、為什么需要清除浮動？
    • 2、清除浮動本質
    • 3、清除浮動樣式
    • 4、清除浮動的多種方式
    • • 4.1、額外標簽法
      • 4.2、父級添加 overflow 屬性
      • 4.3、父級添加after偽元素
      • 4.4、父級添加雙偽元素
    • 總結
  • 五、PS 切圖
  • • 1、圖層切圖
    • 2、切片切圖
    • 3、PS插件切圖
• ==CSS第五天==
• • 1. PS 切圖
  • • 1.1. 常見的圖片格式
    • 1.2. 圖層切圖
    • 1.3. 切片切圖
    • 1.4. 插件切圖
    • • 1.4.1. 介紹
      • 1.4.2. 安裝
  • 2. CSS屬性書寫順序（重點）
  • 3. 學成在線頁面制作
  • • 3.1. 前期準備素材
    • 3.2. 前期準備工作
    • 3.3. 頁面布局整體思路
    • 3.4. 頁面制作
    • • 3.4.1. header頭部制作
      • 3.4.2. banner制作
      • • 3.4.2.1 subnav 側導航欄 (左側的)
        • 3.4.2.2 course課程表模塊 (右側的)
      • 3.4.3. 精品推薦小模塊
      • 3.4.4. 精品推薦大模塊
      • 3.4.5. 底部模塊制作
• ==CSS第六天==
• • 1. 定位(position) 介紹
  • • 1.1 為什么使用定位
    • 1.2 定位組成
    • • 1.2.1 邊偏移（方位名詞）
      • 1.2.2 定位模式 (position)
    • 1.3 定位模式介紹
    • • 1.3.1. 靜態定位(static) - 了解
      • 1.3.2. 相對定位(relative) - 重要
      • 1.3.3. 絕對定位(absolute) - 重要
      • • 1.3.3.1 絕對定位的介紹
        • 1.3.3.2 定位口訣 —— 子絕父相
      • 1.3.4. 固定定位(fixed) - 重要
      • 1.3.5 粘性定位(sticky) - 了解
      • 1.3.6 定位總結
  • 2. 綜合案例：學成在線-hot 模塊添加
  • • **2. 1 案例截圖**：
    • 2.2 案例分析
    • 2.3 案例小結
  • 3. 定位(position)的應用
  • • 3.1. 固定定位小技巧： 固定在版心左側位置。
    • 3.2. 堆疊順序（z-index）
  • 4. 定位(position)的拓展
  • • 4.1 絕對定位的盒子居中
    • 4.2 定位特殊特性
    • 4.3 脫標的盒子不會觸發外邊距塌陷
    • 4.4 絕對定位（固定定位）會完全壓住盒子
  • 5. 綜合案例 - 淘寶輪播圖(重點)
  • • 5.1 效果圖
    • 5.2 布局分析
    • 5.3 步驟
    • 5.4 知識點：圓角矩形設置4個角
    • 5.5 代碼參考
  • 6. 網頁布局總結
  • • 6.1. 標準流
    • 6.2. 浮動
    • 6.3. 定位
  • 7. 元素的顯示與隱藏
  • • 7.1. display 顯示（重點）
    • 7.2. visibility 可見性 （了解）
    • 7.3. overflow 溢出（重點）
    • 7.4. 顯示與隱藏總結
  • 8 綜合案例：土豆網鼠標經過顯示遮罩
  • • 8.1. 效果圖
    • 8.2. 案例目標
    • 8.3. 核心原理
    • 8.4. 代碼參考
• ==CSS第七天==
• • 1. 精靈圖（重點）
  • • 1.1 為什么需要精靈圖
    • 1.2 精靈圖（sprites）的使用
    • 1.3 案例：拼出自己名字
    • • 1.3.1 案例效果
      • 1.3.2 代碼參考
  • 2. 字體圖標
  • • 2.1 字體圖標的產生
    • 2.2 字體圖標的優點
    • **2.3** **字體圖標的下載**
    • **2.4** **字體圖標的引入**
    • 2.5 字體圖標的追加
    • 2.6 字體圖標加載的原理：
  • 3. CSS 三角
  • • 3.1 介紹
    • 3.2 案例：京東三角
    • • 3.2.1效果圖
      • 3.2.2 代碼參考
  • 4. CSS 用戶界面樣式
  • • 4.1 鼠標樣式 cursor
    • 4.2 輪廓線 outline
    • 4.3 防止拖拽文本域 resize
  • 5. vertical-align 屬性應用
  • • **5.1** **圖片、表單和文字對齊**
    • 5.2 解決圖片底部默認空白縫隙問題
  • 6. 溢出的文字省略號顯示
  • • 6.1 單行文本溢出顯示省略號
    • 6.2 多行文本溢出顯示省略號（了解）
  • 7. 常見布局技巧
  • • 7.1. margin負值運用
    • 7.2 文字圍繞浮動元素
    • 7.3 行內塊巧妙運用
    • 7.4. CSS 三角強化 案例
    • • **7.4.1 原理**
      • 7.4.2 案例效果
      • **7.4.3 代碼參考**
  • 8. CSS 初始化
• ==目標==
• ==HTML5新特性==
• • 概述
  • 語義化標簽 （★★）
  • 多媒體標簽
  • • 視頻標簽- video（★★★）
    • • 基本使用
      • 兼容寫法
      • video 常用屬性
    • 音頻標簽- audio
    • • 基本使用
      • 兼容寫法
      • audio 常用屬性
    • 小結
  • 新增的表單元素 （★★）
• CSS3新特性
• • CSS3 的現狀
  • CSS3 新增選擇器
  • • 屬性選擇器（★★）
    • 結構偽類選擇器
    • • E:first-child
      • E:nth-child(n)（★★★）
      • E:nth-child 與 E:nth-of-type 的區別
      • 小結
    • 偽元素選擇器（★★★）
    • • 應用場景一： 字體圖標
      • 應用場景二： 仿土豆效果
      • 應用場景三： 清除浮動
  • 盒子模型（★★★）
  • 其他特性（★）
  • • 圖標變模糊 – CSS3濾鏡filter
    • 計算盒子寬度 – calc 函數
  • CSS3 過渡（★★★）
  • • • 過渡練習
• 廣義H5說法 了解
• • • 狹隘H5
    • 廣義H5

CSS第一天

一、css簡介

• CSS 是層疊樣式表 ( Cascading Style Sheets ) 的簡稱.
  有時我們也會稱之為 CSS 樣式表或級聯樣式表。
• CSS 是也是一種標記語言
• CSS 主要用于設置 HTML 頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局和外觀顯示樣式。
• CSS 讓我們的網頁更加豐富多彩，布局更加靈活自如。簡單理解：CSS 可以美化 HTML , 讓 HTML 更漂亮， 讓頁面布局更簡單。
• CSS 最大價值: 由 HTML 專注去做結構呈現，樣式交給 CSS，即 結構 ( HTML ) 與樣式( CSS ) 相分離

二、css語法規范

• 使用 HTML 時，需要遵從一定的規范，CSS 也是如此。要想熟練地使用 CSS 對網頁進行修飾，首先需要了解CSS 樣式規則。
• CSS 規則由兩個主要的部分構成：選擇器以及一條或多條聲明。

選擇器是用于指定 CSS 樣式的 HTML 標簽，花括號內是對該對象設置的具體樣式

屬性和屬性值以“鍵值對”的形式出現

屬性是對指定的對象設置的樣式屬性，例如字體大小、文本顏色等

屬性和屬性值之間用英文“:”分開

多個“鍵值對”之間用英文“;”進行區分
例如：
所有的樣式，都包含在

三、css代碼風格

1. 樣式格式書寫- 緊湊格式 h3 { color: deeppink;font-size: 20px;}- 展開格式 h3 {color: pink;font-size: 20px; }強烈推薦第二種格式， 因為更直觀。

樣式大小寫風格

• 小寫格式
  h3 {
  color: pink;
  }
• 大寫格式
  H3 {
  COLOR: PINK;

強烈推薦樣式選擇器，屬性名，屬性值關鍵字全部使用小寫字母，特殊情況除外。

樣式空格風格

• h3 {
  color: pink;
  }

屬性值前面，冒號后面，保留一個空格
選擇器（標簽）和大括號中間保留空格

四、css選擇器的作用

答：選擇器(選擇符)就是根據不同需求把不同的標簽選出來這就是選擇器的作用。 簡單來說，就是選擇標簽用的。

五、css基礎選擇器

基礎選擇器又包括：標簽選擇器、類選擇器、id 選擇器和通配符選擇器

1、標簽選擇器：

標簽選擇器（元素選擇器）是指用 HTML 標簽名稱作為選擇器，按標簽名稱分類，為頁面中某一類標簽指定統一的 CSS 樣式。
語法：
標簽選擇器{
屬性：屬性值
…
}
作用：
標簽選擇器（元素選擇器）是指用 HTML 標簽名稱作為選擇器，按標簽名稱分類，為頁面中某一類標簽指定統一的 CSS 樣式。

2、類選擇器

如果想要差異化選擇不同的標簽，單獨選一個或者某幾個標簽，可以使用類選擇器.
語法：
.類名 {
屬性1: 屬性值1;
…
}
結構需要用class屬性來調用 class 類的意思

<div class="類名"> 變紅色 </div>

如果想要差異化選擇不同的標簽，單獨選一個或者某幾個標簽，可以使用類選擇器。

類選擇器在 HTML 中以 class 屬性表示，在 CSS 中，類選擇器以一個點“.”號顯示。

類選擇器使用“.”（英文點號）進行標識，后面緊跟類名（自定義，我們自己命名的）。

可以理解為給這個標簽起了一個名字，來表示。

長名稱或詞組可以使用中橫線來為選擇器命名。

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

命名要有意義，盡量使別人一眼就知道這個類名的目的。

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

3、多類名選擇器

我們可以給一個標簽指定多個類名，從而達到更多的選擇目的。 這些類名都可以選出這個標簽.
簡單理解就是一個標簽有多個名字.

多類名的具體使用：
1.

亞瑟

注意：
1.在標簽class 屬性中寫 多個類名
2.多個類名中間必須用空格分開
3.這個標簽就可以分別具有這些類名的樣式

4、id選擇器：

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
HTML 元素以 id 屬性來設置 id 選擇器，CSS 中 id 選擇器以“#" 來定義。
語法：
#id名 {
屬性1: 屬性值1;
…
}
注意：id 屬性只能在每個 HTML 文檔中出現一次

5、id選擇器和類選擇器的區別

類選擇器（class）好比人的名字，一個人可以有多個名字，同時一個名字也可以被多個人使用。

id 選擇器好比人的身份證號碼，全中國是唯一的，不得重復。

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

類選擇器在修改樣式中用的最多，id 選擇器一般用于頁面唯一性的元素上，經常和 JavaScript 搭配使用。

6、通配符選擇器

語法：
* {
屬性1: 屬性值1;
…
}
通配符選擇器不需要調用， 自動就給所有的元素使用樣式
特殊情況才使用，后面講解使用場景(以下是清除所有的元素標簽的內外邊距,后期講)

* {margin: 0;padding: 0; }

7、選擇器總結

六、css字體屬性:

1、字體大小：

CSS 使用 font-size 屬性定義字體大小。
語法：
p {
font-size: 20px;
}
1.px（像素）大小是我們網頁的最常用的單位
2.谷歌瀏覽器默認的文字大小為16px
3.不同瀏覽器可能默認顯示的字號大小不一致，我們盡量給一個明確值大小，不要默認大小
4.可以給 body 指定整個頁面文字的大小

2、字體粗細：

CSS 使用 font-weight 屬性設置文本字體的粗細。
語法：
p {
font-weight: bold;
}

1.學會讓加粗標簽（比如 h 和 strong 等) 不加粗，或者其他標簽加粗
2.實際開發時，我們更喜歡用數字表示粗細

3、字體樣式：

CSS 使用 font-style 屬性設置文本的風格。
語法：
p {
font-style: normal;
}

4、字體的綜合寫法

字體屬性可以把以上文字樣式綜合來寫, 這樣可以更節約代碼:

body { font: font-style font-weight font-size/line-height font-family;}

使用 font 屬性時，必須按上面語法格式中的順序書寫，不能更換順序，并且各個屬性間以空格隔開 不需要設置的屬性可以省略（取默認值），但必須保留 font-size 和 font-family 屬性，否則 font 屬性將不起作用

5、字體總結：

七、css文本屬性：

1、文本顏色：

color 屬性用于定義文本的顏色。
語法：
div {
color: red;
}

開發中最常用的是十六進制

2、文本對齊：

text-align 屬性用于設置元素內文本內容的水平對齊方式。
語法：
div {
text-align: center;
}

3、修飾文本：

語法：
div {
text-decoration：underline；
}

重點記住如何添加下劃線 如何刪除下劃線 其余了解即可.

4、文本縮進

語法：
div {
text-indent：20px；
}
div {
text-indent：2em；
}

em 是一個相對單位，就是當前元素（font-size) 1 個文字的大小, 如果當前元素沒有設置大小，則會按照父元素的 1 個文字大小。

5、行間距：

line-height 屬性用于設置行間的距離（行高）。可以控制文字行與行之間的距離
語法：
p {
line-height: 26px;
}
行高的文本分為 上間距 文本高度 下間距 = 行間距

八、css樣式表：

按照 CSS 樣式書寫的位置（或者引入的方式），CSS 樣式表可以分為三大類：

1、行內樣式表（行內式）

行內樣式表（內聯樣式表）是在元素標簽內部的 style 屬性中設定 CSS 樣式。適合于修改簡單樣式.
語法：

青春不常在，抓緊談戀愛

1.style 其實就是標簽的屬性
在雙引號中間，寫法要符合 CSS 規范
2.可以控制當前的標簽設置樣式
3.由于書寫繁瑣，并且沒有體現出結構與樣式相分離的思想，所以不推薦大量使用，只有對當前元素添加簡單樣式的時候，可以考慮使用
4.使用行內樣式表設定 CSS，通常也被稱為行內式引入

2、內部樣式表（嵌入式）

內部樣式表（內嵌樣式表）是寫到html頁面內部. 是將所有的 CSS 代碼抽取出來，單獨放到一個
1.

3、外部樣式表（鏈接式）

實際開發都是外部樣式表. 適合于樣式比較多的情況. 核心是:樣式單獨寫到CSS 文件中，之后把CSS文件引入到 HTML 頁面中使用.
引入外部樣式表分為兩步：
1. 新建一個后綴名為 .css 的樣式文件，把所有 CSS 代碼都放入此文件中。
2. 在 HTML 頁面中，使用 標簽引入這個文件。
語法：

九、Chrome調試工具：

1.Ctrl+滾輪 可以放大開發者工具代碼大小。
2.左邊是 HTML 元素結構，右邊是 CSS 樣式。
3.右邊 CSS 樣式可以改動數值（左右箭頭或者直接輸入）和查看顏色。
4.Ctrl + 0 復原瀏覽器大小。
5.如果點擊元素，發現右側沒有樣式引入，極有可能是類名或者樣式引入錯誤。
6.如果有樣式，但是樣式前面有黃色嘆號提示，則是樣式屬性書寫錯誤。

CSS第二天

一、emmet語法

1、簡介

Emmet語法的前身是Zen coding,它使用縮寫,來提高html/css的編寫速度, Vscode內部已經集成該語法。

快速生成HTML結構語法

快速生成CSS樣式語法

2、快速生成HTML結構語法

• 生成標簽 直接輸入標簽名 按tab鍵即可 比如 div 然后tab 鍵， 就可以生成

• 如果想要生成多個相同標簽 加上 * 就可以了 比如 div*3 就可以快速生成3個div

• 如果有父子級關系的標簽，可以用 > 比如 ul > li就可以了

• 如果有兄弟關系的標簽，用 + 就可以了 比如 div+p

• 如果生成帶有類名或者id名字的， 直接寫 .demo 或者 #two tab 鍵就可以了

• 如果生成的div 類名是有順序的， 可以用 自增符號 $

• 如果想要在生成的標簽內部寫內容可以用 { } 表示

3、快速生成CSS樣式語法

CSS 基本采取簡寫形式即可

比如 w200 按tab 可以 生成 width: 200px;

比如 lh26px 按tab 可以生成 line-height: 26px;

4、快速格式化代碼

Vscode 快速格式化代碼: shift+alt+f

也可以設置 當我們 保存頁面的時候自動格式化代碼:

1）文件 ------.>【首選項】---------->【設置】；

2）搜索emmet.include;

3）在settings.json下的【工作區設置】中添加以下語句：

“editor.formatOnType”: true,

“editor.formatOnSave”: true

二、css的復合選擇器

1、什么是復合選擇器？

在 CSS 中，可以根據選擇器的類型把選擇器分為***基礎選擇器***和***復合選擇器***，復合選擇器是建立在基礎選擇器之上，對基本選擇器進行組合形成的。
復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的，可以更準確、更高效的選擇目標元素（標簽）
常用的復合選擇器包括：后代選擇器、子選擇器、并集選擇器、偽類選擇器等等

2、后代選擇器 (重要）

定義：

后代選擇器又稱為包含選擇器，可以選擇父元素里面子元素。其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔。當標簽發生嵌套時，內層標簽就成為外層標簽的后代。

語法：

上述語法表示選擇元素 1 里面的所有元素 2 (后代元素)。

語法說明：

• 元素1 和 元素2 中間用空格隔開
• 元素1 是父級，元素2 是子級，最終選擇的是元素2
• 元素2 可以是兒子，也可以是孫子等，只要是元素1 的后代即可
• 元素1 和 元素2 可以是任意基礎選擇器

例子：

3、子選擇器 (重要）

定義：

子元素選擇器（子選擇器）只能選擇作為某元素的最近一級子元素。

（簡單理解就是選親兒子元素）

語法：

上述語法表示選擇元素1 里面的所有直接后代(子元素) 元素2。

語法說明：

• 元素1 和 元素2 中間用 大于號 隔開
• 元素1 是父級，元素2 是子級，最終選擇的是元素2
• 元素2 必須是親兒子，其孫子、重孫之類都不歸他管. 你也可以叫他 親兒子選擇器

例子：

4、并集選擇器 (重要）

定義：

并集選擇器可以選擇多組標簽, 同時為他們定義相同的樣式，通常用于集體聲明。并集選擇器是各選擇器通過英文逗號（,）連接而成，任何形式的選擇器都可以作為并集選擇器的一部分。

語法：

上述語法表示選擇元素1 和 元素2。

語法說明：

• 元素1 和 元素2 中間用逗號隔開
• 逗號可以理解為和的意思
• 并集選擇器通常用于集體聲明

例子：

5、偽類選擇器

定義：

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

語法：

偽類選擇器書寫最大的特點是用冒號（:）表示，比如 :hover 、 :first-child 。

6、鏈接偽類選擇器

定義：

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

語法：

偽類選擇器書寫最大的特點是用冒號（:）表示，比如 :hover 、 :first-child 。

a:link 沒有點擊過的(訪問過的)鏈接
a:visited 點擊過的(訪問過的)鏈接
a:hover 鼠標經過的那個鏈接
a:active 鼠標正在按下還沒有彈起鼠標的那個鏈接

鏈接偽類選擇器注意事項

為了確保生效，請按照 LVHA 的循順序聲明 :link－:visited－:hover－:active。

記憶法：love hate 或者 lv 包包 hao 。

因為 a 鏈接在瀏覽器中具有默認樣式，所以我們實際工作中都需要給鏈接單獨指定樣式。

鏈接偽類選擇器實際工作開發中的寫法：

7、:focus 偽類選擇器

定義：

:focus 偽類選擇器用于選取獲得焦點的表單元素。

焦點就是光標，一般情況 類表單元素才能獲取

例子：

復合選擇器總結

三、css的顯示模式

1、什么是元素的顯示模式

定義：

元素顯示模式就是元素（標簽）以什么方式進行顯示，比如

自己占一行，比如一行可以放多個 。

作用：

網頁的標簽非常多，在不同地方會用到不同類型的標簽，了解他們的特點可以更好的布局我們的網頁。

2、元素顯示模式的分類

2.1、塊元素

常見的塊元素：

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

標簽是最典型的塊元素。

塊級元素的特點：

• 比較霸道，自己獨占一行。
• 高度，寬度、外邊距以及內邊距都可以控制。
• 寬度默認是容器（父級寬度）的100%。
• 是一個容器及盒子，里面可以放行內或者塊級元素。

注意：

文字類的元素內不能放塊級元素

<p> 標簽主要用于存放文字，因此 <p> 里面不能放塊級元素，特別是不能放<div> 同理， <h1>~<h6>等都是文字類塊級標簽，里面也不能放其他塊級元素

2.2、行內元素

常見的行內元素：

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

標簽是最典型的行內元素。有的地方也將行內元素稱為內聯元素。

行內元素的特點：

• 相鄰行內元素在一行上，一行可以顯示多個。

• 高、寬直接設置是無效的。

• 默認寬度就是它本身內容的寬度。

• 行內元素只能容納文本或其他行內元素。

注意：
鏈接里面不能再放鏈接
特殊情況鏈接 里面可以放塊級元素，但是給 轉換一下塊級模式最安全

2.3、行內塊元素

常見的行內塊標簽：

<img />、<input />、<td>

它們同時具有塊元素和行內元素的特點。有些資料稱它們為行內塊元素。

行內塊元素的特點：

• 和相鄰行內元素（行內塊）在一行上，但是他們之間會有空白縫隙。
• 一行可以顯示多個（行內元素特點）。
• 默認寬度就是它本身內容的寬度（行內元素特點）。
• 高度，行高、外邊距以及內邊距都可以控制（塊級元素特點）。

2.4、元素顯示模式總結

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Yii5jFWM-1637142589832)(https://gitee.com/baucd/could-images/raw/master/img/%E5%85%83%E7%B4%A0%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%BC%8F%E6%80%BB%E7%BB%93.png)]

學習元素顯示模式的主要目的就是分清它們各自的特點，當我們網頁布局的時候，在合適的地方用合適的標簽元素。

3、元素顯示模式的轉換

簡單理解:

一個模式的元素需要另外一種模式的特性
比如想要增加鏈接 的觸發范圍。

轉換方式

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

4、單行文字垂直居中的代碼

解決方案:

讓文字的行高等于盒子的高度 就可以讓文字在當前盒子內垂直居中

簡單理解:

行高的上空隙和下空隙把文字擠到中間了，

如果行高小于盒子高度,文字會偏上，

如果行高大于盒子高度,則文字偏下。

四、css的背景

通過 CSS 背景屬性，可以給頁面元素添加背景樣式。
背景屬性可以設置背景顏色、背景圖片、背景平鋪、背景圖片位置、背景圖像固定等。

1、背景顏色

樣式名稱：

background-color 定義元素的背景顏色

使用方式：

其他說明：

元素背景顏色默認值是 transparent（透明）

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-H0dB00zm-1637142589836)(images/1570886176292.png)]

2、背景圖片

樣式名稱：

background-image 定義元素的背景圖片

使用方式：

其他說明：

實際開發常見于 logo 或者一些裝飾性的小圖片或者是超大的背景圖片, 優點是非常便于控制位置. (精靈圖也是一種運用場景)

注意：背景圖片后面的地址，千萬不要忘記加 URL， 同時里面的路徑不要加引號。

3、背景平鋪

樣式名稱：

background-repeat 設置元素背景圖像的平鋪

使用方式：

4、背景圖片位置

樣式名稱：

background-position 屬性可以改變圖片在背景中的位置

使用方式：

參數代表的意思是：x 坐標和 y 坐標。 可以使用 方位名詞 或者 精確單位

其他說明：

1、參數是方位名詞

如果指定的兩個值都是方位名詞，則兩個值前后順序無關，比如 left top 和 top left 效果一致

如果只指定了一個方位名詞，另一個值省略，則第二個值默認居中對齊

2、參數是精確單位

如果參數值是精確坐標，那么第一個肯定是 x 坐標，第二個一定是 y 坐標

如果只指定一個數值，那該數值一定是 x 坐標，另一個默認垂直居中

3、參數是混合單位

如果指定的兩個值是精確單位和方位名詞混合使用，則第一個值是 x 坐標，第二個值是 y 坐標

5、背景圖片固定

樣式名稱：

background-attachment 屬性設置背景圖像是否固定或者隨著頁面的其余部分滾動。

使用方式：

其他說明：

background-attachment 后期可以制作視差滾動的效果。

6、背景樣式合寫

背景合寫樣式：

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

使用方式：

7、背景色半透明

CSS3 提供了背景顏色半透明的效果。

使用方式：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-VUQqYOcx-1637142589845)(images/1570887978061.png)]

• 最后一個參數是 alpha 透明度，取值范圍在 0~1之間
• 前面三個參數為顏色，(0,0,0)為黑色
• 我們習慣把 0.3 的 0 省略掉，寫為 background: rgba(0, 0, 0, .3);

注意：

• 背景半透明是指盒子背景半透明，盒子里面的內容不受影響
• CSS3 新增屬性，是 IE9+ 版本瀏覽器才支持的，但是現在實際開發,我們不太關注兼容性寫法了,可以放心使用

8、背景總結

• 背景位置background-position重點

CSS第三天

一、css三大特性

1、層疊性

相同選擇器給設置相同的樣式，此時一個樣式就會覆蓋（層疊）另一個沖突的樣式。層疊性主要解決樣式沖突的問題

層疊性原則:

• 樣式沖突，遵循的原則是就近原則，哪個樣式離結構近，就執行哪個樣式
• 樣式不沖突，不會層疊

2、繼承性

CSS中的繼承: 子標簽會繼承父標簽的某些樣式，如文本顏色和字號。恰當地使用繼承可以簡化代碼，降低 CSS 樣式的復雜性。

子元素可以繼承父元素的樣式：

（text-，font-，line-這些元素開頭的可以繼承，以及color屬性）

繼承性口訣：龍生龍，鳳生鳳，老鼠生的孩子會打洞

行高的繼承性：

body {font:12px/1.5 Microsoft YaHei；}

• 行高可以跟單位也可以不跟單位
• 如果子元素沒有設置行高，則會繼承父元素的行高為 1.5
• 此時子元素的行高是：當前子元素的文字大小font-side * 1.5
• body 行高 1.5 這樣寫法最大的優勢就是里面子元素可以根據自己文字大小自動調整行高

3、優先級

當同一個元素指定多個選擇器，就會有優先級的產生。

• 選擇器相同，則執行層疊性
• 選擇器不同，則根據選擇器權重執行

選擇器優先級計算表格：

優先級注意點:

權重是有4組數字組成,但是不會有進位。

可以理解為類選擇器永遠大于元素選擇器, id選擇器永遠大于類選擇器,以此類推…

等級判斷從左向右，如果某一位數值相同，則判斷下一位數值。

可以簡單記憶法: 通配符和繼承權重為0, 標簽選擇器為1,類(偽類)選擇器為 10, id選擇器 100, 行內樣式表為 1000, !important 無窮大.

繼承的權重是0， 如果該元素沒有直接選中，不管父元素權重多高，子元素得到的權重都是 0。

3.1、權重疊加（重點）

如果是復合選擇器，則會有權重疊加，需要計算權重。

• 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

二、盒子模型

1、網頁布局的本質

網頁布局的核心本質： 就是利用 CSS 擺盒子。

1.1、網頁布局過程

先準備好相關的網頁元素，網頁元素基本都是盒子 Box 。

利用 CSS 設置好盒子樣式，然后擺放到相應位置。

往盒子里面裝內容

1.2、網頁布局三大核心

• 盒子模型
• 浮動
• 定位

2、盒子模型（Box Model）組成

盒子模型：把 HTML 頁面中的布局元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。

CSS 盒子模型本質上是一個盒子，封裝周圍的 HTML 元素，它包括：邊框、外邊距、內邊距、和 實際內容

3、邊框（border）

3.1、邊框的使用

1、border可以設置元素的邊框。邊框有三部分組成：邊框寬度(粗細) 邊框樣式 邊框顏色；

2、語法：

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

邊框樣式 border-style 可以設置如下值：

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

3、邊框的合寫分寫

邊框簡寫：

border: 1px solid red;

邊框分開寫法：

border-top: 1px solid red; /* 只設定上邊框， 其余同理 */

3.2、表格的細線邊框

1、border-collapse 屬性控制瀏覽器繪制表格邊框的方式。它控制相鄰單元格的邊框。

2、語法：

border-collapse:collapse;

collapse 單詞是合并的意思

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

3.3、邊框會影響盒子實際大小

邊框會額外增加盒子的實際大小。因此我們有兩種方案解決：

• 測量盒子大小的時候,不量邊框。
• 如果測量的時候包含了邊框,則需要 width/height 減去邊框寬度

4、內邊距（padding）

4.1、內邊距的使用方式

1、padding 屬性用于設置內邊距，即邊框與內容之間的距離。

2、語法：

合寫屬性：

分寫屬性：

4.2、內邊距會影響盒子實際大小

1、當我們給盒子指定 padding 值之后，發生了 2 件事情：

內容和邊框有了距離，添加了內邊距。

padding影響了盒子實際大小。

2、內邊距對盒子大小的影響：

• 如果盒子已經有了寬度和高度，此時再指定內邊框，會撐大盒子。
• 如何盒子本身沒有指定width/height屬性, 則此時padding不會撐開盒子大小。

3、解決方案：

如果保證盒子跟效果圖大小保持一致，則讓 width/height 減去多出來的內邊距大小即可。

5、外邊距（margin）

5.1、外邊距的使用方式

margin 屬性用于設置外邊距，即控制盒子和盒子之間的距離。

5.2、外邊距典型應用

外邊距可以讓塊級盒子水平居中的兩個條件：

• 盒子必須指定了寬度（width）。
• 盒子左右的外邊距都設置為 auto 。

常見的寫法，以下三種都可以：

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

注意：以上方法是讓塊級元素水平居中，行內元素或者行內塊元素水平居中給其父元素添加 text-align:center 即可。

5.3、外邊距合并

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

主要有兩種情況:

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

當上下相鄰的兩個塊元素（兄弟關系）相遇時，如果上面的元素有下外邊距 margin-bottom，下面的元素有上外邊距 margin-top ，則他們之間的垂直間距不是 margin-bottom 與 margin-top 之和。取兩個值中的較大者這種現象被稱為相鄰塊元素垂直外邊距的合并。

解決方案：
盡量只給一個盒子添加 margin 值。

2、嵌套塊元素垂直外邊距的塌陷

對于兩個嵌套關系（父子關系）的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距值。

解決方案：

• 可以為父元素定義上邊框。
• 可以為父元素定義上內邊距。
• 可以為父元素添加 overflow:hidden。

5.4、清除內外邊距

網頁元素很多都帶有默認的內外邊距，而且不同瀏覽器默認的也不一致。因此我們在布局前，首先要清除下網頁元素的內外邊距。

* {padding:0; /* 清除內邊距 */margin:0; /* 清除外邊距 */}

注意：行內元素為了照顧兼容性，盡量只設置左右內外邊距，不要設置上下內外邊距。但是轉換為塊級和行內塊元素就可以了

三、PS 基本操作

因為網頁美工大部分效果圖都是利用 PS（Photoshop）來做的，所以以后我們大部分切圖工作都是在 PS 里面完成。

部分操作：

• 文件→打開 ：可以打開我們要測量的圖片
• Ctrl+R：可以打開標尺，或者 視圖→標尺
• 右擊標尺，把里面的單位改為像素
• Ctrl+ 加號(+)可以放大視圖， Ctrl+ 減號(-)可以縮小視圖
• 按住空格鍵，鼠標可以變成小手，拖動 PS 視圖
• 用選區拖動 可以測量大小
• Ctrl+ D 可以取消選區，或者在旁邊空白處點擊一下也可以取消選區

CSS第四天

一、其他樣式

1、圓角邊框

在 CSS3 中，新增了圓角邊框樣式，這樣我們的盒子就可以變圓角了。

border-radius 屬性用于設置元素的外邊框圓角。

語法：

border-radius:length;

• 參數值可以為數值或百分比的形式
• 如果是正方形，想要設置為一個圓，把數值修改為高度或者寬度的一半即可，或者直接寫為 50%
• 該屬性是一個簡寫屬性，可以跟四個值，分別代表左上角、右上角、右下角、左下角
• 兩個值：對角線
• 分開寫：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius
• 兼容性 ie9+ 瀏覽器支持, 但是不會影響頁面布局,可以放心使用

2、盒子陰影

CSS3 中新增了盒子陰影，我們可以使用 box-shadow 屬性為盒子添加陰影。
語法：

box-shadow: h-shadow v-shadow blur spread color inset;

注意：

• 默認的是外陰影（outside），但是不可以寫這個單詞，否則導致陰影無效
• 盒子陰影不占用空間，不會影響其他盒子排列

3、文字陰影

在 CSS3 中，我們可以使用 text-shadow 屬性將陰影應用于文本。
語法：

text-shadow: h-shadow v-shadow blur color;

二、浮動

1、傳統網頁布局的三種方式

CSS 提供了三種傳統布局方式(簡單說,就是盒子如何進行排列順序)：

• 普通流（標準流）

• 浮動

• 定位

  這三種布局方式都是用來擺放盒子的，盒子擺放到合適位置，布局自然就完成了。

注意：實際開發中，一個頁面基本都包含了這三種布局方式（后面移動端學習新的布局方式） 。

2、標準流（普通流/文檔流）

所謂的標準流: 就是標簽按照規定好默認方式排列

塊級元素會獨占一行，從上向下順序排列。

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

行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。

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

以上都是標準流布局，我們前面學習的就是標準流，標準流是最基本的布局方式。

3、為什么需要浮動？

總結： 有很多的布局效果，標準流沒有辦法完成，此時就可以利用浮動完成布局。 因為浮動可以改變元素標簽默認的排列方式.

浮動最典型的應用：可以讓多個塊級元素一行內排列顯示。

網頁布局第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動。

4、什么是浮動？

float 屬性用于創建浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣。

語法：

選擇器 { float: 屬性值; }

5、浮動特性

加了浮動之后的元素,會具有很多特性,需要我們掌握的.

1、浮動元素會脫離標準流(脫標：浮動的盒子不再保留原先的位置)

2、浮動的元素會一行內顯示并且元素頂部對齊

注意：

浮動的元素是互相貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊。

3、浮動的元素會具有行內塊元素的特性

浮動元素的大小根據內容來決定

浮動的盒子中間是沒有縫隙的

6、浮動元素經常和標準流父級搭配使用

為了約束浮動元素位置, 我們網頁布局一般采取的策略是:

先用標準流父元素排列上下位置, 之后內部子元素采取浮動排列左右位置. 符合網頁布局第一準側

三、常見網頁布局

浮動布局注意點

1、浮動和標準流的父盒子搭配。

先用標準流的父元素排列上下位置, 之后內部子元素采取浮動排列左右位置

2、一個元素浮動了，理論上其余的兄弟元素也要浮動。

一個盒子里面有多個子盒子，如果其中一個盒子浮動了，其他兄弟也應該浮動，以防止引起問題。

浮動的盒子只會影響浮動盒子后面的標準流,不會影響前面的標準流.

四、清除浮動

1、為什么需要清除浮動？

由于父級盒子很多情況下，不方便給高度，但是子盒子浮動又不占有位置，最后父級盒子高度為 0 時，就會影響下面的標準流盒子。

2、清除浮動本質

清除浮動的本質是清除浮動元素造成的影響：浮動的子標簽無法撐開父盒子的高度

注意：

• 如果父盒子本身有高度，則不需要清除浮動
• 清除浮動之后，父級就會根據浮動的子盒子自動檢測高度。
• 父級有了高度，就不會影響下面的標準流了

3、清除浮動樣式

語法：

選擇器{clear:屬性值;}

我們實際工作中， 幾乎只用 clear: both;

清除浮動的策略是: 閉合浮動.

4、清除浮動的多種方式

4.1、額外標簽法

額外標簽法也稱為隔墻法，是 W3C 推薦的做法。

使用方式：

額外標簽法會在浮動元素末尾添加一個空的標簽。

例如 <div style="clear:both"></div>，或者其他標簽（如<br />等）。

優點： 通俗易懂，書寫方便

缺點： 添加許多無意義的標簽，結構化較差

注意： 要求這個新的空標簽必須是塊級元素。

總結:

1、清除浮動本質是

清除浮動的本質是清除浮動元素脫離標準流造成的影響

2、清除浮動策略是

閉合浮動. 只讓浮動在父盒子內部影響,不影響父盒子外面的其他盒子.

3、額外標簽法

隔墻法, 就是在最后一個浮動的子元素后面添

4、加一個額外標簽, 添加 清除浮動樣式.

實際工作可能會遇到,但是不常用

4.2、父級添加 overflow 屬性

可以給父級添加 overflow 屬性，將其屬性值設置為 hidden、 auto 或 scroll 。

例如：

overflow:hidden | auto | scroll;

優點：代碼簡潔

缺點：無法顯示溢出的部分

注意：是給父元素添加代碼

4.3、父級添加after偽元素

:after 方式是額外標簽法的升級版。給父元素添加：

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

優點：沒有增加標簽，結構更簡單

缺點：照顧低版本瀏覽器

代表網站： 百度、淘寶網、網易等

4.4、父級添加雙偽元素

給父元素添加

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

優點：代碼更簡潔

缺點：照顧低版本瀏覽器

代表網站：小米、騰訊等

總結

為什么需要清除浮動？

父級沒高度。

子盒子浮動了。

影響下面布局了，我們就應該清除浮動了。

五、PS 切圖

1、圖層切圖

最簡單的切圖方式：右擊圖層 → 導出 → 切片。

2、切片切圖

2.1、利用切片選中圖片

利用切片工具手動劃出

2.2、導出選中的圖片

文件菜單 → 存儲為 web 設備所用格式 → 選擇我們要的圖片格式 → 存儲 。

3、PS插件切圖

Cutterman 是一款運行在 Photoshop 中的插件，能夠自動將你需要的圖層進行輸出，以替代傳統的手工 “導出 web 所用格式” 以及使用切片工具進行挨個切圖的繁瑣流程。

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

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

CSS第五天

學習目標：

了解 PS切圖

掌握 CSS屬性書寫順序

掌握 學成在線案例

1. PS 切圖

1.1. 常見的圖片格式

序號

格式

特點和常用的用途

1

jpg

JPEG（.JPG）對色彩的信息保留較好，高清，顏色較多，我們產品類的圖片 經常用jpg格式的

2

gif

GIF格式最多只能儲存256色，所以通常用來顯示簡單圖形及字體，但是可以保存透明背景和動畫效果, 實際 經常用于一些圖片小動畫效果

3

png

png圖像格式，是一種新興的網絡圖形格式，結合了GIF和JPEG的優點，具有存儲形式豐富的特點，能夠保持透明背景. 如果想要切成 背景透明的圖片 ,請選擇png格式.

4

psd

PSD圖像格式，Photoshop的專用格式，里面可以存放圖層、通道、遮罩等多種設計稿. 對我們前端人員來說,最大的優點,我們可以直接從上面復制文字,獲得圖片,還可以測量大小和距離.

PS 有很多的切圖方式：圖層切圖、切片切圖、PS 插件切圖等。

1.2. 圖層切圖

簡單版步驟：

① 使用移動工具，點擊需要的圖片

② 查看右側，找到圖片對應的圖層，右擊圖層 → 快速導出為 PNG

但是很多情況下,我們需要合并圖層再導出:

步驟：

① 選中需要的若干個圖層：選擇一個圖層，再按住shift鍵，繼續選第二個圖層:

② 圖層菜單 → 合并圖層(ctrl+e)

③ 查看右側生成的新圖層，在合并后的圖層上，右擊 → 快速導出為 PNG

1.3. 切片切圖

步驟：

① 利用切片選中圖片 ：利用切片工具手動劃出

② 導出選中的圖片：文件菜單 → 導出 → 存儲為 web 設備所用格式 → 選擇我們要的圖片格式 → 存儲 。

注意：保存的時候，要選“選中的切片”：

1.4. 插件切圖

1.4.1. 介紹

Cutterman是一款運行在photoshop中的插件，能夠自動將你需要的圖層進行輸出， 以替代傳統的手工 “導出web所用格式” 以及使用切片工具進行挨個切圖的繁瑣流程。

它支持各種各樣的圖片尺寸、格式、形態輸出，方便你在pc、ios、Android等端上使用。 它不需要你記住一堆的語法、規則，純點擊操作，方便、快捷，易于上手。

1.4.2. 安裝

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

查看 “窗口菜單”里面的“擴展功能”：

① 如果是擴展功能的是灰色的，表示就是綠色版的，需要重新安裝PS

② 如果是擴展功能右側是可以使用的，表示就是完整版的，可以安裝cutterman插件快速切圖

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

當cutterman 安裝完成后，重啟PS，會發現擴展功能里面多了一個cutterman工具：

1.4.3 使用步驟

① 選擇需要的圖層

② 選擇web端，點擊web下面的下拉三角

③ 選擇需要的圖片格式

④ 設置好存儲路徑

⑤ 點擊 “導出選中圖層” 按鈕

示意圖：

2. CSS屬性書寫順序（重點）

生活中衡量一個人有氣質：

穿著打扮 舉止言行 等等

編程中如何衡量一個人的代碼能力：

規范標準 優雅高質量 等等 一個詞形容 專業 從代碼中看出是否有經驗…

建議遵循以下順序：

布局定位屬性：display / position / float / clear / visibility / overflow（建議 display 第一個寫，畢竟關系到模式）

自身屬性：width / height / margin / padding / border / background

文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word

其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

舉例：

.jdc {display: block;position: relative;float: left;width: 100px;height: 100px;margin: 0 10px;padding: 20px 0;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;color: #333;background: rgba(0,0,0,.5);border-radius: 10px;}

3. 學成在線頁面制作

頁面展示：

學成在線，是典型的企業級網站。

學習學成網的目的，是為了整體感知企業級網站布局流程，帶著大家復習以前的知識。

3.1. 前期準備素材

• 學成在線PSD源文件
• 開發工具 = PS（切圖） + sublime（代碼） + chrome（測試）

3.2. 前期準備工作

先把我們的前期準備工作做好， 我們本次采取結構與樣式相分離思想。

創建 study 目錄文件夾 (用于存放我們這個頁面的相關內容)。

用vscode打開study目錄文件夾.

study 目錄內新建 images 文件夾，用于保存圖片。

新建首頁文件 index.html（以后我們的網站首頁統一命名規定為 index.html )。

新建 style.css 樣式文件。我們本次采用外鏈樣式表。

將樣式引入到我們的 HTML 頁面文件中。

樣式表寫入清除內外邊距的樣式，來檢測樣式表是否引入成功。

3.3. 頁面布局整體思路

為了提高網頁制作的效率，布局時通常有以下的整體思路，具體如下：

1.必須確定頁面的版心（可視區），我們測量可得知。

2.分析頁面中的行模塊，以及每個行模塊中的列模塊。其實頁面布局第一準則.

3.一行中的列模塊經常浮動布局, 先確定每個列的大小,之后確定列的位置. 頁面布局第二準則

4.制作 HTML 結構。我們還是遵循，先有結構，后有樣式的原則。結構永遠最重要.

5.所以, 先理清楚布局結構,再寫代碼尤為重要. 這需要我們多寫多積累.

3.4. 頁面制作

確定版心（可視區）：

這個頁面的版心是 1200像素 ，每個版心都要水平居中對齊，所以，我們可以定義版心為公共類：

.w {width: 1200px;margin: auto; }

分析頁面中的行模塊，以及每個行模塊中的列模塊。頁面布局第一準則。

一行中的列模塊經常浮動布局，先確定每個列的大小，之后確定列的位置。頁面布局第二準則。

制作HTML結構，遵循先有結構，后有樣式的原之。布局結構永遠最重要

3.4.1. header頭部制作

結構圖如下：

• 1號是版心盒子 header 1200 * 42 的盒子水平居中對齊, 上下給一個margin值就好了。
• 版心盒子 里面包含 2號盒子 logo 圖標
• 版心盒子 里面包含 3號盒子 nav 導航欄
• 版心盒子 里面包含 4號盒子 search 搜索框
• 版心盒子 里面包含 5號盒子 user 個人信息
• 注意，要求里面的 4個子盒子 必須都浮動

導航欄注意點:

實際開發中，重要的導航欄，我們不會直接用鏈接a ，而是用 li 包含鏈接(li+a)的做法

1.li+a 語義更清晰，一看這就是有條理的列表型內容。

2.如果直接用a，搜索引擎容易辨別為有堆砌關鍵字嫌疑（故意堆砌關鍵字容易被搜索引擎有降權的風險），從而影響網站排名

注意:

1.讓導航欄一行顯示, 給 li 加浮動, 因為 li 是塊級元素, 需要一行顯示.

2.這個nav導航欄可以不給寬度,將來可以繼續添加其余文字

3.因為導航欄里面文字不一樣多,所以最好給鏈接 a 左右padding 撐開盒子,而不是指定寬度

4號盒子search的細節：

search 搜索框的意思: 一個 search 大盒子里面包含 2個 表單

技巧：input和button都，屬于行內塊元素，會有縫隙，使用浮動，可以去縫隙。

3.4.2. banner制作

結構圖如下：

• 1號盒子是通欄的大盒子banner， 不給寬度，給高度，給一個藍色背景。
• 2號盒子是版心 w， 要水平居中對齊。
• 3號盒子版心內，左對齊 subnav 側導航欄。
• 4號盒子版心內，右對齊 course 課程。

3.4.2.1 subnav 側導航欄 (左側的)

• subnav 盒子 背景色 黑色半透明
• 重要的導航欄，li 包 a ，行高45px
• a里面包含文字和span，span右浮動
• 當鼠標經過a ，a里面的內容（文字和span）變藍色

3.4.2.2 course課程表模塊 (右側的)

結構圖如下：

• 1號盒子 是 228 * 300 的盒子 右浮動 注意 浮動的元素 不會有外邊距塌陷的問題
• 1號盒子內 分為 上下 兩個 子盒子
• 2號子盒子是 上部分 我們命名為 course-hd (hd 是 head 的簡寫 頭部的意思，我們經常用)
• 3號子盒子是 下部分 我們命名為 course-bd (bd 是 body 的簡寫 主體的意思，我們經常用)

3.4.3. 精品推薦小模塊

結構圖如下：

• 復習點： 因為里面三個盒子都要垂直居中，我們利用 繼承性，給 最大的盒子 一個垂直居中的代碼就好了，還記得 那些 樣式可以繼承嗎？？？ font- line- text- color

• 大盒子水平居中 goods 精品 ，注意此處有個盒子陰影

• 1號盒子是標題 H3 左側浮動

• 2號盒子 里面放鏈接 左側浮動 goods-item 距離可以控制鏈接的 左右外邊距（注意行內元素只給左右內外邊距）

• 3號盒子 右浮動 mod 修改

3.4.4. 精品推薦大模塊

結構圖如下：

• 1號盒子為最大的盒子 box 版心水平居中對齊
• 2號盒子為上面部分 box-hd – 里面 左側標題H3 左浮動 右側 鏈接 a 右浮動
• 3號盒子為底下部分 box-bd — 里面是無序列表 有 10個 小li 組成
• 小li 外邊距的問題， 這里有個小技巧。 給box-hd 寬度為 1215 就可以一行裝開5個 li了
• 復習點：我們用到清除浮動，因為 box-hd 里面的盒子個數不一定是多少，所以我們就不給高度了，但是里面的盒子浮動會影響下面的布局，因此需要清除浮動。

3.4.5. 底部模塊制作

結構圖如下：

• 1號盒子通欄大盒子 底部 footer 給高度 底色是白色

• 2號盒子版心水平居中

• 3號盒子版權 copyright 左對齊

• 4號盒子 鏈接組 links 右對齊

CSS第六天

今日目標

• 能夠說出 為什么要用定位
• 能夠說出 定位的 4 種分類
• 能夠說出 4 種定位各自的特點
• 能夠說出 為什么常用子絕父相布局
• 能夠寫出 淘寶輪播圖布局
• 能夠說出 顯示隱藏的 3 種方式以及區別

1. 定位(position) 介紹

1.1 為什么使用定位

我們先來看一個效果，同時思考一下用標準流或浮動能否實現類似的效果？

場景1： 某個元素可以自由的在一個盒子內移動位置，并且壓住其他盒子.

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-gFPsmDTx-1646613742719)(https://gitee.com/baucd/could-images/raw/master/img/01_%E5%AE%9A%E4%BD%8Df%E7%A4%BA%E4%BE%8B1.gif)]

場景2：當我們滾動窗口的時候，盒子是固定屏幕某個位置的。

結論**：要實現以上效果，**標準流 或 浮動都無法快速實現

所以：

1.浮動可以讓多個塊級盒子一行沒有縫隙排列顯示， 經常用于橫向排列盒子。

2.定位則是可以讓盒子自由的在某個盒子內移動位置或者固定屏幕中某個位置，并且可以壓住其他盒子。

1.2 定位組成

定位：將盒子定在某一個位置，所以定位也是在擺放盒子， 按照定位的方式移動盒子

定位也是用來布局的，它有兩部分組成：

定位 = 定位模式 + 邊偏移

定位模式 用于指定一個元素在文檔中的定位方式。邊偏移則決定了該元素的最終位置。

1.2.1 邊偏移（方位名詞）

邊偏移 就是定位的盒子移動到最終位置。有 top、bottom、left 和 right 4 個屬性。

邊偏移屬性

示例

描述

top

top: 80px

頂端偏移量，定義元素相對于其父元素上邊線的距離。

bottom

bottom: 80px

底部偏移量，定義元素相對于其父元素下邊線的距離。

left

left: 80px

左側偏移量，定義元素相對于其父元素左邊線的距離。

right

right: 80px

右側偏移量，定義元素相對于其父元素右邊線的距離

定位的盒子有了邊偏移才有價值。 一般情況下，凡是有定位地方必定有邊偏移。

1.2.2 定位模式 (position)

在 CSS 中，通過 position 屬性定義元素的定位模式，語法如下：

選擇器 { position: 屬性值; }

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

定位模式決定元素的定位方式 ，它通過 CSS 的 position 屬性來設置，其值可以分為四個：

值

語義

static

靜態定位

relative

相對定位

absolute

絕對定位

fixed

固定定位

1.3 定位模式介紹

1.3.1. 靜態定位(static) - 了解

• 靜態定位是元素的默認定位方式，無定位的意思。它相當于 border 里面的none，靜態定位static，不要定位的時候用。

• 語法：

  選擇器 { position: static; }

• 靜態定位 按照標準流特性擺放位置，它沒有邊偏移。

• 靜態定位在布局時我們幾乎不用的

1.3.2. 相對定位(relative) - 重要

• 相對定位是元素在移動位置的時候，是相對于它自己原來的位置來說的（自戀型）。

• 語法：

  選擇器 {
  position: relative;
  }

• 相對定位的特點：（務必記住）

  • 1.它是相對于自己原來的位置來移動的（移動位置的時候參照點是自己原來的位置）。

  • 2.原來在標準流的位置繼續占有，后面的盒子仍然以標準流的方式對待它。

    因此，相對定位并沒有脫標。它最典型的應用是給絕對定位當爹的。。。

• 效果圖：

1.3.3. 絕對定位(absolute) - 重要

1.3.3.1 絕對定位的介紹

• 絕對定位是元素在移動位置的時候，是相對于它祖先元素來說的（拼爹型）。

• 語法：

  選擇器 { position: absolute; }

完全脫標 —— 完全不占位置；

父元素沒有定位，則以瀏覽器為準定位（Document 文檔）。

父元素要有定位

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

• 絕對定位的特點總結：（務必記住）

  1.如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為基準定位（Document 文檔）。

  2.如果祖先元素有定位（相對、絕對、固定定位），則以最近一級的有定位祖先元素為參考點移動位置。

  3.絕對定位不再占有原先的位置。所以絕對定位是脫離標準流的。（脫標）

1.3.3.2 定位口訣 —— 子絕父相

弄清楚這個口訣，就明白了絕對定位和相對定位的使用場景。

這個**“子絕父相”太重要了，是我們學習定位的口訣**，是定位中最常用的一種方式這句話的意思是：子級是絕對定位的話，父級要用相對定位。

因為絕對定位的盒子是拼爹的，所以要和父級搭配一起來使用。

①子級絕對定位，不會占有位置，可以放到父盒子里面的任何一個地方，不會影響其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子內顯示。

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

這就是子絕父相的由來，所以相對定位經常用來作為絕對定位的父級。

總結： 因為父級需要占有位置，因此是相對定位， 子盒子不需要占有位置，則是絕對定位

當然，子絕父相不是永遠不變的，如果父元素不需要占有位置，子絕父絕也會遇到。

疑問：為什么在布局時，子級元素使用絕對定位時，父級元素就要用相對定位呢？

觀察下圖，思考一下在布局時，左右兩個方向的箭頭圖片以及父級盒子的定位方式。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-dqpViOKo-1637142589886)(https://gitee.com/baucd/could-images/raw/master/img/07_%E5%AD%90%E7%BB%9D%E7%88%B6%E7%9B%B8%E6%88%AA%E5%9B%BE.png)]

分析：

方向箭頭疊加在其他圖片上方，應該使用絕對定位，因為絕對定位完全脫標，完全不占位置。

父級盒子應該使用相對定位，因為相對定位不脫標，后續盒子仍然以標準流的方式對待它。

• 如果父級盒子也使用絕對定位，會完全脫標，那么下方的廣告盒子會上移，這顯然不是我們想要的。

結論：父級要占有位置，子級要任意擺放，這就是子絕父相的由來。

1.3.4. 固定定位(fixed) - 重要

• 固定定位是元素固定于瀏覽器可視區的位置。（認死理型） 主要使用場景： 可以在瀏覽器頁面滾動時元素的位置不會改變。

• 語法：

  選擇器 { position: fixed; }

• 固定定位的特點：（務必記住）：

  1.以瀏覽器的可視窗口為參照點移動元素。

  • 跟父元素沒有任何關系
  • 不隨滾動條滾動。

  2.固定定位不在占有原先的位置。

• 固定定位也是脫標的，其實固定定位也可以看做是一種特殊的絕對定位。（認死理型）

  • 完全脫標—— 完全不占位置；
  • 只認瀏覽器的可視窗口 —— 瀏覽器可視窗口 + 邊偏移屬性 來設置元素的位置；
    • 跟父元素沒有任何關系；單獨使用的
    • 不隨滾動條滾動。

固定定位舉例：

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

1.3.5 粘性定位(sticky) - 了解

• 粘性定位可以被認為是相對定位和固定定位的混合。 Sticky 粘性的

• 語法：

  選擇器 { position: sticky; top: 10px; }

• 粘性定位的特點：

  1.以瀏覽器的可視窗口為參照點移動元素（固定定位特點）

  2.粘性定位占有原先的位置（相對定位特點）

  3.必須添加 top 、left、right、bottom 其中一個才有效

  跟頁面滾動搭配使用。 兼容性較差，IE 不支持。

1.3.6 定位總結

定位模式

是否脫標

移動位置

是否常用

static 靜態定位

否

不能使用邊偏移

很少

relative 相對定位

否 (占有位置)

相對于自身位置移動

基本單獨使用

absolute絕對定位

是（不占有位置）

帶有定位的父級

要和定位父級元素搭配使用

fixed 固定定位

是（不占有位置）

瀏覽器可視區

單獨使用，不需要父級

sticky 粘性定位

否 (占有位置)

瀏覽器可視區

當前階段少

• 一定記住 相對定位、固定定位、絕對定位 兩個大的特點： 1. 是否占有位置（脫標否） 2. 以誰為基準點移動位置。

• 學習定位重點學會子絕父相。

• 注意：

邊偏移需要和定位模式聯合使用，單獨使用無效；

top 和 bottom 不要同時使用；

left 和 right 不要同時使用。

2. 綜合案例：學成在線-hot 模塊添加

2. 1 案例截圖：

2.2 案例分析

一個大的 li 中包含 一個課程圖片，課程介紹文字信息，還有hot的小圖標；

hot圖片重疊在課程圖片上面—— 脫標，不占位置，需要使用絕對定位；

hot圖片重疊在li的右上方 —— 需要使用邊偏移確定準確位置。

2.3 案例小結

子絕父相 —— 子元素使用絕對定位，父元素使用相對定位；

與浮動的對比：

• 絕對定位：脫標，利用邊偏移指定準確位置；
• 浮動：脫標，不能指定準確位置，讓多個塊級元素在一行顯示。

課堂練習：模擬老師的隨堂案例完成哈根達斯案例（5 分鐘）。

結構修改：

<!-- 修改.box-bd里面的li標簽內容，添加一個hot圖標 --><li><!-- 添加hot小圖片 --><em><img src="images/hot.png" alt=""></em><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系統實戰項目演練</h4><div class="info"><span>高級</span> ? 1125人在學習</div> </li>

樣式修改：

.box-bd ul li {/* 子絕父相 *//* 父元素相對定位 */position: relative;float: left;width: 228px;height: 270px;background-color: #fff;margin-right: 15px;margin-bottom: 15px;} .box-bd ul li > img {width: 100%; } .box-bd ul li h4 {margin: 20px 20px 20px 25px;font-size: 14px;color: #050505;font-weight: 400; } .box-bd ul li em {/* 子元素絕對定位 */position: absolute;top: 4px;right: -4px; }

3. 定位(position)的應用

3.1. 固定定位小技巧： 固定在版心左側位置。

小算法：

1.讓固定定位的盒子 left: 50%. 走到瀏覽器可視區（也可以看做版心） 的一半位置。

2.讓固定定位的盒子 margin-left: 版心寬度的一半距離。 多走 版心寬度的一半位置

就可以讓固定定位的盒子貼著版心右側對齊了。

案例效果：

<style>.w {width: 800px;height: 1400px;background-color: pink;margin: 0 auto;}.fixed {position: fixed;/* 1. 走瀏覽器寬度的一半 */left: 50%;/* 2. 利用margin 走版心盒子寬度的一半距離 */margin-left: 405px;width: 50px;height: 150px;background-color: skyblue;} </style> </head><body><div class="fixed"></div><div class="w">版心盒子 800像素</div> </body>

3.2. 堆疊順序（z-index）

• 在使用定位布局時，可能會出現盒子重疊的情況。此時，可以使用 z-index 來控制盒子的前后次序 (z軸)

• 語法：

  選擇器 { z-index: 1; }

• z-index 的特性如下：

• 屬性值：正整數、負整數或 0，默認值是 0，數值越大，盒子越靠上；
• 如果屬性值相同，則按照書寫順序，后來居上；
• 數字后面不能加單位。

注意：z-index 只能應用于相對定位、絕對定位和固定定位的元素，其他標準流、浮動和靜態定位無效。

• 應用 z-index 層疊等級屬性可以調整盒子的堆疊順序。如下圖所示：

案例演示：堆疊順序。

4. 定位(position)的拓展

4.1 絕對定位的盒子居中

注意：加了絕對定位/固定定位的盒子不能通過設置 margin: auto 設置水平居中。

但是可以通過以下計算方法實現水平和垂直居中，可以按照下圖的方法：

left: 50%;：讓盒子的左側移動到父級元素的水平中心位置；

margin-left: -100px;：讓盒子向左移動自身寬度的一半。

盒子居中定位示意圖

4.2 定位特殊特性

絕對定位和固定定位也和浮動類似。

1.行內元素添加絕對或者固定定位，可以直接設置高度和寬度。

2.塊級元素添加絕對或者固定定位，如果不給寬度或者高度，默認大小是內容的大小。

前面我們講過， display 是 顯示模式， 可以改變顯示模式有以下方式:

• 可以用inline-block 轉換為行內塊
• 可以用浮動 float 默認轉換為行內塊（類似，并不完全一樣，因為浮動是脫標的）
• 絕對定位和固定定位也和浮動類似， 默認轉換的特性 轉換為行內塊。

所以說， 一個行內的盒子，如果加了浮動、固定定位和絕對定位，不用轉換，就可以給這個盒子直接設置寬度和高度等。

4.3 脫標的盒子不會觸發外邊距塌陷

浮動元素、**絕對定位(固定定位）**元素的都不會觸發外邊距合并的問題。 （我們以前是用padding border overflow解決的）

也就是說，我們給盒子改為了浮動或者定位，就不會有垂直外邊距合并的問題了。

4.4 絕對定位（固定定位）會完全壓住盒子

浮動元素不同，只會壓住它下面標準流的盒子，但是不會壓住下面標準流盒子里面的文字（圖片）

但是絕對定位（固定定位） 會壓住下面標準流所有的內容。

浮動之所以不會壓住文字，因為浮動產生的目的最初是為了做文字環繞效果的。 文字會圍繞浮動元素

5. 綜合案例 - 淘寶輪播圖(重點)

5.1 效果圖

5.2 布局分析

5.3 步驟

大盒子我們類名為： tb-promo 淘寶廣告

里面先放一張圖片。

左右兩個按鈕 用鏈接就好了。 左箭頭 prev 右箭頭 next

左按鈕樣式（border-radius：左上，右上，右下，左下），

右按鈕定位，提取左右按鈕共同的樣式代碼（并集選擇器）

底側小圓點ul 繼續做。 類名為 promo-nav

中間長方形橢圓 ul的定位（水平居中，離底部15px）

長方形需要五個小圓點，ul無序列表，li浮動，橢圓中小圓點的樣式

5.4 知識點：圓角矩形設置4個角

圓角矩形可以為4個角分別設置圓度， 但是是有順序的

border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-right-radius:20px;border-bottom-left-radius:20px;

• 如果4個角，數值相同

  border-radius: 15px;

• 里面數值不同，我們也可以按照簡寫的形式，具體格式如下:

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

還是遵循的順時針。

5.5 代碼參考

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>淘寶輪播圖做法</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.tb-promo {position: relative;width: 520px;height: 280px;background-color: pink;margin: 100px auto;}.tb-promo img {width: 520px;height: 280px;}/* 并集選擇器可以集體聲明相同的樣式 */.prev,.next {position: absolute;/* 絕對定位的盒子垂直居中 */top: 50%;margin-top: -15px;/* 加了絕對定位的盒子可以直接設置高度和寬度 */width: 20px;height: 30px;background: rgba(0, 0, 0, .3);text-align: center;line-height: 30px;color: #fff;text-decoration: none;}.prev {left: 0;/* border-radius: 15px; */border-top-right-radius: 15px;border-bottom-right-radius: 15px;}.next {/* 如果一個盒子既有left屬性也有right屬性，則默認會執行 left屬性 同理 top bottom 會執行 top */right: 0;/* border-radius: 15px; */border-top-left-radius: 15px;border-bottom-left-radius: 15px;}.promo-nav {position: absolute;bottom: 15px;left: 50%;margin-left: -35px;width: 70px;height: 13px;/* background-color: pink; */background: rgba(255, 255, 255, .3);border-radius: 7px;}.promo-nav li {float: left;width: 8px;height: 8px;background-color: #fff;border-radius: 50%;margin: 3px;}/* 不要忘記選擇器權重的問題 */.promo-nav .selected {background-color: #ff5000;}</style> </head><body><div class="tb-promo"> <img src="images/tb.jpg" alt=""> <!-- 左側按鈕箭頭 --> <a href="#" class="prev"> &lt; </a><!-- 右側按鈕箭頭 --> <a href="#" class="next"> &gt; </a> <!-- 小圓點 --><ul class="promo-nav"><li class="selected"></li><li></li><li></li><li></li><li></li></ul></div> </body></html>

6. 網頁布局總結

通過盒子模型，清楚知道大部分html標簽是一個盒子。

通過CSS浮動、定位 可以讓每個盒子排列成為網頁。

一個完整的網頁，是標準流、浮動、定位一起完成布局的，每個都有自己的專門用法。

6.1. 標準流

可以讓盒子上下排列或者左右排列，垂直的塊級盒子顯示就用標準流布局。

6.2. 浮動

可以讓多個塊級元素一行顯示或者左右對齊盒子，多個塊級盒子水平顯示就用浮動布局

6.3. 定位

定位最大的特點是有層疊的概念，就是可以讓多個盒子前后疊壓來顯示。如果元素自由在某個盒子內移動就用定位布局。

7. 元素的顯示與隱藏

• 目的（本質）

  讓一個元素在頁面中消失或者顯示出來

• 場景

  類似網站廣告，當我們點擊關閉就不見了，但是我們重新刷新頁面，會重新出現！

7.1. display 顯示（重點）

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

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

• 特點： display 隱藏元素后，不再占有原來的位置。

• 后面應用及其廣泛，搭配 JS 可以做很多的網頁特效。實際開發場景：

  配合后面js做特效，比如下拉菜單，原先沒有，鼠標經過，顯示下拉菜單， 應用極為廣泛

7.2. visibility 可見性 （了解）

• visibility 屬性用于指定一個元素應可見還是隱藏。

  visibility：visible ; 　元素可視visibility：hidden; 　 元素隱藏

• 特點：visibility 隱藏元素后，繼續占有原來的位置。（停職留薪）

• 如果隱藏元素想要原來位置， 就用 visibility：hidden

• 如果隱藏元素不想要原來位置， 就用 display：none (用處更多 重點）

7.3. overflow 溢出（重點）

• overflow 屬性指定了如果內容溢出一個元素的框（超過其指定高度及寬度） 時，會發生什么。

屬性值

描述

visible

不剪切內容也不添加滾動條

hidden

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

scroll

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

auto

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

• 一般情況下，我們都不想讓溢出的內容顯示出來，因為溢出的部分會影響布局。
• 但是如果有定位的盒子， 請慎用overflow:hidden 因為它會隱藏多余的部分。

• 實際開發場景：

清除浮動

隱藏超出內容，隱藏掉, 不允許內容超過父盒子。

7.4. 顯示與隱藏總結

屬性

區別

用途

display 顯示 （重點）

隱藏對象，不保留位置

配合后面js做特效，比如下拉菜單，原先沒有，鼠標經過，顯示下拉菜單， 應用極為廣泛

visibility 可見性 （了解）

隱藏對象，保留位置

使用較少

overflow 溢出（重點）

只是隱藏超出大小的部分

1. 可以清除浮動 2. 保證盒子里面的內容不會超出該盒子范圍

8 綜合案例：土豆網鼠標經過顯示遮罩

8.1. 效果圖

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-2ZOnh6Up-1646613742729)(images/土豆網案例.png)]

8.2. 案例目標

1.練習元素的顯示與隱藏

2.練習元素的定位

8.3. 核心原理

原先半透明的黑色遮罩看不見， 鼠標經過 大盒子，就顯示出來。

遮罩的盒子不占有位置， 就需要用絕對定位 和 display 配合使用。

8.4. 代碼參考

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>仿土豆網顯示隱藏遮罩案例</title><style>.tudou {position: relative;width: 444px;height: 320px;background-color: pink;margin: 30px auto;}.tudou img {width: 100%;height: 100%;}.mask {/* 隱藏遮罩層 */display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;}/* 當我們鼠標經過了 土豆這個盒子，就讓里面遮罩層顯示出來 */.tudou:hover .mask {/* 而是顯示元素 */display: block;}</style> </head><body><div class="tudou"><div class="mask"></div> <img src="images/tudou.jpg" alt=""></div><div class="tudou"><div class="mask"></div> <img src="images/tudou.jpg" alt=""></div><div class="tudou"><div class="mask"></div> <img src="images/tudou.jpg" alt=""></div><div class="tudou"><div class="mask"></div> <img src="images/tudou.jpg" alt=""></div> </body></html>

CSS第七天

學習目標：

能夠使用精靈圖

能夠使用字體圖標

能夠寫出 CSS 三角

能夠寫出常見的 CSS 用戶界面樣式

能夠說出常見的布局技巧

1. 精靈圖（重點）

1.1 為什么需要精靈圖

一個網頁中往往會應用很多小的背景圖像作為修飾，當網頁中的圖像過多時，服務器就會頻繁地接收和發送請求圖片，造成服務器請求壓力過大，這將大大降低頁面的加載速度。

為什么使用精靈圖（目的）：

為了有效地減少服務器接收和發送請求的次數，提高頁面的加載速度，出現了 CSS 精靈技術（也稱 CSS Sprites、CSS 雪碧）。

核心原理：

將網頁中的一些小背景圖像整合到一張大圖中 ，這樣服務器只需要一次請求就可以了。

精靈圖舉例:

1.2 精靈圖（sprites）的使用

使用精靈圖核心：

精靈技術主要針對于背景圖片使用。就是把多個小背景圖片整合到一張大圖片中。

這個大圖片也稱為 sprites 精靈圖 或者 雪碧圖

移動背景圖片位置， 此時可以使用 background-position 。

移動的距離就是這個目標圖片的 x 和 y 坐標。注意網頁中的坐標有所不同

因為一般情況下都是往上往左移動，所以數值是負值。

使用精靈圖的時候需要精確測量，每個小背景圖片的大小和位置。

使用精靈圖核心總結：

精靈圖主要針對于小的背景圖片使用。

主要借助于背景位置來實現—background-position 。

一般情況下精靈圖都是負值。（千萬注意網頁中的坐標： x軸右邊走是正值，左邊走是負值， y軸同理。）

1.3 案例：拼出自己名字

1.3.1 案例效果

1.3.2 代碼參考

結構

<span class="p">p</span> <span class="i">i</span> <span class="n">n</span> <span class="k">k</span>

樣式

span {display: inline-block;background: url(images/abcd.jpg) no-repeat; } .p {width: 100px;height: 112px;/* background-color: pink; */background-position: -493px -276px; } .i {width: 60px;height: 108px;/* background-color: pink; */background-position: -327px -142px; } .n {width: 108px;height: 109px;/* background-color: pink; */background-position: -215px -141px; } .k {width: 105px;height: 114px;/* background-color: pink; */background-position: -495px -142px; }

2. 字體圖標

2.1 字體圖標的產生

字體圖標使用場景： 主要用于顯示網頁中通用、常用的一些小圖標。

精靈圖是有諸多優點的，但是缺點很明顯。

1.圖片文件還是比較大的。

2.圖片本身放大和縮小會失真。

3.一旦圖片制作完畢想要更換非常復雜。

此時，有一種技術的出現很好的解決了以上問題，就是字體圖標 iconfont。

字體圖標可以為前端工程師提供一種方便高效的圖標使用方式，展示的是圖標，本質屬于字體。

2.2 字體圖標的優點

輕量級：一個圖標字體要比一系列的圖像要小。一旦字體加載了，圖標就會馬上渲染出來，減少了服務器請求

• 靈活性：本質其實是文字，可以很隨意的改變顏色、產生陰影、透明效果、旋轉等
• 兼容性：幾乎支持所有的瀏覽器，請放心使用
• 注意： 字體圖標不能替代精靈技術，只是對工作中圖標部分技術的提升和優化。

總結：

1.如果遇到一些結構和樣式比較簡單的小圖標，就用字體圖標。

2.如果遇到一些結構和樣式復雜一點的小圖片，就用精靈圖。

使用步驟

字體圖標是一些網頁常見的小圖標，我們直接網上下載即可。 因此使用可以分為：

1.字體圖標的下載

2.字體圖標的引入 （引入到我們html頁面中）

3.字體圖標的追加 （以后添加新的小圖標）

2.3 字體圖標的下載

推薦下載網站：

• icomoon 字庫 http://icomoon.io 推薦指數 ★★★★★

IcoMoon 成立于 2011 年，推出了第一個自定義圖標字體生成器，它允許用戶選擇所需要的圖標，使它們成一字型。該字庫內容種類繁多，非常全面，唯一的遺憾是國外服務器，打開網速較慢。

• 阿里 iconfont 字庫 http://www.iconfont.cn/ 推薦指數 ★★★★★

這個是阿里媽媽 M2UX 的一個 iconfont 字體圖標字庫，包含了淘寶圖標庫和阿里媽媽圖標庫。可以使用 AI制作圖標上傳生成。 重點是，免費！

2.4 字體圖標的引入

下載完畢之后，注意原先的文件不要刪，后面會用。

把下載包里面的 fonts 文件夾放入頁面根目錄下

• 字體文件格式

不同瀏覽器所支持的字體格式是不一樣的，字體圖標之所以兼容，就是因為包含了主流瀏覽器支持的字體文件。

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

2).Web Open Font Format( .woff )格式woff字體，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

3).Embedded Open Type( .eot )格式.eot字體是IE專用字體，支持這種字體的瀏覽器有IE4+；

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

在 CSS 樣式中全局聲明字體： 簡單理解把這些字體文件通過css引入到我們頁面中。

一定注意字體文件路徑的問題

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

html 標簽內添加小圖標。

給標簽定義字體。

span {
font-family: “icomoon”;
}

注意：務必保證 這個字體和上面@font-face里面的字體保持一致

2.5 字體圖標的追加

如果工作中，原來的字體圖標不夠用了，我們需要添加新的字體圖標到原來的字體文件中。

把壓縮包里面的 selection.json 從新上傳，然后選中自己想要新的圖標，從新下載壓縮包，并替換原來的文件即可。

2.6 字體圖標加載的原理：

3. CSS 三角

3.1 介紹

網頁中常見一些三角形，使用 CSS 直接畫出來就可以，不必做成圖片或者字體圖標。

一張圖， 你就知道 CSS 三角是怎么來的了, 做法如下：

div {width: 0; height: 0;border: 50px solid transparent;border-color: red green blue black;line-height:0;font-size: 0;}

我們用css 邊框可以模擬三角效果

寬度高度為0

我們4個邊框都要寫， 只保留需要的邊框顏色，其余的不能省略，都改為 transparent 透明就好了

為了照顧兼容性 低版本的瀏覽器，加上 font-size: 0; line-height: 0;

3.2 案例：京東三角

3.2.1效果圖

3.2.2 代碼參考

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS 三角制作</title><style>.box1 {width: 0;height: 0;/* border: 10px solid pink; */border-top: 10px solid pink;border-right: 10px solid red;border-bottom: 10px solid blue;border-left: 10px solid green;}.box2 {width: 0;height: 0;border: 50px solid transparent;border-left-color: pink;margin: 100px auto;}.jd {position: relative;width: 120px;height: 249px;background-color: pink;}.jd span {position: absolute;right: 15px;top: -10px;width: 0;height: 0;/* 為了照顧兼容性 */line-height: 0; font-size: 0;border: 5px solid transparent;border-bottom-color: pink;}</style> </head> <body><div class="box1"></div><div class="box2"></div><div class="jd"><span></span></div> </body> </html>

4. CSS 用戶界面樣式

什么是界面樣式

所謂的界面樣式，就是更改一些用戶操作樣式，以便提高更好的用戶體驗。

• 更改用戶的鼠標樣式
• 表單輪廓
• 防止表單域拖拽

4.1 鼠標樣式 cursor

li {cursor: pointer; }

設置或檢索在對象上移動的鼠標指針采用何種系統預定義的光標形狀。

4.2 輪廓線 outline

給表單添加 outline: 0; 或者 outline: none; 樣式之后，就可以去掉默認的藍色邊框。

input {outline: none; }

4.3 防止拖拽文本域 resize

實際開發中，我們文本域右下角是不可以拖拽的。

textarea{ resize: none; }

vertical-align 屬性應用

5. vertical-align 屬性應用

CSS 的 vertical-align 屬性使用場景： 經常用于設置圖片或者表單(行內塊元素）和文字垂直對齊。

官方解釋： 用于設置一個元素的垂直對齊方式，但是它只針對于行內元素或者行內塊元素有效。

語法：

vertical-align : baseline | top | middle | bottom

5.1 圖片、表單和文字對齊

圖片、表單都屬于行內塊元素，默認的 vertical-align 是基線對齊。

此時可以給圖片、表單這些行內塊元素的 vertical-align 屬性設置為 middle 就可以讓文字和圖片垂直居中對齊了。

5.2 解決圖片底部默認空白縫隙問題

bug：圖片底側會有一個空白縫隙，原因是行內塊元素會和文字的基線對齊。

主要解決方法有兩種：

1.給圖片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）

2.把圖片轉換為塊級元素 display: block;

6. 溢出的文字省略號顯示

6.1 單行文本溢出顯示省略號

單行文本溢出顯示省略號–必須滿足三個條件：

/*1. 先強制一行內顯示文本*/ white-space: nowrap; （ 默認 normal 自動換行） /*2. 超出的部分隱藏*/ overflow: hidden; /*3. 文字用省略號替代超出的部分*/ text-overflow: ellipsis;

6.2 多行文本溢出顯示省略號（了解）

多行文本溢出顯示省略號，有較大兼容性問題，適合于webKit瀏覽器或移動端（移動端大部分是webkit內核）

/*1. 超出的部分隱藏 */ overflow: hidden; /*2. 文字用省略號替代超出的部分 */ text-overflow: ellipsis; /* 3. 彈性伸縮盒子模型顯示 */ display: -webkit-box; /* 4. 限制在一個塊元素顯示的文本的行數 */ -webkit-line-clamp: 2; /* 5. 設置或檢索伸縮盒對象的子元素的排列方式 */ -webkit-box-orient: vertical;

更推薦讓后臺人員來做這個效果，因為后臺人員可以設置顯示多少個字，操作更簡單。

7. 常見布局技巧

巧妙利用一個技術更快更好的布局：

margin負值的運用

文字圍繞浮動元素

行內塊的巧妙運用

CSS三角強化

7.1. margin負值運用

1.讓每個盒子margin 往左側移動 -1px 正好壓住相鄰盒子邊框

2.鼠標經過某個盒子的時候，提高當前盒子的層級即可（如果沒有有定位，則加相對定位（保留位置），如果有定位，則加z-index）

7.2 文字圍繞浮動元素

效果

布局示意圖

巧妙運用浮動元素不會壓住文字的特性

7.3 行內塊巧妙運用

頁碼在頁面中間顯示:

把這些鏈接盒子轉換為行內塊， 之后給父級指定 text-align:center;

利用行內塊元素中間有縫隙，并且給父級添加 text-align:center; 行內塊元素會水平會居中

7.4. CSS 三角強化 案例

7.4.1 原理

<style>.box1 {width: 0;height: 0;/* 把上邊框寬度調大 *//* border-top: 100px solid transparent; border-right: 50px solid skyblue; *//* 左邊和下邊的邊框寬度設置為0 *//* border-bottom: 0 solid blue; border-left: 0 solid green; *//* 1.只保留右邊的邊框有顏色 */border-color: transparent red transparent transparent;/* 2. 樣式都是solid */border-style: solid;/* 3. 上邊框寬度要大， 右邊框 寬度稍小， 其余的邊框該為 0 */border-width: 100px 50px 0 0;} </style> </head><body><div class="box1"></div> </body>

7.4.2 案例效果

7.4.3 代碼參考

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS三角強化的巧妙運用</title><style>.price {width: 160px;height: 24px;line-height: 24px;border: 1px solid red;margin: 0 auto;}.miaosha {position: relative;float: left;width: 90px;height: 100%;background-color: red;text-align: center;color: #fff;font-weight: 700;margin-right: 8px;}.miaosha i {position: absolute;right: 0;top: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 10px 0 0;}.origin {font-size: 12px;color: gray;text-decoration: line-through;}</style> </head><body><div class="price"> <span class="miaosha"> ￥1650 <i></i> </span> <span class="origin">￥5650</span> </div> </body></html>

8. CSS 初始化

不同瀏覽器對有些標簽的默認值是不同的，為了消除不同瀏覽器對HTML文本呈現的差異，照顧瀏覽器的兼容，我們需要對CSS 初始化

簡單理解： CSS初始化是指重設瀏覽器的樣式。 (也稱為CSS reset）

每個網頁都必須首先進行 CSS初始化。

這里我們以 京東CSS初始化代碼為例。

Unicode編碼字體：

把中文字體的名稱用相應的Unicode編碼來代替，這樣就可以有效的避免瀏覽器解釋CSS代碼時候出現亂碼的問題。

比如：

黑體 9ED1F53
宋體 B8BF53
微軟雅黑 FAE8F6F96C59ED1

目標

• 能夠說出 3~5 個 HTML5 新增布局和表單標簽
• 能夠說出 CSS3 的新增特性有哪些

HTML5新特性

概述

HTML5 的新增特性主要是針對于以前的不足，增加了一些新的標簽、新的表單和新的表單屬性等。

這些新特性都有兼容性問題，基本是 IE9+ 以上版本的瀏覽器才支持，如果不考慮兼容性問題，可以大量使用這些新特性。

語義化標簽 （★★）

以前布局，我們基本用 div 來做。div 對于搜索引擎來說，是沒有語義的

<div class=“header”> </div> <div class=“nav”> </div> <div class=“content”> </div> <div class=“footer”> </div>

發展到了HTML5后，新增了一些語義化標簽，這樣的話更加有利于瀏覽器的搜索引擎搜索，也方便了網站的seo（Search Engine Optimization，搜索引擎優化），下面就是新增的一些語義化標簽

• <header> 頭部標簽
• <nav> 導航標簽
• <article> 內容標簽
• <section> 定義文檔某個區域
• <aside> 側邊欄標簽
• <footer> 尾部標簽

多媒體標簽

多媒體標簽分為 音頻 audio 和視頻 video 兩個標簽 使用它們，我們可以很方便的在頁面中嵌入音頻和視頻，而不再去使用落后的flash和其他瀏覽器插件了。

因為多媒體標簽的 屬性、方法、事件比較多，因此我們需要什么功能的時候，就需要去查找相關的文檔進行學習使用。

視頻標簽- video（★★★）

基本使用

當前 元素支持三種視頻格式： 盡量使用 mp4格式

使用語法：

<video src="media/mi.mp4"></video>

兼容寫法

由于各個瀏覽器的支持情況不同，所以我們會有一種兼容性的寫法，這種寫法了解一下即可

<video controls="controls" width="300"><source src="move.ogg" type="video/ogg" ><source src="move.mp4" type="video/mp4" >您的瀏覽器暫不支持 <video> 標簽播放視頻 </ video >

上面這種寫法，瀏覽器會匹配video標簽中的source，如果支持就播放，如果不支持往下匹配，直到沒有匹配的格式，就提示文本

video 常用屬性

屬性很多，有一些屬性需要大家重點掌握：

• autoplay 自動播放
  • 注意： 在google瀏覽器上面，默認禁止了自動播放，如果想要自動播放的效果，需要設置 muted屬性
• width 寬度
• height 高度
• loop 循環播放
• src 播放源
• muted 靜音播放

示例代碼：

<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg"></video>

音頻標簽- audio

基本使用

當前 元素支持三種視頻格式： 盡量使用 mp3格式

使用語法：

<audio src="media/music.mp3"></audio>

兼容寫法

由于各個瀏覽器的支持情況不同，所以我們會有一種兼容性的寫法，這種寫法了解一下即可

< audio controls="controls" ><source src="happy.mp3" type="audio/mpeg" ><source src="happy.ogg" type="audio/ogg" >您的瀏覽器暫不支持 <audio> 標簽。 </ audio>

上面這種寫法，瀏覽器會匹配audio標簽中的source，如果支持就播放，如果不支持往下匹配，直到沒有匹配的格式，就提示文本

audio 常用屬性

示例代碼：

<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>

小結

• 音頻標簽和視頻標簽使用方式基本一致
• 瀏覽器支持情況不同
• 谷歌瀏覽器把音頻和視頻自動播放禁止了
• 我們可以給視頻標簽添加 muted 屬性來靜音播放視頻，音頻不可以（可以通過JavaScript解決）
• 視頻標簽是重點，我們經常設置自動播放，不使用 controls 控件，循環和設置大小屬性

新增的表單元素 （★★）

在H5中，幫我們新增加了很多類型的表單，這樣方便了程序員的開發

課堂案例：在這個案例中，熟練了新增表單的用法

案例代碼：

<!-- 我們驗證的時候必須添加form表單域 --> <form action=""><ul><li>郵箱: <input type="email" /></li><li>網址: <input type="url" /></li><li>日期: <input type="date" /></li><li>時間: <input type="time" /></li><li>數量: <input type="number" /></li><li>手機號碼: <input type="tel" /></li><li>搜索: <input type="search" /></li><li>顏色: <input type="color" /></li><!-- 當我們點擊提交按鈕就可以驗證表單了 --><li> <input type="submit" value="提交"></li></ul> </form>

常見輸入類型

text password radio checkbox button file hidden submit reset image

新的輸入類型

類型很多，我們現階段重點記憶三個： number tel search

CSS3新特性

CSS3 的現狀

• 新增的CSS3特性有兼容性問題，ie9+才支持
• 移動端支持優于 PC 端
• 不斷改進中
• 應用相對廣泛
• 現階段主要學習：新增選擇器和盒子模型以及其他特性

CSS3 新增選擇器

CSS3 給我們新增了選擇器，可以更加便捷，更加自由的選擇目標元素。

• 屬性選擇器
• 結構偽類選擇器
• 偽元素選擇器

屬性選擇器（★★）

屬性選擇器，按照字面意思，都是根據標簽中的屬性來選擇元素

示例代碼：

/* 只選擇 type =text 文本框的input 選取出來 */ input[type=text] { color: pink;} /* 選擇首先是div 然后 具有class屬性 并且屬性值 必須是 icon開頭的這些元素 */ div[class^=icon] { color: red;} /* 選擇首先是section 然后 具有class屬性 并且屬性值 必須是 data結尾的這些元素 */ section[class$=data] { color: blue;}

• 屬性選擇器，按照字面意思，都是根據標簽中的屬性來選擇元素
• 屬性選擇器可以根據元素特定屬性的來選擇元素。 這樣就可以不用借助于類或者id選擇器
• 屬性選擇器也可以選擇出來自定義的屬性
• **注意：**類選擇器、屬性選擇器、偽類選擇器，權重為 10。

結構偽類選擇器

結構偽類選擇器主要根據文檔結構來選擇器元素， 常用于根據父級選擇器里面的子元素

E:first-child

匹配父元素的第一個子元素E

<style>ul li:first-child {background-color: red;} </style> <ul><li>列表項一</li><li>列表項二</li><li>列表項三</li><li>列表項四</li> </ul>

E:last-child 則是選擇到了最后一個li標簽

E:nth-child(n)（★★★）

匹配到父元素的第n個元素

• 匹配到父元素的第2個子元素

  ul li:nth-child(2){}

• 匹配到父元素的序號為奇數的子元素

  ul li:nth-child(odd){} odd 是關鍵字 奇數的意思（3個字母 ）

• 匹配到父元素的序號為偶數的子元素

  ul li:nth-child(even){} even（4個字母 ）

• 匹配到父元素的前3個子元素

  ul li:nth-child(-n+3){}

  選擇器中的 n 是怎么變化的呢？

  因為 n是從 0 ，1，2，3… 一直遞增

  所以 -n+3 就變成了

  • n=0 時 -0+3=3
  • n=1時 -1+3=2
  • n=2時 -2+3=1
  • n=3時 -3+3=0
  • …

一些常用的公式： 公式不是死的，在這里列舉出來讓大家能夠找尋到這個模式，能夠理解代碼，這樣才能寫出滿足自己功能需求的代碼

常用的結構偽類選擇器是： nth-child(n) {...}

E:nth-child 與 E:nth-of-type 的區別

這里只講明 E:nth-child(n) 和 E:nth-of-type(n) 的區別 剩下的 E:first-of-type E:last-of-type E:nth-last-of-type(n) 同理做推導即可

<style>ul li:nth-child(2) {/* 字體變成紅色 */color: red;}ul li:nth-of-type(2) {/* 背景變成綠色 */background-color: green;} </style> <ul><li>列表項一</li><p>亂來的p標簽</p><li>列表項二</li><li>列表項三</li><li>列表項四</li> </ul>

也就是說：

• E:nth-child(n) 匹配父元素的第n個子元素E，也就是說，nth-child 對父元素里面所有孩子排序選擇（序號是固定的） 先找到第n個孩子，然后看看是否和E匹配
• E:nth-of-type(n) 匹配同類型中的第n個同級兄弟元素E，也就是說，對父元素里面指定子元素進行排序選擇。 先去匹配E ，然后再根據E 找第n個孩子

小結

• 結構偽類選擇器一般用于選擇父級里面的第幾個孩子
• nth-child 對父元素里面所有孩子排序選擇（序號是固定的） 先找到第n個孩子，然后看看是否和E匹配
• nth-of-type 對父元素里面指定子元素進行排序選擇。 先去匹配E ，然后再根據E 找第n個孩子
• 關于 nth-child（n） 我們要知道 n 是從 0 開始計算的，要記住常用的公式
• 如果是無序列表，我們肯定用 nth-child 更多
• 類選擇器、屬性選擇器、偽類選擇器，權重為 10

偽元素選擇器（★★★）

偽元素選擇器可以幫助我們利用CSS創建新標簽元素，而不需要HTML標簽，從而簡化HTML結構

示例demo

<style>div {width: 200px;height: 200px;background-color: pink;}/* div::before 權重是2 */div::before {/* 這個content是必須要寫的 */content: '我';}div::after {content: '小豬佩奇';} </style><body><div> 是 </div> </body>

注意：

• before 和 after 創建一個元素，但是屬于行內元素
• 新創建的這個元素在文檔樹中是找不到的，所以我們稱為偽元素
• 語法： element::before {}
• before 和 after 必須有 content 屬性
• before 在父元素內容的前面創建元素，after 在父元素內容的后面插入元素
  偽元素選擇器和標簽選擇器一樣，權重為 1

應用場景一： 字體圖標

在實際工作中，字體圖標基本上都是用偽元素來實現的，好處在于我們不需要在結構中額外去定義字體圖標的標簽，通過content屬性來設置字體圖標的 編碼

步驟：

• 結構中定義div盒子

• 在style中先申明字體 @font-face

• 在style中定義after偽元素 div::after{…}

• 在after偽元素中 設置content屬性，屬性的值就是字體編碼

• 在after偽元素中 設置font-family的屬性

• 利用定位的方式，讓偽元素定位到相應的位置；記住定位口訣：子絕父相

  ...

應用場景二： 仿土豆效果

把之前的代碼進行了改善

步驟：

• 找到之前寫過的仿土豆的結構和樣式，拷貝到自己的頁面中

• 刪除之前的mask遮罩

• 在style中，給大的div盒子（類名叫tudou的），設置 before偽元素

• 這個偽元素充當的是遮罩的角色，所以我們不用設置內容，但是需要設置content屬性，屬性的值為空字符串

• 給這個遮罩設置寬高，背景顏色，默認是隱藏的

• 當鼠標移入到 div盒子時候，讓遮罩顯示，利用 hover 來實現

  Document

應用場景三： 清除浮動

回憶一下清除浮動的方式：

• 額外標簽法也稱為隔墻法，是 W3C 推薦的做法。
• 父級添加 overflow 屬性
• 父級添加after偽元素
• 父級添加雙偽元素

額外標簽法也稱為隔墻法，是 W3C 推薦的做法

注意： 要求這個新的空標簽必須是塊級元素

后面兩種偽元素清除浮動算是第一種額外標簽法的一個升級和優化

盒子模型（★★★）

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

可以分成兩種情況：

• box-sizing: content-box 盒子大小為 width + padding + border （以前默認的）
• box-sizing: border-box 盒子大小為 width

如果盒子模型我們改為了box-sizing: border-box ， 那padding和border就不會撐大盒子了（前提padding和border不會超過width寬度）

其他特性（★）

圖標變模糊 – CSS3濾鏡filter

filter CSS屬性將模糊或顏色偏移等圖形效果應用于元素

語法：

filter: 函數(); --> 例如： filter: blur(5px); --> blur模糊處理 數值越大越模糊

計算盒子寬度 – calc 函數

calc() 此CSS函數讓你在聲明CSS屬性值時執行一些計算

語法：

width: calc(100% - 80px);

括號里面可以使用 + - * / 來進行計算

CSS3 過渡（★★★）

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

過渡動畫： 是從一個狀態 漸漸的過渡到另外一個狀態

可以讓我們頁面更好看，更動感十足，雖然 低版本瀏覽器不支持（ie9以下版本） 但是不會影響頁面布局。

我們現在經常和 :hover 一起 搭配使用。

語法：

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

• 屬性 ： 想要變化的 css 屬性， 寬度高度 背景顏色 內外邊距都可以 。如果想要所有的屬性都變化過渡， 寫一個all 就可以
• 花費時間： 單位是 秒（必須寫單位） 比如 0.5s
• 運動曲線： 默認是 ease （可以省略）
• 何時開始：單位是 秒（必須寫單位）可以設置延遲觸發時間 默認是 0s （可以省略）
• 后面兩個屬性可以省略
• 記住過渡的使用口訣： 誰做過渡給誰加

過渡練習

步驟：

• 創建兩個div的盒子，屬于的嵌套關系，外層類名叫 bar，里層類名叫 bar_in
• 給外層的bar 這個盒子設置邊框，寬高，圓角邊框
• 給里層的bar_in 設置 初試的寬度，背景顏色，過渡效果
• 給外層的 bar 添加 hover事件，當觸發了hover事件 讓里層的bar_in 來進行寬度的變化

代碼：

<style>.bar {width: 150px;height: 15px;border: 1px solid red;border-radius: 7px;padding: 1px;}.bar_in {width: 50%;height: 100%;background-color: red;/* 誰做過渡給誰加 */transition: all .7s;}.bar:hover .bar_in {width: 100%;} </style> <body><div class="bar"><div class="bar_in"></div></div> </body>

廣義H5說法 了解

狹隘H5

廣義H5

• 廣義的 HTML5 是 HTML5 本身 + CSS3 + JavaScript 。
• 這個集合有時稱為 HTML5 和朋友，通常縮寫為 HTML5 。
• 雖然 HTML5 的一些特性仍然不被某些瀏覽器支持，但是它是一種發展趨勢。
• HTML5 MDN 介紹：
  https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

L

總結

以上是生活随笔為你收集整理的最最详细的黑马前端HTML5+CSS3笔记，给大家整理好了的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。