當(dāng)前位置：首頁(yè) > news >正文

做一個(gè)個(gè)人網(wǎng)站多少錢(qián)企業(yè)網(wǎng)站快速建站

news 2025/7/4 16:51:37

做一個(gè)個(gè)人網(wǎng)站多少錢(qián),企業(yè)網(wǎng)站快速建站,四川水利工程造價(jià)信息網(wǎng),網(wǎng)站怎么做圖片滾動(dòng)HTML5CSS3 文章目錄 HTML5CSS3一、HTML1. HTML標(biāo)準(zhǔn)結(jié)構(gòu)2. 文檔的使用3. IDE4. 實(shí)體5. meta標(biāo)簽6. 語(yǔ)義化標(biāo)簽6.1 標(biāo)題標(biāo)簽：6.2 塊元素（block element）:6.3 行內(nèi)元素（inline element）: 7. 列表8. 超鏈接9. 圖片標(biāo)簽10. …

HTML5+CSS3

文章目錄

HTML5+CSS3
一、HTML
- 1. HTML標(biāo)準(zhǔn)結(jié)構(gòu)
- 2. 文檔的使用
- 3. IDE
- 4. 實(shí)體
- 5. meta標(biāo)簽
- 6. 語(yǔ)義化標(biāo)簽
- - 6.1 標(biāo)題標(biāo)簽：
  - 6.2 塊元素（block element）:
  - 6.3 行內(nèi)元素（inline element）:
- 7. 列表
- 8. 超鏈接
- 9. 圖片標(biāo)簽
- 10. 內(nèi)聯(lián)框架
- 11. 音頻播放
- 12. 視頻播放
二、CSS
- 1. CSS的定義
- 2. 使用CSS來(lái)修改元素的樣式
- - 2.1 內(nèi)聯(lián)樣式（行內(nèi)樣式）：
  - 2.2 內(nèi)部樣式表
  - 2.3 外部樣式表
- 3. CSS的基本語(yǔ)法
- - 3.1 CSS的注釋
  - 3.2 CSS選擇器
  - 3.3 CSS聲明塊
  - 3.4 繼承
  - 3.5 選擇器的權(quán)重
  - 3.6 像素和百分比
  - 3.7 RGB
- 4. CSS的布局
- - 4.1 文檔流（normal flow）
  - 4.2 盒模型
  - 4.3 盒大小
  - 4.3 輪廓和圓角
  - 4.4 浮動(dòng)
  - 4.5 簡(jiǎn)單布局
  - 4.6 高度塌陷和BFC
  - 4.7 外邊距重疊問(wèn)題與clearfix
  - 4.8 高度塌陷和外邊距重疊的終極解決方法
  - 4.9 定位
  - - `position:static` 默認(rèn)值，元素是靜止的沒(méi)有開(kāi)啟定位
    - `position:relative` 相對(duì)定位
    - `position:absolute` 絕對(duì)定位
    - `position:fixed` 固定定位
    - `position:sticky` 粘滯定位
    - `z-index:1`元素的層級(jí)
  - 4.10 字體樣式
  - - `color`設(shè)置字體顏色
    - `font-size`設(shè)置字體大小
    - `font-family`字體族（字體的格式）
    - `@font-face`將服務(wù)器中的字體直接提供給用戶(hù)使用
  - 4.11 圖標(biāo)字體iconfont
  - 4.12 行高 line-height
  - 4.13 文本的其他屬性
  - 4.14 背景
  - - 背景顏色：
    - 背景圖片：
    - 背景重復(fù)方式：
    - 背景圖片的位置：
    - 背景的范圍：
    - 背景圖片的偏移計(jì)算的原點(diǎn)：
    - 背景圖片的大小：
    - 背景屬性簡(jiǎn)寫(xiě)：
    - 圖片閃爍問(wèn)題：
    - 線(xiàn)性漸變：
    - 徑向漸變（放射效果）
  - 4.15 表格
  - - 表格樣式
  - 4.16 表單
  - 4.18 設(shè)置網(wǎng)站的圖標(biāo)（在標(biāo)題欄和收藏欄）
  - 4.19 項(xiàng)目上線(xiàn)壓縮
- 5. 動(dòng)畫(huà)
- - 5.1 過(guò)渡
  - - 過(guò)渡transition:
    - transition-property:
    - transition-duration
    - transition-timing-function
    - transition-delay
    - 所有過(guò)渡屬性
  - 5.2 動(dòng)畫(huà)
  - - 動(dòng)畫(huà)：
    - 關(guān)鍵幀：
    - animation-name
    - animation-duration
    - animation-delay
    - animation-timing-function
    - animation-iteration-count
    - animation-direction
    - animation-play-state
    - animation-fill-mode
    - 所有動(dòng)畫(huà)屬性
  - 5.3 變形
  - - 變形transform
    - 平移
    - 旋轉(zhuǎn)
    - tips
    - 縮放
- 6. flex(彈性盒、伸縮盒)
- - 6.1 定義
  - 6.2 彈性容器
  - - 主軸
    - 側(cè)軸
    - display
    - flex-direction
    - flex-wrap
    - flex-flow
    - justify-content
    - align-items
    - align-content
    - align-self
  - 6.3 彈性元素
  - - flex-grow
    - flex-shrink
    - flex-basis
    - flex
    - order
三、LESS
- 1. less簡(jiǎn)介
- 2. css的不足
- 3. less的語(yǔ)法
- - 3.1 安裝插件
  - 3.2 注釋
  - 3.3 變量
  - 3.4 父元素和擴(kuò)展
  - 3.5 混合函數(shù)
  - 3.6 運(yùn)算
  - 3.7 import引入其他less
  - 3.8 調(diào)試
四、顯示
- 1. 像素
- - 1.1 物理像素
  - 1.2 CSS像素
- 2. 視口（viewport）
- 3. 移動(dòng)端
- - 結(jié)論：將網(wǎng)頁(yè)的視口設(shè)置為完美視口
- 4. vw單位
- 5. vw適配
五、響應(yīng)式布局
- 1. 響應(yīng)式布局
- 2. 媒體查詢(xún)
- - 2.1 語(yǔ)法
  - 2.2 媒體類(lèi)型
  - 2.3 媒體特性
  - 2.4 斷點(diǎn)

W3C：
制定網(wǎng)頁(yè)開(kāi)發(fā)的標(biāo)準(zhǔn)，以使同一個(gè)網(wǎng)頁(yè)在不同瀏覽器中有相同的效果。
W3C標(biāo)準(zhǔn)：
- 結(jié)構(gòu)：HTML用于描述頁(yè)面的結(jié)構(gòu)
- 表現(xiàn)：CSS用于控制頁(yè)面中元素的樣式
- 行為：JavaScript用于響應(yīng)用戶(hù)的操作

一、HTML

HTML（Hypertext Markup Language）超文本標(biāo)記語(yǔ)言
標(biāo)簽
- 成對(duì)出現(xiàn)：<html></html>
- 自結(jié)束標(biāo)簽：<img>或者<img/>
注釋： 注釋不能嵌套！
標(biāo)簽的屬性： 設(shè)置標(biāo)簽中的內(nèi)容如何顯示



單引號(hào)雙引號(hào)都可
文檔聲明（doctype）:用來(lái)告訴瀏覽器當(dāng)前網(wǎng)頁(yè)的版本

html5：<!doctype html>或者<!Doctype HTML>

放在最頂端
字符集（charset）：編碼和解碼采用的規(guī)則。
亂碼問(wèn)題：編碼和解碼采用不同的字符集
常見(jiàn)的字符集：
- ASCII : 美國(guó)7位
- ISO88591 ：歐洲8位
- GB2312 ：中國(guó)
- GBK
- UTF-8 ：萬(wàn)國(guó)碼
meta標(biāo)簽避免亂碼
```
<head><meta charset="utf-8">
</head>
```

1. HTML標(biāo)準(zhǔn)結(jié)構(gòu)

<!--文檔聲明，聲明當(dāng)前頁(yè)面的版本-->
<!doctype html><!--html的根標(biāo)簽（元素），網(wǎng)頁(yè)中的所有內(nèi)容都要寫(xiě)根元素里面-->
<html><!--head是網(wǎng)頁(yè)的頭部，head中的內(nèi)容不會(huì)在網(wǎng)頁(yè)中直接出現(xiàn)，主要用來(lái)幫助瀏覽器或搜索引擎來(lái)解析網(wǎng)頁(yè)--><head><!--meta標(biāo)簽用來(lái)設(shè)置網(wǎng)頁(yè)的元數(shù)據(jù)，這里meta用來(lái)設(shè)置網(wǎng)頁(yè)的字符集，避免亂碼問(wèn)題--><meta charset="utf-80"><!--title中的內(nèi)容會(huì)顯示在瀏覽器的標(biāo)題欄，搜索引擎主要根據(jù)title中的內(nèi)容來(lái)判斷網(wǎng)頁(yè)的主要內(nèi)容--><title>網(wǎng)頁(yè)的標(biāo)題</title></head><!--body是html的子元素，表示網(wǎng)頁(yè)的主體，網(wǎng)頁(yè)中所有的可見(jiàn)內(nèi)容都應(yīng)該寫(xiě)在body里--><body><!--h1網(wǎng)頁(yè)的一級(jí)標(biāo)題--><h1>網(wǎng)頁(yè)的大標(biāo)題</h1></body>
</html>

2. 文檔的使用

zeal 下載官方文檔到本地，以便離線(xiàn)觀看。
W3school 中文文檔

3. IDE

VScode

“！”+“Tab” 自動(dòng)生成標(biāo)準(zhǔn)html結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

“Ctrl+/” 注釋的快捷鍵
下載插件：live server 可以在保存文件后瀏覽器自動(dòng)更新，不需要手動(dòng)刷新
更改設(shè)置：

? 文件將每個(gè)一段時(shí)間自動(dòng)保存，從而達(dá)到實(shí)時(shí)更新的效果，不需要手動(dòng)保存。

“ctrl+enter”
“Alt+Shift+↑” ：將光標(biāo)所處的那一行內(nèi)容復(fù)制到光標(biāo)的上一行
“Alt+Shift+↓” ：將光標(biāo)所處的那一行內(nèi)容復(fù)制到光標(biāo)的下一行
“Lorem” ：自動(dòng)生成英文文本
"ul>li"+“Tab”：自動(dòng)生成<ul><li>結(jié)構(gòu)

4. 實(shí)體

在HTML中有些時(shí)候，我們不能直接書(shū)寫(xiě)一些特殊符號(hào)，比如：多個(gè)連續(xù)的空格，比如字母兩側(cè)的大于和小于號(hào)
解決方案：使用html中的實(shí)體（轉(zhuǎn)義字符）
實(shí)體的語(yǔ)法：
&實(shí)體的名字；
  空格
> 大于號(hào)
< 小于號(hào)
© 版權(quán)符號(hào)
更多實(shí)體到W3school網(wǎng)站中找

5. meta標(biāo)簽

meta寫(xiě)在head標(biāo)簽里，主要用于設(shè)置網(wǎng)頁(yè)中的一些元數(shù)據(jù)，元數(shù)據(jù)不是給用戶(hù)看的

charset : 指定網(wǎng)頁(yè)的字符集
name : 指定的數(shù)據(jù)的名稱(chēng)
content ：指定的數(shù)據(jù)的內(nèi)容
http-equiv : 頁(yè)面重定向

<head><meta charser="utf-8">
</head>

<meta name="keywords" content="購(gòu)物,電商">
//keywords表示網(wǎng)站的關(guān)鍵字，可以同時(shí)指定多個(gè)關(guān)鍵字，關(guān)鍵字間使用,隔開(kāi)

<meta name="description" content="亞馬遜中國(guó)（z.cn）堅(jiān)持“以客戶(hù)為中心”的理念">
//description用于指定網(wǎng)站的描述，網(wǎng)站的描述會(huì)顯示在搜索引擎的結(jié)果中，類(lèi)似于網(wǎng)站介紹
在這里插入圖片描述
<title></title>
//title標(biāo)簽的內(nèi)容會(huì)作為搜索結(jié)果的超鏈接上的文字顯示

在這里插入圖片描述

<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
//http-equiv=“refresh” 將頁(yè)面重定向到另一個(gè)網(wǎng)站，過(guò)3秒頁(yè)面跳轉(zhuǎn)到百度網(wǎng)站

6. 語(yǔ)義化標(biāo)簽

6.1 標(biāo)題標(biāo)簽：

h1~h6 共六級(jí)標(biāo)簽，重要性遞減

h1在網(wǎng)頁(yè)中的重要性?xún)H次于title標(biāo)簽，一般情況下一個(gè)頁(yè)面中只有一個(gè)h1

一般情況下標(biāo)題標(biāo)簽只會(huì)用到h1~h3

在頁(yè)面中獨(dú)占一行的叫塊元素（block element ）

6.2 塊元素（block element）:

在網(wǎng)頁(yè)中一般通過(guò)塊元素來(lái)對(duì)頁(yè)面進(jìn)行布局

6.3 行內(nèi)元素（inline element）:

行內(nèi)元素主要用來(lái)包裹文字

一般情況下會(huì)在塊元素內(nèi)放行內(nèi)元素，而不會(huì)在行內(nèi)元素中放塊元素。

塊元素中基本什么都能放

p元素是行內(nèi)元素，其中不能放任何的塊元素
瀏覽器在解析網(wǎng)頁(yè)時(shí)，會(huì)自動(dòng)對(duì)網(wǎng)頁(yè)中不符合規(guī)范的內(nèi)容進(jìn)行修正

比如：
- 標(biāo)簽寫(xiě)在了根元素的外部
- P元素中嵌套了塊元素
- 根元素中出現(xiàn)了除head和body以外的子元素
網(wǎng)頁(yè)右鍵“查看網(wǎng)頁(yè)源代碼”：

查看程序員寫(xiě)的源碼
網(wǎng)頁(yè)右鍵“檢查”或者按F12:
【elements】?jī)?nèi)存中的代碼-瀏覽器解析并規(guī)格化后的代碼
布局標(biāo)簽（結(jié)構(gòu)化語(yǔ)義標(biāo)簽）
- header：表示網(wǎng)頁(yè)的頭部
- main ：表示網(wǎng)頁(yè)的主體部分（一個(gè)頁(yè)面中只會(huì)有一個(gè)main)
- footer ：表示網(wǎng)頁(yè)的底部
- nav ：表示網(wǎng)頁(yè)中的導(dǎo)航
- aside ：和主體相關(guān)的其他內(nèi)容（側(cè)邊欄）
- article ：表示一個(gè)獨(dú)立的文章
- section ：表示一個(gè)獨(dú)立的區(qū)塊，上邊的標(biāo)簽都不能表示時(shí)使用
- div ：沒(méi)有語(yǔ)義，就用來(lái)表示一個(gè)區(qū)塊，目前來(lái)講是我們主要的布局元素
- span ：行內(nèi)元素，沒(méi)有任何語(yǔ)義，一般用于在網(wǎng)頁(yè)中選中文字
7. 列表
- 無(wú)序列表
```
 <ul><li>結(jié)構(gòu)</li><li>表現(xiàn)</li><li>行為</li></ul>
```
- 有序列表
```
 <ol><li>結(jié)構(gòu)</li><li>表現(xiàn)</li><li>行為</li></ol>
```
- 定義列表
 使用dl標(biāo)簽創(chuàng)建一個(gè)定義列表
 使用dt表示定義的內(nèi)容
 使用dd對(duì)內(nèi)容進(jìn)行解釋說(shuō)明
```
<dl><dt>結(jié)構(gòu)</dt><dd>結(jié)構(gòu)表示網(wǎng)頁(yè)的結(jié)構(gòu)，用來(lái)規(guī)定網(wǎng)頁(yè)中哪里是標(biāo)題，哪里是段落<dd><dd>結(jié)構(gòu)表示網(wǎng)頁(yè)的結(jié)構(gòu)，用來(lái)規(guī)定網(wǎng)頁(yè)中哪里是標(biāo)題，哪里是段落<dd><dd>結(jié)構(gòu)表示網(wǎng)頁(yè)的結(jié)構(gòu)，用來(lái)規(guī)定網(wǎng)頁(yè)中哪里是標(biāo)題，哪里是段落<dd>
</dl>
```
- 列表之間可以互相嵌套
```
<ul><li>aa<ul><li>aa-1</li><li>aa-2<ul><li>aa-1</li><li>aa-2</li></ul></li></ul></li>
</ul>
```
8. 超鏈接
- 超鏈接可以讓我們從一個(gè)頁(yè)面跳轉(zhuǎn)到其他頁(yè)面，或者是當(dāng)前頁(yè)面的其他位置
- 超鏈接也是一個(gè)行內(nèi)元素，在a標(biāo)簽中可以嵌套除了它自身之外的任何元素
- 使用br標(biāo)簽換行，br*4== 
- 使用a標(biāo)簽定義超鏈接
 - href 指定跳轉(zhuǎn)的目標(biāo)路徑，值可以是一個(gè)外部網(wǎng)站的地址也可以是內(nèi)部網(wǎng)站的地址
 - 相對(duì)路徑：當(dāng)我們需要跳轉(zhuǎn)一個(gè)服務(wù)器內(nèi)部頁(yè)面時(shí)使用
 - ./ ：表示當(dāng)前文件所在目錄，可以省略
 - . ./ ：表示當(dāng)前文件所在目錄的上一級(jí)目錄
 - target，用來(lái)指定超鏈接打開(kāi)的位置
 - _self 默認(rèn)值，在當(dāng)前頁(yè)面中打開(kāi)超鏈接
 - _blank 在一個(gè)新的頁(yè)面中打開(kāi)超鏈接
 - 回到當(dāng)前頁(yè)面頂部：<a href="#">回到頂部</a>
 - 跳轉(zhuǎn)到頁(yè)面的指定位置：<a href="#目標(biāo)元素的id屬性值">回到頂部</a>
 - javascript:; 作為href的一個(gè)占位符，點(diǎn)擊這個(gè)超鏈接后什么也不會(huì)發(fā)生<a href="javascript:;">回到頂部</a>
```
<a href="./target.html" target="_blank">超鏈接1</a>
 
<a href="../列表.html">超鏈接2</a>
 
<a href="./inner/target2.html">超鏈接3</a>
 
<a href="../outer/target3.html">超鏈接4</a>
 
```

9. 圖片標(biāo)簽

使用img標(biāo)簽來(lái)引入外部圖片，img標(biāo)簽是一個(gè)自結(jié)束標(biāo)簽
img這種元素屬于替換元素，塊和行內(nèi)元素之間，具有兩種元素的特點(diǎn)
屬性
- src 指定外部圖片路徑，可以是本地相對(duì)路徑也可以是網(wǎng)站上圖片的路徑
- alt 圖片的描述，默認(rèn)不會(huì)顯示，有些瀏覽器會(huì)在圖片無(wú)法加載時(shí)顯示
  搜索引擎會(huì)根據(jù)alt中的內(nèi)容來(lái)識(shí)別圖片，如果不寫(xiě)alt屬性則圖片不會(huì)被搜索引擎所識(shí)別
- width 圖片的寬度（單位是像素）
- height 圖片的高度
- 寬度和高度中如果只修改了一個(gè)，則另一個(gè)會(huì)等比例縮放
- 注意：
  - 在PC端，不建議修改圖片大小，需要多大就裁多大
  - 在移動(dòng)端，經(jīng)常要對(duì)圖片進(jìn)行縮放（大圖縮小）

圖片的格式：

jpeg(jpg)
- 支持的顏色比較豐富，不支持透明效果，不支持動(dòng)圖
- 一般用來(lái)顯示照片
gif
- 支持的顏色比較少，支持簡(jiǎn)單透明，支持動(dòng)圖
- 顏色單一的圖片，動(dòng)圖
png
- 支持顏色比較豐富，支持復(fù)雜透明，不支持動(dòng)圖
- 顏色豐富，復(fù)雜透明圖片（專(zhuān)為網(wǎng)頁(yè)而生）
webp
- 谷歌新推出的專(zhuān)門(mén)用來(lái)表示網(wǎng)頁(yè)中圖片的一種格式
- 它具備其他格式圖片的所有優(yōu)點(diǎn)，而且文件還特別的小
- 缺點(diǎn)：兼容性不好
base64
- 將圖片使用base64編碼，這樣可以將圖片轉(zhuǎn)換為字符，通過(guò)字符的形式引入圖片
- 一般都是一些需要和網(wǎng)頁(yè)一起加載的圖片才會(huì)使用base64
- 直接在瀏覽器里搜索base64圖片轉(zhuǎn)換網(wǎng)站，導(dǎo)入圖片即可轉(zhuǎn)換
效果一樣，用小的；效果不一樣，用效果好的

<img src="./img/1.gif" alt="松鼠" width="500">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww1.sinaimg.cn%2Fmw690%2F002nFBTqgy1gwdu5ry2flj60u00xldoe02.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639809603&t=348c582f988ad6a27d6c0561a6198081">
<img src="data:image/png;base64,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">

10. 內(nèi)聯(lián)框架

用于向當(dāng)前頁(yè)面引入一個(gè)其他頁(yè)面，搜索引擎不會(huì)爬取引入的頁(yè)面

src 指定要引入的網(wǎng)頁(yè)的路徑
frameborder 指定內(nèi)聯(lián)框架的邊框

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

11. 音頻播放

audio標(biāo)簽用來(lái)向頁(yè)面引入一個(gè)外部的音頻文件
屬性：
- controls 是否允許用戶(hù)控制播放
- autoplay 音頻文件是否自動(dòng)播放
  - 如果設(shè)置了autoplay 則音樂(lè)在打開(kāi)頁(yè)面內(nèi)時(shí)會(huì)自動(dòng)播放
  - 但目前大部分瀏覽器都不會(huì)自動(dòng)對(duì)音樂(lè)進(jìn)行播放
- loop 音樂(lè)是否循環(huán)播放
- 除了通過(guò)src來(lái)指定外部文件的路徑外，還可以通過(guò)source來(lái)指定文件，可以在瀏覽器不支持的情況下顯示提示信息，還可以設(shè)置多個(gè)音頻，在不支持第一個(gè)格式的情況下，顯示第二個(gè)
- embed標(biāo)簽可以兼容一些老版本的瀏覽器

<audio src="./source/audio.mp3" controls autoplay loop></audio>
<audio  controls >對(duì)不起，您的瀏覽器不支持播放音頻！請(qǐng)升級(jí)瀏覽器！<source src="./source/audio.mp3"><source src="./source/audio.ogg">
</audio>

<audio src="./source/audio.mp3" controls autoplay loop></audio>
<audio  controls ><source src="./source/audio.mp3"><source src="./source/audio.ogg"><embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>

12. 視頻播放

video標(biāo)簽用來(lái)向頁(yè)面引入一個(gè)外部的音頻文件
屬性：
- controls 是否允許用戶(hù)控制播放
- autoplay 視頻文件是否自動(dòng)播放
  - 如果設(shè)置了autoplay 則視頻在打開(kāi)頁(yè)面內(nèi)時(shí)會(huì)自動(dòng)播放
  - 但目前大部分瀏覽器都不會(huì)自動(dòng)對(duì)視頻進(jìn)行播放
- loop 視頻是否循環(huán)播放
- 除了通過(guò)src來(lái)指定外部文件的路徑外，還可以通過(guò)source來(lái)指定文件，可以在瀏覽器不支持的情況下顯示提示信息，還可以設(shè)置多個(gè)音頻，在不支持第一個(gè)格式的情況下，顯示第二個(gè)
- embed標(biāo)簽可以兼容一些老版本的瀏覽器

<video src="./source/audio.mp3" controls autoplay loop></video>
<video  controls >對(duì)不起，您的瀏覽器不支持播放視頻！請(qǐng)升級(jí)瀏覽器！<source src="./source/video.webm"><source src="./source/video.mp4">
</video>

<video src="./source/audio.mp3" controls autoplay loop></video>
<video  controls ><source src="./source/video.webm"><source src="./source/video.mp4"><embed src="./source/video.mp4" type="video.mp4" >
</video>

二、CSS

1. CSS的定義

層疊樣式表
網(wǎng)頁(yè)實(shí)際上是一個(gè)多層的結(jié)構(gòu)，通過(guò)CSS可以分別為網(wǎng)頁(yè)的每一層來(lái)設(shè)置樣式，而最終我們能看到的只是網(wǎng)頁(yè)最上邊的一層
CSS用來(lái)設(shè)置網(wǎng)頁(yè)中元素的樣式

2. 使用CSS來(lái)修改元素的樣式

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

在標(biāo)簽內(nèi)部通過(guò)style屬性來(lái)設(shè)置元素的樣式
hello world
問(wèn)題：
使用內(nèi)聯(lián)樣式，樣式只能對(duì)一個(gè)標(biāo)簽生效。如果希望影響到多個(gè)元素必須在每個(gè)元素中都復(fù)制一遍；并且當(dāng)樣式發(fā)生變化時(shí)，我們必須要一個(gè)一個(gè)修改，非常的不方便。
注意：
開(kāi)發(fā)時(shí)絕對(duì)不要使用內(nèi)聯(lián)樣式

2.2 內(nèi)部樣式表

將樣式編寫(xiě)到head中的style標(biāo)簽里，然后通過(guò)CSS的選擇器來(lái)選中元素并為其設(shè)置各種樣式。
可以同時(shí)為多個(gè)標(biāo)簽設(shè)置樣式，并且修改時(shí)只需要修改一處即可。
內(nèi)部樣式表更加方便對(duì)樣式進(jìn)行復(fù)用

<head><style>p{color:green;font-size:50px;}</style>
</head>

問(wèn)題：
我們的內(nèi)部樣式表只能對(duì)一個(gè)網(wǎng)頁(yè)起作用，它里面的樣式不能跨頁(yè)面進(jìn)行復(fù)用。

2.3 外部樣式表

可以將CSS樣式編寫(xiě)到一個(gè)外部的CSS文件中，然后通過(guò)link標(biāo)簽來(lái)引入外部的CSS文件
<link rel="stylesheet" href="./style.css">
外部樣式表需要通過(guò)link標(biāo)簽進(jìn)行引入，意味著只要想使用這些樣式的網(wǎng)頁(yè)都可以對(duì)其進(jìn)行引用，使樣式可以在不同頁(yè)面之間進(jìn)行復(fù)用
將樣式編寫(xiě)到外部的CSS文件中，可以使用到瀏覽器的緩存機(jī)制，從而加快網(wǎng)頁(yè)的加載速度，提供用戶(hù)的體驗(yàn)

3. CSS的基本語(yǔ)法

3.1 CSS的注釋

/*css注釋*/

3.2 CSS選擇器

元素選擇器
- 作用：根據(jù)元素的標(biāo)簽名選中一個(gè)元素
- 語(yǔ)法：標(biāo)簽名{}
- 例子：p{} h1{}

<style>p{}h1{}
</style>

id選擇器
- 作用：根據(jù)元素的id屬性值選中一個(gè)元素
- 語(yǔ)法：#id屬性值
- 例子：#box{} #red{}
- 注意：id的屬性值是惟一的，多個(gè)元素不能使用同一個(gè)id

<head><style>#red{color:red;}</style>
</head>
<body><p id="red">兒童相見(jiàn)不相識(shí)</p>
</body>

類(lèi)選擇器
- 作用：根據(jù)元素的class屬性值選中一組元素
- 語(yǔ)法：.class屬性值
- 例子：.blue{} .abc{}
- 注意：class與id不同，可以重復(fù)使用，可以通過(guò)class屬性為元素分組
  可以同時(shí)為一個(gè)元素指定多個(gè)class，中間用空格隔開(kāi)

<head><style>.blue{color:blue;}.abc{font-size:30px;}</style>
</head>
<body><p class="blue abc">秋水共長(zhǎng)天一色</p><p class="blue">落霞共孤鶩齊飛</p>
</body>

通配選擇器
- 作用：選中頁(yè)面中所有元素
- 語(yǔ)法：*
- 例子：*{}

<style>*{}
</style>

復(fù)合選擇器
- 交集選擇器
  - 作用：選中同時(shí)符合多個(gè)條件的元素
  - 語(yǔ)法：選擇器1選擇器2選擇器3選擇器n{}
  - 注意：交集選擇器中如果有元素選擇器，必須使用元素選擇器開(kāi)頭
```
div.red{font-size:30px;
}
.a.b.c{color:blue;
}
```
- 并集選擇器(選擇器分組)
  - 作用：同時(shí)選擇多個(gè)選擇器對(duì)應(yīng)的元素
  - 語(yǔ)法：選擇器1，選擇器2，選擇器3，選擇器n{}
```
h1,span,.a{color:green;
}
```
關(guān)系選擇器
- 子元素選擇器
  - 作用：選中指定父元素的指定子元素
  - 語(yǔ)法：父元素>子元素
```
div.box>span{color:orange;
}
```
- 后代元素選擇器
  - 作用：選中指定元素內(nèi)的指定后代元素
  - 語(yǔ)法：祖先后代
```
div span{color:skyblue;
}
```
- 選擇下一個(gè)兄弟
  - 作用：選中指定元素后面緊挨著的那個(gè)兄弟元素
  - 語(yǔ)法：前一個(gè)+后一個(gè)
```
p+span{color:red;
}
```
- 選擇下邊所有的兄弟
  - 作用：選中指定元素后面的所有兄弟元素
  - 語(yǔ)法：兄~弟
```
p~span{color:red;
}
```
屬性選擇器
- 作用：選中含有指定屬性的標(biāo)簽
- 語(yǔ)法：
  標(biāo)簽名[屬性名]選擇含有指定屬性的元素
  標(biāo)簽名[屬性名=屬性值]選擇含有指定屬性和屬性值的元素
  標(biāo)簽名[屬性名^=屬性值]選擇屬性值以指定值開(kāi)頭的元素
  標(biāo)簽名[屬性名$=屬性值]選擇屬性值以指定值結(jié)尾的元素
  標(biāo)簽名[屬性名*=屬性值]選擇屬性值中含有某值的元素的元素

p[title]{
}
p[title=abc]{
}
p[title^=abc]{
}
p[title$=abc]{
}
p[title*=abc]{
}

偽類(lèi)選擇器：
- 偽類(lèi)：不存在的類(lèi)，特殊的類(lèi)
  比如：第一個(gè)子元素，被點(diǎn)擊的元素，鼠標(biāo)移入的元素
- 偽類(lèi)一般情況下都是使用:開(kāi)頭
- 在所有子元素中排序：
  - :first-child第一個(gè)子元素
  - :last-child最后一個(gè)子元素
  - nth-child(x)選中第x個(gè)元素
    - 特殊值：
      n ：第n個(gè)，n的范圍0到正無(wú)窮
      2n或even：表示選中偶數(shù)位的元素
      2n+1或odd：表示選中奇數(shù)位的元素
- 在同類(lèi)元素中進(jìn)行排序：
  - :first-of-type第一個(gè)子元素
  - :last-of-type最后一個(gè)子元素
  - nth-of-type(x)選中第x個(gè)元素
- 否定偽類(lèi)：
  - :not()將符合條件的元素從選擇器中去除
  - 例子：ul>li:not(:nth-child(3))
- 超鏈接偽類(lèi)：
  - a:link表示沒(méi)訪問(wèn)過(guò)的鏈接（正常鏈接）
  - a:visited表示訪問(wèn)過(guò)的鏈接，由于隱私的原因，visited這個(gè)偽類(lèi)只能修改鏈接的顏色
  - a:hover表示鼠標(biāo)移入的狀態(tài)
  - a:active表示鼠標(biāo)點(diǎn)擊時(shí)的狀態(tài)
偽元素選擇器：
- 偽元素：表示頁(yè)面中一些特殊的并不真實(shí)存在的元素（特殊的位置）
- 偽元素使用::開(kāi)頭
- ::first-letter表示第一個(gè)字母
```
p::first-letter{font-size:50px;
}
```
- ::first-line表示第一行
```
p::first-line{background-color:yellow;
}
```
- ::selection表示選中的內(nèi)容
```
p::sellection{background-color:greenyellow;
}
```
- ::before元素的開(kāi)始
```
div::before{content:'abc';color:red;
}
```
- ::after元素的最后
```
div::after{content:'haha';color:blue;
}
```
before和after必須結(jié)合content屬性來(lái)使用

3.3 CSS聲明塊

通過(guò)聲明塊指定要為元素設(shè)置的樣式
聲明塊是由一個(gè)一個(gè)聲明組成
聲明是一個(gè)名值對(duì)結(jié)構(gòu)：一個(gè)樣式名對(duì)應(yīng)一個(gè)樣式值，名和值之間以:連接，以;結(jié)尾

p{color:red;font-size:40px;
}

3.4 繼承

樣式的繼承：我們?yōu)橐粋€(gè)元素設(shè)置的樣式同時(shí)也會(huì)應(yīng)用到它的后代元素上
并不是所有的樣式都會(huì)被繼承：
比如：背景相關(guān)的，布局相關(guān)等的這些樣式都不會(huì)被繼承

3.5 選擇器的權(quán)重

樣式的沖突：
當(dāng)我們通過(guò)不同的選擇器，選中相同的元素，并且為相同的樣式設(shè)置不同的值時(shí)，此時(shí)就發(fā)生了樣式的沖突。
選擇器的權(quán)重：
- 內(nèi)聯(lián)樣式 1,0,0,0
- id選擇器 0,1,0,0
- 類(lèi)和偽類(lèi)選擇器 0,0,1,0
- 元素選擇器 0,0,0,1
- 通配選擇器 0,0,0,0
- 繼承的樣式沒(méi)有優(yōu)先級(jí)
交集選擇器：將所有選擇器的優(yōu)先級(jí)相加
并集選擇器：求最大值
相同類(lèi)型的選擇器相加，最大也不會(huì)超過(guò)上個(gè)數(shù)量級(jí)。
比如：類(lèi)選擇器再高也不會(huì)超過(guò)id選擇器
可以在某一個(gè)樣式的后面加!important,獲取最高優(yōu)先級(jí)。
注意：在開(kāi)發(fā)時(shí)慎用！

3.6 像素和百分比

像素
- 屏幕（顯示器）實(shí)際上是由一個(gè)一個(gè)的小點(diǎn)點(diǎn)構(gòu)成的
- 不同屏幕的像素大小是不同的，像素越小的屏幕顯示的效果越清晰
- 所以同樣的200px在不同的設(shè)備下顯示效果不一樣
百分比
- 也可以將屬性值設(shè)置為相對(duì)于其父元素屬性的百分比
- 設(shè)置百分比可以使子元素跟隨父元素的改變而改變
em
- em是相對(duì)于元素的字體大小來(lái)計(jì)算的
- 1em=1 font-size
- em會(huì)根據(jù)字體大小的改變而改變
rem:
- rem是相對(duì)于根元素的字體大小來(lái)計(jì)算的
```
<style>html{font-size=16px;}
</style>
```
- 1rem=16px;

3.7 RGB

在CSS中可以直接使用顏色名來(lái)設(shè)置各種顏色
- 比如：red、orange、yellow、blue、green……
- 但是在css中直接使用顏色名是非常不方便的
RGB值：
- R red,G green, B blue
- 每一種顏色的范圍在0-255(0%-100%)之間
- 語(yǔ)法：RGB（紅色，綠色，藍(lán)色）
RGBA:
- a表示不透明度
- 1：完全不透明 0：完全透明 .5：半透明
十六進(jìn)制的RGB值：
- 語(yǔ)法：#紅色綠色藍(lán)色
- 顏色濃度通過(guò)00-ff
- 如果顏色兩位兩位重復(fù)可以進(jìn)行簡(jiǎn)寫(xiě)
  #aabbcc–>#abc
HSL HSLA
- H 色相（0-360）
- S 飽和度，顏色的濃度 0%-100%
- L 亮度，顏色的亮度 0%-100%

4. CSS的布局

4.1 文檔流（normal flow）

網(wǎng)頁(yè)是一個(gè)多層的結(jié)構(gòu)，一層摞著一層
通過(guò)CSS可以分為為每一層來(lái)設(shè)置樣式
作為用戶(hù)來(lái)說(shuō)只能看到最頂上一層
這些層中，最底下的一層稱(chēng)為文檔流，文檔流是網(wǎng)頁(yè)的基礎(chǔ)，我們所創(chuàng)建的元素默認(rèn)都是在文檔流中進(jìn)行排列
對(duì)于我們來(lái)說(shuō)元素主要有兩個(gè)狀態(tài)：
- 在文檔流中
- 不在文檔流中（脫離文檔流）
元素在文檔流中有什么特點(diǎn)：
- 塊元素
  - 塊元素在頁(yè)面中獨(dú)占一行（自上向下垂直排列）
  - 默認(rèn)寬度是父元素的全部（會(huì)把父元素?fù)螡M(mǎn)）
  - 默認(rèn)高度是被內(nèi)容撐開(kāi)（子元素）
- 行內(nèi)元素
  - 行內(nèi)元素不會(huì)獨(dú)占頁(yè)面的一行，只占自身的大小
  - 行內(nèi)元素在頁(yè)面中自左向右水平排列，如果一行中不能容納下所有的行內(nèi)元素，則元素會(huì)換到第二行繼續(xù)自左向右排列
  - 行內(nèi)元素的默認(rèn)寬度和高度都是被內(nèi)容撐開(kāi)

4.2 盒模型

CSS將頁(yè)面中所有元素都設(shè)置為了一個(gè)矩形的盒子
對(duì)頁(yè)面的布局就是將不同的盒子擺放到不同的位置
每一個(gè)盒子都由以下幾個(gè)部分組成
- 內(nèi)容區(qū)content：內(nèi)容區(qū)大小由width和height兩個(gè)屬性來(lái)設(shè)置
- 內(nèi)邊距padding：內(nèi)容區(qū)和邊框之間的距離是內(nèi)邊距
  - 一共有四個(gè)方向的內(nèi)邊距：
    - padding-top
    - padding-right
    - padding-bottom
    - padding-left
  - 內(nèi)邊距的設(shè)置會(huì)影響到盒子的大小
  - 背景顏色會(huì)延伸到內(nèi)邊距上
- 邊框border：邊框大小會(huì)影響整個(gè)盒子的大小。設(shè)置邊框，至少設(shè)置三個(gè)樣式
  - border-width：默認(rèn)值3px
    - 四個(gè)值：上右下左
    - 三個(gè)值：上左右下
    - 兩個(gè)值：上下左右
    - 一個(gè)值：上下左右
    - border-top-width border-right-width border-bottom-width border-left-width
  - border-color：可以分別指定四個(gè)邊的邊框，規(guī)則和border-width一樣
    - 如果省略則自動(dòng)使用color的顏色值
  - border-style
    - solid 實(shí)線(xiàn)
    - dotted 點(diǎn)狀虛線(xiàn)
    - dashed 線(xiàn)狀虛線(xiàn)
    - double 雙線(xiàn)
    - none 默認(rèn)值，沒(méi)有邊框
  - border簡(jiǎn)寫(xiě)屬性，通過(guò)該屬性可以同時(shí)設(shè)置邊框所有的相關(guān)樣式，并且沒(méi)有順序要求
    border:solid 10px orange;
    border-top:solid 10px orange;
- 外邊距margin：會(huì)影響盒子的位置
  - 元素在頁(yè)面中是按照自左向右的順序排列的
    - 默認(rèn)情況下我們?cè)O(shè)置左和上，外邊距會(huì)移動(dòng)自身元素；而設(shè)置下和右，外邊距會(huì)移動(dòng)其他元素
    - margin-right不會(huì)產(chǎn)生任何效果
一個(gè)盒子的可見(jiàn)框的大小由內(nèi)容區(qū)+內(nèi)邊距+邊框共同決定
盒子的水平布局：
- 一個(gè)元素在其父元素中，水平布局必須滿(mǎn)足以下等式：
- margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素的width
- 如果等式不成立，則會(huì)自動(dòng)調(diào)整
- 如果這七個(gè)值中沒(méi)有auto的情況，瀏覽器會(huì)自動(dòng)調(diào)整margin-right
- 這七個(gè)值中有三個(gè)值可設(shè)置為auto
  - width：默認(rèn)值是auto
  - margin-left
  - margin-right
- 如果某個(gè)值為auto，則會(huì)自動(dòng)調(diào)整auto那個(gè)值以使等式成立
- 如果將一個(gè)寬度和一個(gè)外邊距設(shè)置為auto，則寬度會(huì)調(diào)整到最大
- 如果將三個(gè)值都設(shè)置為auto，則外邊距都是0，寬度最大
- 如果將兩個(gè)外邊距設(shè)置為auto，寬度設(shè)置為固定值，則會(huì)將外邊距設(shè)置為相同的值
  - 利用這個(gè)特性使一個(gè)元素在其父元素中水平居中
盒子的垂直布局
- 默認(rèn)情況下父元素的高度被內(nèi)容撐開(kāi)
- 如果子元素的大小超過(guò)了父元素，則子元素會(huì)從父元素中溢出
  - 使用overflow屬性來(lái)設(shè)置父元素，從而處理溢出的子元素
  - 可選值：
    - visible：默認(rèn)值，子元素會(huì)從父元素中溢出，在父元素外部的位置顯示
    - hidden：溢出內(nèi)容將會(huì)被裁剪不會(huì)顯示
    - scroll：生成兩個(gè)滾動(dòng)條，通過(guò)滾動(dòng)條來(lái)查看完整的內(nèi)容
    - auto：根據(jù)需要生成滾動(dòng)條（推薦）
    - overflow:auto overflow-x overflow-y
相鄰的垂直方向外邊距的重疊
- 兄弟元素
  - 兄弟元素間的相鄰垂直外邊距會(huì)取兩者之間的較大值（兩者都是正值）
  - 如果相鄰的外邊距一正一負(fù)，則取兩者之和
  - 如果相鄰的外邊距都是負(fù)值，則取兩者中絕對(duì)值較大的
  - 兄弟元素之間的外邊距重疊對(duì)于開(kāi)發(fā)是有利的，所以我們不需要進(jìn)行處理
- 父子元素
  - 父子元素間相鄰?fù)膺吘?#xff0c;子元素的會(huì)傳遞給父元素（上外邊距）
  - 父子外邊距的重疊會(huì)影響到頁(yè)面的布局，必須要進(jìn)行處理
  - 解決方法一：
    - 在父元素中設(shè)置padding-top=margin-top
    - 在父元素的height中減去padding-top
  - 解決方法二：
    - 在父元素中設(shè)置border-top=1px 顏色和background-color相同
    - 在子元素中將padding-top的值減去1px
行內(nèi)元素的盒模型
- 行內(nèi)元素不支持設(shè)置寬度和高度
- 行內(nèi)元素可以設(shè)置padding，但垂直方向padding不會(huì)影響頁(yè)面的布局（會(huì)覆蓋下面元素但不會(huì)擠走）
- 行內(nèi)元素可以設(shè)置border，但垂直方向border不會(huì)影響頁(yè)面的布局（會(huì)覆蓋下面元素但不會(huì)擠走）
- 行內(nèi)元素可以設(shè)置margin，但垂直方向margin不會(huì)影響頁(yè)面的布局（會(huì)覆蓋下面元素但不會(huì)擠走）；水平方向的margin進(jìn)行求和
- display用來(lái)設(shè)置元素顯示的類(lèi)型
  - inline 將元素設(shè)置為行內(nèi)元素
  - block 將元素設(shè)置為塊元素
  - inline-block 將元素設(shè)置為行內(nèi)塊元素
    - 行內(nèi)塊：既可以設(shè)置寬度和高度又不會(huì)獨(dú)占一行（不推薦使用，會(huì)出現(xiàn)一些小毛病）
  - table 將元素設(shè)置為一個(gè)表格
  - none 元素不在頁(yè)面中顯示
- visibility 用于設(shè)置元素顯示狀態(tài)
  - visible 默認(rèn)值，元素在頁(yè)面中正常顯示
  - hidden 元素在頁(yè)面中隱藏、不顯示，但依然占據(jù)頁(yè)面位置
去除瀏覽器的默認(rèn)樣式
reset.css

<head><link rel="stylesheet" href="./css/reset.css"></link><style>/*自己的樣式在下面*/</style>
</head>

讓一個(gè)元素水平居中：
margin :50px auto; 左右邊界設(shè)置為auto
讓一個(gè)文字在父元素中垂直居中，只需要將父元素的line-height設(shè)置為和父元素height一樣

<style>.item{height:50px;line-height:50px;}
</style>

塊元素轉(zhuǎn)換為行內(nèi)元素

<style>h2{display:inline-block;}
</style>

搜狗輸入法打v1(中)調(diào)出特殊字符

4.3 盒大小

<style>.box1{width:100px;height:100px;padding:10px;border:10px red solid;box-sizing:content-box; //默認(rèn)，盒子大小140*140}
</style>

在這里插入圖片描述

<style>.box1{width:100px;height:100px;padding:10px;border:10px red solid;box-sizing:border-box;//盒子大小100*100}
</style>

在這里插入圖片描述

4.3 輪廓和圓角

輪廓
outline:10px red solid;
用來(lái)設(shè)置元素的輪廓線(xiàn)，用法與border一模一樣，但輪廓不會(huì)影響到可見(jiàn)框的大小
但是只能是矩形，不能改變r(jià)adius

border:10px red solid;
陰影
box-shadow:10px 20px 50px orange;
向右偏移，向下偏移，模糊半徑，陰影顏色
圓角
border-radius:10px 20px 30px 40px; 左上右上右下左下

border-top-left-radius:100px 30px; //水平方向垂直方向
在這里插入圖片描述

border-top-right-radius:20px 10px;
border-bottom-left-radius:20px 10px;
border-bottom-left-radius:20px 10px;
border-radius:50% //圓形
在這里插入圖片描述

4.4 浮動(dòng)

通過(guò)浮動(dòng)可以使一個(gè)元素向其父元素的左側(cè)或右側(cè)移動(dòng)
float:left;
float:right;
float:none;

浮動(dòng)的特點(diǎn)：
- 浮動(dòng)元素會(huì)完全脫離文檔流，不再占據(jù)文檔流中的位置
- 設(shè)置浮動(dòng)以后元素會(huì)向父元素的左側(cè)或右側(cè)移動(dòng)
- 浮動(dòng)元素默認(rèn)不會(huì)從父元素中移除
- 浮動(dòng)元素向左向右移動(dòng)時(shí)，不會(huì)超過(guò)它前邊的其他浮動(dòng)元素
- 如果浮動(dòng)元素的上邊是一個(gè)沒(méi)有浮動(dòng)的塊元素，則浮動(dòng)元素?zé)o法上移
- 浮動(dòng)元素不會(huì)超過(guò)它上邊的浮動(dòng)的兄弟元素，最多最多就是和它一樣高
- 浮動(dòng)元素不會(huì)蓋住文字，文字會(huì)自動(dòng)環(huán)繞在浮動(dòng)元素的周?chē)?/li>
脫離文檔流的特點(diǎn)：
- 塊元素：
  - 塊元素不再獨(dú)占頁(yè)面的一行
  - 脫離文檔流以后，塊元素的寬度和高度默認(rèn)都被內(nèi)容撐開(kāi)
- 行內(nèi)元素：
  - 行內(nèi)元素脫離文檔流以后會(huì)變成塊元素，特點(diǎn)和塊元素一樣
- 脫離文檔流以后，不需要再區(qū)分塊和行內(nèi)了
利用浮動(dòng)使導(dǎo)航條水平顯示

4.5 簡(jiǎn)單布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>網(wǎng)頁(yè)布局</title><style>header,main,footer{width: 1000px;margin:0 auto;}header{height: 150px;background-color: rgb(247, 244, 244);}main{height: 500px;background-color: rgb(227, 250, 228);margin:10px auto;}nav,article,aside{float: left;height: 100%;}nav{width: 200px;background-color: rgb(225, 199, 247);}article{width: 580px;background-color: rgb(182, 245, 250);float: left;margin: 0 10px;}aside{width: 200px;background-color: rgb(253, 188, 248);}footer{height: 150px;background-color: rgb(250, 240, 213);}</style>
</head>
<body><header></header><main><nav></nav><article></article><aside> </aside></main><footer></footer>
</body>
</html>

在這里插入圖片描述

4.6 高度塌陷和BFC

高度塌陷問(wèn)題：
- 在浮動(dòng)布局中，父元素的高度默認(rèn)是被子元素?fù)伍_(kāi)的，當(dāng)子元素浮動(dòng)后，其會(huì)完全脫離文檔流，子元素從文檔流中脫離，將會(huì)無(wú)法撐起父元素的高度，導(dǎo)致父元素的高度丟失
- 父元素高度丟失后，其下的元素會(huì)自動(dòng)上移，導(dǎo)致頁(yè)面的布局混亂。
BFC(Block Formatting Context) 塊級(jí)格式化環(huán)境
- 隱含屬性，開(kāi)啟后元素變成一個(gè)獨(dú)立的布局區(qū)域
- 元素開(kāi)啟BFC后的特點(diǎn)：
  - 不會(huì)被浮動(dòng)元素所覆蓋
  - 子元素和父元素外邊距不會(huì)重疊（重疊會(huì)導(dǎo)致設(shè)置子元素外邊距，父元素繼承相同的外邊距）
  - 可以包含浮動(dòng)的子元素
- 開(kāi)啟BFC的方法：
  - 設(shè)置元素的浮動(dòng)（不推薦）
  - 設(shè)置為行內(nèi)塊元素（不推薦）
  - 將元素的overflow設(shè)置一個(gè)非visible的值
    - overflow:hidden;常用方法
clear清除浮動(dòng)元素對(duì)當(dāng)前元素所產(chǎn)生的影響
- 原理：當(dāng)前元素加上相應(yīng)的外邊距
- clear:left; 清除左側(cè)元素對(duì)當(dāng)前元素的影響
- clear:right; 清除右側(cè)元素對(duì)當(dāng)前元素的影響
- clear:both; 清除兩側(cè)中影響最大的那側(cè)
- 問(wèn)題：用div結(jié)構(gòu)來(lái)解決表現(xiàn)的問(wèn)題
- 解決方法（終極）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>clear</title><style>.box1{border: 10px red solid;}.box2{height: 100px;width: 100px;background-color: #bfa;float: left;}.box3{height: 200px;width: 100px;background-color: rgb(81, 84, 247);float: left;}.box1::after{       //用偽類(lèi)::after解決css問(wèn)題display: block; //解決行內(nèi)元素不會(huì)獨(dú)占一行content:'';clear:both;     //清除浮動(dòng)元素的最大影響}</style>
</head>
<body><div class="box1"><div class="box2"></div><div class="box3"></div></div>
</body>
</html>

在這里插入圖片描述

4.7 外邊距重疊問(wèn)題與clearfix

外邊距重疊問(wèn)題：
- 子元素設(shè)置外邊距，父元素會(huì)繼承

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 200px;height: 200px;background-color: blue;}.box2{width: 100px;height: 100px;background-color: blueviolet;margin-top: 100px;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div>
</body>
</html>

在這里插入圖片描述

解決方法：

<style>.box1::before{content: '';display: table;}
</style>

在這里插入圖片描述

4.8 高度塌陷和外邊距重疊的終極解決方法

<style>.clearfix::before,.clearfix::after{content: '';display: table;clear: both;}
</style>

4.9 定位

`position:static` 默認(rèn)值，元素是靜止的沒(méi)有開(kāi)啟定位

`position:relative` 相對(duì)定位

相對(duì)定位的特點(diǎn)：
- 元素開(kāi)啟相對(duì)定位后，如果不設(shè)置偏移量，元素不會(huì)發(fā)生任何變化
- 相對(duì)定位是參照元素在文檔流中的原始位置進(jìn)行定位的
- 使元素提升一個(gè)層級(jí)
- 不會(huì)使元素脫離文檔流
- 不會(huì)改變?cè)氐男再|(zhì)，塊還是塊，行內(nèi)還是行內(nèi)
偏移量offset
- top:100px;
- bottom:100px;
- left:100px;
- right:100px;

`position:absolute` 絕對(duì)定位

絕對(duì)定位的特點(diǎn)：
- 開(kāi)啟絕對(duì)定位后，如果不設(shè)置偏移量，元素的位置不會(huì)發(fā)生任何變化
- 元素會(huì)從文檔流中脫離
- 改變?cè)匦再|(zhì)，塊變成行內(nèi)，高度被內(nèi)容撐開(kāi)
- 使元素提升一個(gè)層級(jí)
- 絕對(duì)定位是相對(duì)于其包含塊進(jìn)行定位的
包含塊（containing block）
- 正常情況下，包含塊是離當(dāng)前元素最近的祖先塊元素
- 絕對(duì)定位的包含塊：
  - 包含塊是離他最近的開(kāi)起來(lái)定位的祖先元素
  - 如果所有的祖先元素都沒(méi)有開(kāi)啟定位則根元素就是它的包含塊
  - html(根元素、初始包含塊)
開(kāi)啟絕對(duì)定位后水平方向的布局等式需要添加left和right兩個(gè)值
- 如果9個(gè)值中沒(méi)有auto，則自動(dòng)調(diào)整right值以滿(mǎn)足等式
- 可以設(shè)置auto的值：
  - margin width left right
- left和right的默認(rèn)值是auto，等式不滿(mǎn)足時(shí)自動(dòng)調(diào)整這兩個(gè)值
- 垂直方向的布局也要滿(mǎn)足等式
- 想要水平垂直居中：

left:0;
right:0;
bottom:0;
top:0;
margin:auto;

`position:fixed` 固定定位

固定定位也是一種絕對(duì)定位，大部分特點(diǎn)和絕對(duì)定位一樣
唯一的不同：固定定位永遠(yuǎn)參照瀏覽器的視口進(jìn)行定位，即元素不會(huì)隨網(wǎng)頁(yè)的滾動(dòng)條滾動(dòng)

`position:sticky` 粘滯定位

粘滯定位和相對(duì)定位的特點(diǎn)基本一致
不同的是粘滯定位可以在元素到達(dá)某個(gè)位置時(shí)將其固定
導(dǎo)航條可以使用，但是存在兼容問(wèn)題

`z-index:1`元素的層級(jí)

需要一個(gè)整數(shù)作為參數(shù)，值越大元素的層級(jí)越高，優(yōu)先顯示
如果元素的層級(jí)一樣，優(yōu)先顯示靠下的元素
祖先的元素的層級(jí)再高也不會(huì)蓋住后代元素

4.10 字體樣式

`color`設(shè)置字體顏色

`font-size`設(shè)置字體大小

單位：
- em 相當(dāng)于當(dāng)前元素的一個(gè)font-size
- rem 相當(dāng)于根元素的一個(gè)font-size

`font-family`字體族（字體的格式）

可選值：
- serif 襯線(xiàn)字體
- sans-serif 非襯線(xiàn)字體
- monospace 等寬字體
  - 指定字體的類(lèi)別，瀏覽器會(huì)自動(dòng)使用該類(lèi)別下的字體
- font-family:Microsoft YaHei,Heiti,sans-serif;
  - 優(yōu)先使用第一個(gè)，第一個(gè)無(wú)法使用使用第二個(gè)，最后一個(gè)是字體族保底。

`@font-face`將服務(wù)器中的字體直接提供給用戶(hù)使用

<style>@font-face{font-family:'myfont';src:url(./font/**.ttf);}
</style>

問(wèn)題：
- 加載速度
- 版權(quán)
- 字體格式

4.11 圖標(biāo)字體iconfont

矢量圖片，尺寸改變不會(huì)失真
fontawesome庫(kù)使用步驟：
- 下載
- 解壓
- 將css和webfonts移動(dòng)到項(xiàng)目中
- 將all.css引入到網(wǎng)頁(yè)中
- 使用圖標(biāo)字體
 - 直接通過(guò)類(lèi)名來(lái)使用圖標(biāo)字體（可以通過(guò)style更改圖片尺寸、顏色）
  name在zeal里的fontawesome文檔中找
  只有fas和fab兩種，出現(xiàn)小方塊，就選擇另外一種
 - 通過(guò)實(shí)體來(lái)使用圖標(biāo)字體
 - &#x圖標(biāo)的編碼;&#x圖標(biāo)的編碼;
 - 通過(guò)偽元素來(lái)設(shè)置圖標(biāo)字體
 - 找到要設(shè)置圖標(biāo)的元素通過(guò)before或after選中
 - 在content中設(shè)置字體的編碼(在文檔里找)
 - 設(shè)置字體的樣式
 - fab
 font-family:‘Font Awesome 6 Brands’;
 - fas
 font-family: ‘Font Awesome 6 Free’;
 font-weight: 900;

<style>.box::before{content:'&#x圖標(biāo)的編碼;';font-family:‘Font Awesome 6 Brands’;}
</style>

4.12 行高 line-height

行高：文字占有的實(shí)際高度
- 可以直接指定大小（px em）
- 也可以設(shè)置一個(gè)整數(shù)，是字體指定的倍數(shù)
- 行間距=行高-字體大小
- 字體框：字體存在的格子，設(shè)置font-size實(shí)際上就是設(shè)置字體框的高度
- 行高會(huì)在字體框的上下平均分配
將行高設(shè)置為和高度一樣的值，使單行文字在一個(gè)元素中垂直居中

height:100px;
line-height:100px;

4.13 文本的其他屬性

font ：可以設(shè)置字體相關(guān)的所有屬性：
font:自重字體風(fēng)格字體大小/行高字體族
- 行高可以省略，不寫(xiě)則使用默認(rèn)值
- font-weight:normal/bold字重字體的加粗
- font-style:normal/italic字體的風(fēng)格斜體
文本對(duì)齊：
- 水平對(duì)齊：text-align:left/right/center/justify;兩端對(duì)齊
- 垂直對(duì)齊：vertical-align垂直對(duì)齊的方式
  - baseline 默認(rèn)值基線(xiàn)對(duì)齊
  - top 頂部對(duì)齊
  - bottom 底部對(duì)齊
  - middle 居中對(duì)齊
  - 1000px 數(shù)值
- 圖片插入后與盒子邊框有縫隙，解決方法：
  - img{vertical-align:top/bottom/middle}
文本修飾：text-decoration
- none 什么都沒(méi)有
- underline 下劃線(xiàn)
- line-through 刪除線(xiàn)
- overline 上劃線(xiàn)
網(wǎng)頁(yè)處理空白
- normal 正常
- nowrap 不換行
- pre 保留空白
達(dá)到文本很長(zhǎng)用省略號(hào)結(jié)尾的效果：

<style>.box{width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
</style>

4.14 背景

背景顏色：

background-color:#bfa;

背景圖片：

background-image:url(./img/1.png);
可以同時(shí)設(shè)置背景圖片和背景顏色
如果背景圖片小于元素，則背景圖片會(huì)自動(dòng)在元素中平鋪
如果背景圖片大于元素，則有一部分背景無(wú)法完全顯示

背景重復(fù)方式：

background-repeat:no-repeat; 不重復(fù)
background-repeat:repeat; 默認(rèn)值，背景沿x軸和y軸雙方向重復(fù)
background-repeat:repeat-x; 沿x軸重復(fù)
background-repeat:repeat-y; 沿y軸重復(fù)

背景圖片的位置：

background-position:-50px 300px; 水平方向的偏移量垂直方向的偏移量
background-position:top left; 八個(gè)方位可選，需要兩個(gè)值確定

背景的范圍：

background-clip:border-box; 默認(rèn)值，背景會(huì)出現(xiàn)在邊框的下邊
background-clip:padding-box; 背景出現(xiàn)在內(nèi)容區(qū)和內(nèi)邊距
background-clip:content-box; 背景只出現(xiàn)在內(nèi)容區(qū)

背景圖片的偏移計(jì)算的原點(diǎn)：

background-origin:padding-box; 默認(rèn)值,background-position從內(nèi)邊距開(kāi)始計(jì)算
background-origin:border-box; 背景圖片的偏移量從邊框處開(kāi)始計(jì)算
background-origin:content-box; 背景圖片的偏移量從內(nèi)容區(qū)開(kāi)始計(jì)算

背景圖片的大小：

background-size:30px 40px; 寬度高度
background-size:30px ; 高度等比例放縮
background-size:cover; 圖片的比例不變，將元素鋪滿(mǎn)（圖片可能缺失）
background-size:contain; 圖片比例不變，將圖片在元素中完整顯示（元素可能有空白）

背景屬性簡(jiǎn)寫(xiě)：

background:所有相關(guān)樣式都可以設(shè)置，且沒(méi)有順序要求，也沒(méi)有哪個(gè)屬性是必須寫(xiě)的
background:background-position/background-size 有順序格式要求
background:background-origin background-clip 有順序要求

圖片閃爍問(wèn)題：

圖片屬于網(wǎng)頁(yè)中的外部資源，需要瀏覽器單獨(dú)加載，按需加載，用則加載，不用不加載
在實(shí)現(xiàn)一個(gè)按鈕的點(diǎn)擊動(dòng)圖效果時(shí)，如果使用多張圖片，則在第一次點(diǎn)擊按鈕時(shí)，出現(xiàn)圖片閃爍問(wèn)題
解決方法：
- 將多個(gè)小圖片統(tǒng)一保存到一個(gè)大圖片中，通過(guò)調(diào)整background-position來(lái)顯示
- 這種技術(shù)稱(chēng)為CSS-Sprite，這種圖我們稱(chēng)為雪碧圖

線(xiàn)性漸變：

通過(guò)background-image來(lái)設(shè)置
background-image:linear-gradient(45deg,.5turn,to right,red 50px,yellow 150px);線(xiàn)性漸變
background-image:repeating-linear-gradient(to right,red,yellow 50px)可以平鋪的線(xiàn)性漸變

徑向漸變（放射效果）

默認(rèn)情況下徑向漸變的形狀根據(jù)元素的形狀來(lái)計(jì)算的
- 正方形-》圓形
- 長(zhǎng)方形-》橢圓形
手動(dòng)指定漸變的大小
- circle 圓
- ellipse 橢圓
- closest-side 邊緣延長(zhǎng)到最近邊
- closest-corner 最近角
- farthest-side 最遠(yuǎn)邊
- farthest-corner 最遠(yuǎn)角
指定漸變的位置
- top right left center bottom
background-image:radial-gradient(大小 at 位置，顏色位置，顏色位置，顏色位置)
background-image:radial-gradient(farthest-corner at 100px 100px，顏色位置，顏色位置，顏色位置)

4.15 表格

<table border="1" width="50%" align="center"><tr> <!--行--><td>A1</td>  <!--列--><td>B1</td><td>C1</td><td>D1</td></tr><tr><td>A2</td><td>B2</td><td>C2</td><td rowspan="2">D2</td> <!--rowspan縱向合并單元格--></tr><tr><td>A3</td><td>B3</td><td>C3</td></tr><tr><td>A4</td><td>B4</td><td colspan="2">C4</td> <!--colspan橫向合并單元格--></tr>
</table>

在這里插入圖片描述

<table><thead><tr><th>頭部的單元格</th></tr></thead><tbody>主體</tbody><tfoot>底部</tfoot>
</table>

表格樣式

邊框
- border-spacing:10px;指定邊框之間的距離
- border-collapse:collapse;設(shè)置邊框合并
背景色

<style>tr:nth-child(odd){background-color:#bfa;}
</style>

如果表格中沒(méi)有使用tbody而是直接使用tr,那么瀏覽器會(huì)自動(dòng)創(chuàng)建一個(gè)tbody,并且將tr全都放到tbody里
tr是tbody的子元素，不是table的子元素
td居中
- 水平居中：text-align:center
- 垂直居中：vertical-align:middle
將元素設(shè)置為單元格td 可以實(shí)現(xiàn)垂直居中
- display:table-cell;

4.16 表單

<form action="表單要提交的服務(wù)器的地址" >     <input type="text" name="username"/>      <!--文本框 --><input type="password" name="password"/>  <!--密碼框--><input type="submit" value="注冊(cè)"/>		 <!--提交按鈕--><input type="radio" name="hello" value="a"/><input type="radio" name="hello" value="b" checked/>	<!--單選按鈕 默認(rèn)選中--><input type="checkbox" name="test" value="1"/><input type="checkbox" name="test" value="2"/><input type="checkbox" name="test" value="3" checked/>    <!--多選框 默認(rèn)選中--><input type="button" value="按鈕"/>		 <!--普通按鈕--><input type="reset" value="重置"/>		 <!--重置按鈕--><button type="submit">提交</button><button type="reset">重置</button><button type="button">按鈕</button><select name="haha"><option value="i">選項(xiàng)一</option><option value="ii">選項(xiàng)二</option><option value="iii">選項(xiàng)三</option></select>												<!--下拉列表-->																						
</form>

autocomplete=“off” 關(guān)閉自動(dòng)補(bǔ)全
readonly 將表單項(xiàng)設(shè)置為只讀，數(shù)據(jù)會(huì)提交
disabled 將表單項(xiàng)設(shè)置為禁用，數(shù)據(jù)不會(huì)提交

<input type="checkbox" disabled="disabled"/>

autofocus 設(shè)置表單項(xiàng)自動(dòng)獲取焦點(diǎn)

4.18 設(shè)置網(wǎng)站的圖標(biāo)（在標(biāo)題欄和收藏欄）

網(wǎng)站圖片一般都存儲(chǔ)在網(wǎng)站的根目錄下，名字一般都叫做favicon.ico
<link rel="icon" href="./favicon.ico">

4.19 項(xiàng)目上線(xiàn)壓縮

安裝擴(kuò)展：JS&CSS Minifier
選中要壓縮的文件包->F1->Minify:Document->.mini.

5. 動(dòng)畫(huà)

5.1 過(guò)渡

過(guò)渡transition:

通過(guò)過(guò)渡可以指定一個(gè)屬性發(fā)生變化時(shí)的切換方式

transition-property:

指定要執(zhí)行過(guò)渡的屬性
多個(gè)屬性間使用,隔開(kāi)
如果所有屬性都需要過(guò)渡，則使用all關(guān)鍵字
大部分屬性都支持過(guò)渡效果，從一個(gè)有效數(shù)值向另一個(gè)有效數(shù)值進(jìn)行過(guò)渡
transition-property:height,width;
transition-property:all;

transition-duration

指定過(guò)渡效果的持續(xù)時(shí)間
transition-duration:2s,100ms;

transition-timing-function

過(guò)渡的時(shí)序函數(shù)
指定過(guò)渡的執(zhí)行的方式
可選值：
- ease默認(rèn)值，慢速開(kāi)始，先加速，再減速
- linear勻速運(yùn)動(dòng)
- ease-in加速運(yùn)動(dòng)
- ease-out減速運(yùn)動(dòng)
- ease-in-out先加速后減速
- cubic-bezier()來(lái)指定時(shí)序函數(shù) https://cubic-bezier.com
- steps()分步執(zhí)行過(guò)渡效果，可以設(shè)置第二個(gè)值
  - end:在時(shí)間結(jié)束時(shí)執(zhí)行過(guò)渡（默認(rèn)值）
  - start:在時(shí)間開(kāi)始時(shí)執(zhí)行過(guò)渡
- transition-timing-function:ease;
- transition-timing-function:cubic-bezier(.24,.95,.82,-0.88);
- transition-timing-function:steps(2,start);

transition-delay

過(guò)渡效果的延遲，等待一段時(shí)間后再執(zhí)行過(guò)渡
transition-delay:2s;

所有過(guò)渡屬性

沒(méi)有順序要求
如果要寫(xiě)延遲，則兩個(gè)時(shí)間中第一個(gè)是持續(xù)時(shí)間，第二個(gè)是延遲時(shí)間
transition:2s margin-left 1s;

5.2 動(dòng)畫(huà)

動(dòng)畫(huà)：

動(dòng)畫(huà)可以自動(dòng)觸發(fā)動(dòng)態(tài)效果，過(guò)渡需要在某個(gè)屬性發(fā)生變化時(shí)才觸發(fā)

關(guān)鍵幀：

關(guān)鍵幀設(shè)置了動(dòng)畫(huà)執(zhí)行的每個(gè)步驟

@keyframes test{from{margin-left:0;}to{margin-left:700px;}
}

from表示動(dòng)畫(huà)的開(kāi)始位置，也可以使用0%
to表示動(dòng)畫(huà)的結(jié)束位置，也可以使用100%

animation-name

對(duì)當(dāng)前元素生效的關(guān)鍵幀的名字
animation-name:test;

animation-duration

動(dòng)畫(huà)的執(zhí)行時(shí)間
animation-duration:4s;

animation-delay

動(dòng)畫(huà)的延時(shí)
animation-delay:2s;

animation-timing-function

動(dòng)畫(huà)時(shí)序函數(shù)
animation-timing-function:ease-in-out;

animation-iteration-count

動(dòng)畫(huà)執(zhí)行次數(shù)
可選值：
- 次數(shù)
- infinite 無(wú)限執(zhí)行
animation-iteration-count:1;

animation-direction

指定動(dòng)畫(huà)運(yùn)行的方向
可選值：
- normal：默認(rèn)值，從from向to運(yùn)行，每次都是這樣
- reverse：從to向from運(yùn)行，每次都這樣
- alternate ：從from向to運(yùn)行，重復(fù)執(zhí)行動(dòng)畫(huà)時(shí)反向執(zhí)行
- alternate-reverse：從to向from運(yùn)行，重復(fù)執(zhí)行動(dòng)畫(huà)時(shí)反向執(zhí)行
animation-direction:alternate;

animation-play-state

設(shè)置動(dòng)畫(huà)的執(zhí)行狀態(tài)
可選值：
- running：默認(rèn)值，動(dòng)畫(huà)執(zhí)行
- paused：動(dòng)畫(huà)暫停
animation-play-state:paused;

animation-fill-mode

動(dòng)畫(huà)的填充模式
可選值：
- none：默認(rèn)值，動(dòng)畫(huà)執(zhí)行完畢元素回到原來(lái)位置
- forwards：動(dòng)畫(huà)執(zhí)行完畢元素會(huì)停止在動(dòng)畫(huà)結(jié)束的位置
- backwards：動(dòng)畫(huà)延時(shí)等待時(shí)，元素就會(huì)處于開(kāi)始位置
- both：結(jié)合了forwards和backwards
animation-fill-mode:both;

所有動(dòng)畫(huà)屬性

animation:test 2s 2 1s alternate;

5.3 變形

變形transform

變形就是通過(guò)CSS來(lái)改變?cè)氐男螤罨蛭恢?/li>
變形不會(huì)影響頁(yè)面的布局

平移

translateX()沿X軸方向平移
translateY()沿Y軸方向平移
平移元素百分比是相對(duì)于自身計(jì)算的
transform:translateY(-100px);
transform:translateY(100%);
margin:0 auto這種居中方式只適用元素的大小確定
對(duì)于元素大小不確定的居中：

left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);

translateZ()沿Z軸方向平移
z軸平移,調(diào)整元素和人眼之間的距離，距離越大，元素離人越近。
z軸平移屬于立體效果（近大遠(yuǎn)小），默認(rèn)情況下網(wǎng)頁(yè)是不支持透視，如果需要看見(jiàn)效果必須設(shè)置網(wǎng)頁(yè)的視距

html{perspective:800px;
}
body:hover .box1{transform:translateZ(400px);
}

旋轉(zhuǎn)

通過(guò)旋轉(zhuǎn)可以使元素沿著x y 或 z 旋轉(zhuǎn)指定的角度
- rotateX()
- rotateY()
- rotateZ()
transform:rotateZ(.25turn);
transform:rotateY(180deg) translateZ(400px);
是否顯示元素的背面
backface-visibility:hidden;

tips

transform-style:perserve-3d;3D透視效果
opacity:0.7;整個(gè)元素的透明度是0.7

縮放

scaleX()水平方向縮放
scaleY()垂直方向縮放
scale()雙方向的縮放
scaleZ()Z軸方向的縮放，只有3D效果才能看出來(lái)
transform:scale(2);
變形的原點(diǎn)：默認(rèn)值是center
transform-origin:20px 20px;

6. flex(彈性盒、伸縮盒)

6.1 定義

flex是css中的又一種布局手段，它主要用來(lái)代替浮動(dòng)來(lái)完成頁(yè)面的布局
flex可以使元素具有彈性，讓元素可以跟隨頁(yè)面的大小的改變而改變

6.2 彈性容器

要使用彈性盒，必須先將一個(gè)元素設(shè)置為彈性容器

主軸

彈性元素的排列方向?yàn)橹鬏S

側(cè)軸

與主軸垂直方向的稱(chēng)為側(cè)軸

display

display:flex設(shè)置為塊級(jí)彈性容器
display:inline-flex設(shè)置為行內(nèi)的彈性容器

flex-direction

指定容器中彈性元素的排列方式
row：默認(rèn)值，彈性元素在容器中水平排列（左向右）；主軸：自左向右
row-reverse：彈性元素在容器中反向水平排列（右向左）；主軸：自右向左
column：彈性元素在容器中縱向排列（自上向下）
column-reverse：彈性元素在容器中縱向排列（自下向上）

flex-wrap

設(shè)置彈性元素是否在彈性容器中自動(dòng)換行
nowrap：默認(rèn)值，元素不會(huì)自動(dòng)換行
wrap：元素沿著輔軸方向自動(dòng)換行
wrap-reverse ：元素沿著輔軸反方向換行

flex-flow

wrap 和 direction的簡(jiǎn)寫(xiě)屬性
flex-flow:row wrap;

justify-content

如何分配主軸上的空白空間和元素
flex-start：元素沿著主軸起邊排列
flex-end：元素沿著主軸終邊排列
center：元素居中排列
space-around：空白分布到元素兩側(cè)
space-between：空白均勻分布到元素間
space-evenly：空白分布到元素的單側(cè)

align-items

元素在輔軸上如何對(duì)齊
stretch：默認(rèn)值，將元素的長(zhǎng)度設(shè)置為相同的值
flex-start：元素不會(huì)拉伸，沿著輔軸起邊對(duì)齊
flex-end：沿著輔軸的終邊對(duì)齊
center：居中對(duì)齊
baseline：基線(xiàn)對(duì)齊

align-content

輔助空白空間的分布
space-around：空白分布到元素兩側(cè)
space-between：空白均勻分布到元素間
space-evenly：空白分布到元素的單側(cè)

align-self

只為某個(gè)元素設(shè)置屬性，來(lái)覆蓋align-items

li:nth-child(1){
align-self:stretch;
}

6.3 彈性元素

彈性容器的子元素（后代不是）是彈性元素（彈性項(xiàng)）
彈性元素可以同時(shí)是彈性容器

flex-grow

指定彈性元素的伸展系數(shù)
當(dāng)父元素有多余空間的時(shí)候，子元素如何伸展
父元素的剩余空間會(huì)按照比列進(jìn)行分配
flex-grow:1; flex-grow:2;

flex-shrink

指定彈性元素的收縮系數(shù)
當(dāng)父元素的空間不足以容納所有的子元素時(shí)，對(duì)子元素進(jìn)行收縮

flex-basis

指定的是元素在主軸上的基礎(chǔ)長(zhǎng)度
默認(rèn)值是auto，表示參考元素自身的高度或?qū)挾?/li>
如果傳遞了一個(gè)具體的數(shù)值，則以該值為準(zhǔn)

flex

可以設(shè)置彈性元素所有的三個(gè)樣式
flex:增長(zhǎng) 縮減基礎(chǔ);
flex:initial;
initial：“flex:0 1 auto”
auto：“flex:1 1 auto”
none：“flex:0 0 auto” 彈性元素沒(méi)有彈性

order

決定彈性元素的排列順序

li:nth-child(1){order:2;
}
li:nth-child(2){order:3;
}
li:nth-child(3){order:1;
}

三、LESS

1. less簡(jiǎn)介

less是一門(mén)css的預(yù)處理語(yǔ)言
less是一個(gè)css的增強(qiáng)版，通過(guò)less可以編寫(xiě)更少的代碼實(shí)現(xiàn)更強(qiáng)大的樣式
在less中添加了許多的新特性：像對(duì)變量的支持、對(duì)mixin的支持… …
less的語(yǔ)法大體上和css語(yǔ)法一致，但是less中增添了許多對(duì)css的擴(kuò)展
瀏覽器無(wú)法直接執(zhí)行l(wèi)ess代碼，要執(zhí)行必須向?qū)ess轉(zhuǎn)換為css，然后再由瀏覽器執(zhí)行

2. css的不足

引入變量，但存在兼容問(wèn)題

html{/* css原生也支持變量的設(shè)置 */--color:#ff0;--length:200px;}
.box{width: var(--length);height: var(--length);color: var(--color);}

引入計(jì)算函數(shù)，但存在兼容問(wèn)題

.box1{/* calc()計(jì)算函數(shù) */width: calc(200px*2);height: var(--length);background-color: var(--color);}

3. less的語(yǔ)法

3.1 安裝插件

Easy LESS->F1->compile less to css->生成一個(gè)同名css文件

3.2 注釋

// less中的單行注釋，注釋中的內(nèi)容不會(huì)被解析到css中/*css中的注釋，內(nèi)容會(huì)被解析到css文件中
*/

3.3 變量

在變量中可以存儲(chǔ)一個(gè)任意的值，并且我們可以在需要時(shí)，任意的修改變量中的值。
變量的語(yǔ)法： @變量名

@a:200px;
@b:#bfa;
@c:box6;

使用變量時(shí)，如果是直接使用則以 @變量名 的形式使用即可

.box5{width: @a;color:@b;
}

作為類(lèi)名，或者一部分值使用時(shí)必須以 @{變量名} 的形式使用

.@{c}{width: @a;background-image: url("@{c}/1.png");
}

變量發(fā)生重名時(shí)，會(huì)優(yōu)先使用比較近的變量
可以在變量聲明前就使用變量
可以引用其他屬性的值

div{width: 300px;height: $width;
}

3.4 父元素和擴(kuò)展

&表示外層的父元素

.box1{.box2{color: red;}>.box3{color: red;&:hover{color: blue;}}&:hover{color: orange;}div &{width: 100px;}
}

相當(dāng)于

.box1 .box2 {color: red;
}
.box1 > .box3 {color: red;
}
.box1 > .box3:hover {color: blue;
}
.box1:hover {color: orange;
}
div .box1 {width: 100px;
}

:extend() 對(duì)當(dāng)前選擇器擴(kuò)展指定選擇器的樣式（選擇器分組）

.p1{width: 100px;height: 200px;
}
.p2:extend(.p1){color: red;
}

相當(dāng)于

.p1,
.p2 {width: 100px;height: 200px;
}
.p2 {color: red;
}

3.5 混合函數(shù)

使用類(lèi)選擇器時(shí)可以在選擇器后邊添加一個(gè)括號(hào)，這時(shí)我們實(shí)際上就創(chuàng)建了一個(gè)mixins，也就是混合函數(shù)
在混合函數(shù)中可以直接設(shè)置變量以及默認(rèn)值

.test(@w:100px,@h:200px,@bg-color:red){ //這部分不會(huì)顯示在css文件中width: @w;height: @h;border: 1px solid @bg-color;
}
div{//調(diào)用混合函數(shù)，按順序傳遞參數(shù)，可以不用寫(xiě)變量名.test(200px,300px,#bfa);.test(@bg-color:red, @h:100px, @w:300px);
}

3.6 運(yùn)算

在less中所有數(shù)值都可以直接進(jìn)行運(yùn)算
問(wèn)題：/可能會(huì)無(wú)效
解決方法：
- 加括號(hào)：font-size: (100vw/@total-width)*40;
- 加.：height: 175./40rem;

3.7 import引入其他less

通過(guò)import來(lái)將其他的less引入到當(dāng)前的less中，實(shí)現(xiàn)模塊化
@import"syn.less";

3.8 調(diào)試

在網(wǎng)頁(yè)中進(jìn)行調(diào)試時(shí)，顯示的是css的行數(shù)，想要知道對(duì)應(yīng)的less的行號(hào)
去擴(kuò)展中找到Easy LESS 復(fù)制代碼
設(shè)置
粘貼到對(duì)應(yīng)位置并修改值
在網(wǎng)頁(yè)中就可以看到less中的行號(hào)

四、顯示

1. 像素

屏幕是由一個(gè)一個(gè)發(fā)光的小點(diǎn)構(gòu)成，這一個(gè)個(gè)的小點(diǎn)就是像素
分辨率：1920*1080說(shuō)的就是屏幕中小點(diǎn)的數(shù)量

1.1 物理像素

上面所說(shuō)的小點(diǎn)點(diǎn)

1.2 CSS像素

編寫(xiě)網(wǎng)頁(yè)時(shí)，我們所用像素都是CSS像素
瀏覽器在顯示網(wǎng)頁(yè)時(shí)，需要將css像素轉(zhuǎn)換為物理像素然后呈現(xiàn)
一個(gè)css像素最終由幾個(gè)物理像素顯示，由瀏覽器決定：
- 默認(rèn)情況下在pc端，一個(gè)css像素=一個(gè)物理像素

2. 視口（viewport）

視口就是屏幕中用來(lái)顯示網(wǎng)頁(yè)的區(qū)域
可以通過(guò)查看視口的大小來(lái)觀察css像素和物理像素的比值
默認(rèn)情況下：
- 視口寬度 1920px(css像素)
  1920px(物理像素)
  此時(shí)，css像素和物理像素的比是1:1
放大兩倍的情況：
- 視口寬度 960px(css像素)
  1920px(物理像素)
  此時(shí)，css像素和物理像素的比是1:2
我們可以通過(guò)改變視口的大小，來(lái)改變css像素和物理像素的比值

3. 移動(dòng)端

在不同的屏幕，單位像素的大小是不同的，像素越小屏幕會(huì)清晰
- 24寸 1920*1080
- i6 4.7寸 750*1334
智能手機(jī)的像素點(diǎn)遠(yuǎn)遠(yuǎn)小于計(jì)算機(jī)的像素點(diǎn)
問(wèn)題：一個(gè)寬度為900px的網(wǎng)頁(yè)在iphone6中要如何顯示？
默認(rèn)情況下，移動(dòng)端的網(wǎng)頁(yè)都會(huì)將視口設(shè)置為980像素（css像素)，以確保pc端網(wǎng)頁(yè)可以在移動(dòng)端正常訪間，導(dǎo)致網(wǎng)頁(yè)中的內(nèi)容非常小，而且如果網(wǎng)頁(yè)的寬度超過(guò)了980,移動(dòng)端的瀏覽器會(huì)自動(dòng)對(duì)網(wǎng)頁(yè)縮放以完整顯示網(wǎng)頁(yè)
查看手機(jī)分辨率的網(wǎng)址：https://material.io/resources/devices/
所以基本大部分的pc端網(wǎng)站都可以在移動(dòng)端中正常瀏覽，但是往往都不會(huì)有一個(gè)好的體驗(yàn)，為了解決這個(gè)問(wèn)題，大部分網(wǎng)站都會(huì)專(zhuān)門(mén)為移動(dòng)端設(shè)計(jì)網(wǎng)頁(yè)
編寫(xiě)移動(dòng)頁(yè)面時(shí)，必須要確保有一個(gè)比較合理的像素比:
- 1css像素對(duì)應(yīng)2個(gè)物理像素
- 1css像素對(duì)應(yīng)3個(gè)物理像素
可以通過(guò)meta標(biāo)簽來(lái)設(shè)置視口大小
- -每一款移動(dòng)設(shè)備設(shè)計(jì)時(shí),都會(huì)有一個(gè)最佳的像素比，一般我們只需要將像素比設(shè)置為該值即可得到一個(gè)最佳效果。
- 將像素比設(shè)置為最佳像素比的視口大小我們稱(chēng)其為完美視口

結(jié)論：將網(wǎng)頁(yè)的視口設(shè)置為完美視口

<meta name="viewport" content="width=device-width， initial-scale=1.0">

4. vw單位

不同的設(shè)備完美視口的大小是不一樣的
由于不同設(shè)備視口和像素比不同，所以同樣的375個(gè)像素在不同的設(shè)備下意義是不一樣
比如在iphone6中 375就是全屏，而到了plus中375就會(huì)缺—塊
所以在移動(dòng)端開(kāi)發(fā)時(shí)，就不能再使用px來(lái)進(jìn)行布局了
vw表示的是視口的寬度（viewport width)
- 100vw =一個(gè)視口的寬度
- 1vw = 1%視口寬度
- vw這個(gè)單位永遠(yuǎn)相當(dāng)于視口寬度進(jìn)行計(jì)算
設(shè)計(jì)圖的寬度
- 750px 1125px
創(chuàng)建一個(gè)48px * 35px大小的元素
- 100vw = 750px(設(shè)計(jì)圖的像素)0.1333333333333333vw= 1px
- 6.4vw = 48px(設(shè)計(jì)圖像素)
- 4.667vw = 35px

5. vw適配

網(wǎng)頁(yè)中字體大小最小是12px，不能設(shè)置一個(gè)比12像素還小的字體
如果我們?cè)O(shè)置了一個(gè)小于12px的字體,則字體自動(dòng)設(shè)置為12
0.1333333vw =1px
5.3333vw = 40px

html{font-size:5.3333vm;
}
.box1{width:1.2rem;height:0.875rem;
}

五、響應(yīng)式布局

1. 響應(yīng)式布局

網(wǎng)頁(yè)可以根據(jù)不同的設(shè)備或窗口大小呈現(xiàn)出不同的效果
使用響應(yīng)式布局，可以使一個(gè)網(wǎng)頁(yè)適用于所有設(shè)備
響應(yīng)式布局的關(guān)鍵就是媒體查詢(xún)
通過(guò)媒體查詢(xún)，可以為不同的設(shè)備，或設(shè)備的不同狀態(tài)分別設(shè)置樣式
響應(yīng)式設(shè)計(jì)的網(wǎng)頁(yè)：
- 移動(dòng)端優(yōu)先
- 漸進(jìn)增強(qiáng)

2. 媒體查詢(xún)

2.1 語(yǔ)法

@media 查詢(xún)規(guī)則{}

2.2 媒體類(lèi)型

all：所有設(shè)備
print：打印設(shè)備
screen：帶屏幕的設(shè)備
speech：屏幕閱讀器
可以使用,連接多個(gè)媒體類(lèi)型，這樣它們之間就是一個(gè)并集的關(guān)系
可以使用and連接多個(gè)媒體類(lèi)型，這樣它們之間就是一個(gè)交集的關(guān)系
可以在媒體類(lèi)型前添加一個(gè)only，表示只有。only的使用主要是為了兼容一些老版本瀏覽器

@media print,screen{body{background-color:#bfa;}
}

2.3 媒體特性

width視口的寬度
height視口的高度
min-width視口的最小寬度（視口大于指定寬度時(shí)生效）
max-width視口的最大寬度（視口小于指定寬度時(shí)生效）

@media only screen and (min-width:500px)and(max-width:700px){body{background-color:#bfa;}
}

2.4 斷點(diǎn)

樣式切換的分界點(diǎn)，我們稱(chēng)其為斷點(diǎn)，也就是網(wǎng)頁(yè)的樣式會(huì)在這個(gè)點(diǎn)時(shí)發(fā)生變化
一般比較常用的斷點(diǎn)
- 小于768 超小屏幕 max-width=768px
- 大于768 小屏幕 min-width=768px
- 大于992 中型屏幕 min-width=992px
- 大于1200 大屏幕 min-width=1200px

查看全文

http://www.risenshineclean.com/news/38089.html

中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网

HTML5+CSS3

文章目錄

一、HTML

1. HTML標(biāo)準(zhǔn)結(jié)構(gòu)

2. 文檔的使用

3. IDE

4. 實(shí)體

5. meta標(biāo)簽

6. 語(yǔ)義化標(biāo)簽

6.1 標(biāo)題標(biāo)簽：

6.2 塊元素（block element）:

6.3 行內(nèi)元素（inline element）:

7. 列表

8. 超鏈接

9. 圖片標(biāo)簽

10. 內(nèi)聯(lián)框架

11. 音頻播放

12. 視頻播放

二、CSS

1. CSS的定義

2. 使用CSS來(lái)修改元素的樣式

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

2.2 內(nèi)部樣式表

2.3 外部樣式表

3. CSS的基本語(yǔ)法

3.1 CSS的注釋

3.2 CSS選擇器

3.3 CSS聲明塊

3.4 繼承

3.5 選擇器的權(quán)重

3.6 像素和百分比

3.7 RGB

4. CSS的布局

4.1 文檔流（normal flow）

4.2 盒模型

4.3 盒大小

4.3 輪廓和圓角

4.4 浮動(dòng)

4.5 簡(jiǎn)單布局

4.6 高度塌陷和BFC

4.7 外邊距重疊問(wèn)題與clearfix

4.8 高度塌陷和外邊距重疊的終極解決方法

4.9 定位

position:static 默認(rèn)值，元素是靜止的沒(méi)有開(kāi)啟定位

position:relative 相對(duì)定位

position:absolute 絕對(duì)定位

position:fixed 固定定位

position:sticky 粘滯定位

z-index:1元素的層級(jí)

4.10 字體樣式

color設(shè)置字體顏色

font-size設(shè)置字體大小

font-family字體族（字體的格式）

@font-face將服務(wù)器中的字體直接提供給用戶(hù)使用

4.11 圖標(biāo)字體iconfont

4.12 行高 line-height

4.13 文本的其他屬性

4.14 背景

背景顏色：

背景圖片：

背景重復(fù)方式：

背景圖片的位置：

背景的范圍：

背景圖片的偏移計(jì)算的原點(diǎn)：

背景圖片的大小：

背景屬性簡(jiǎn)寫(xiě)：

圖片閃爍問(wèn)題：

線(xiàn)性漸變：

徑向漸變（放射效果）

4.15 表格

表格樣式

4.16 表單

4.18 設(shè)置網(wǎng)站的圖標(biāo)（在標(biāo)題欄和收藏欄）

4.19 項(xiàng)目上線(xiàn)壓縮

5. 動(dòng)畫(huà)

5.1 過(guò)渡

過(guò)渡transition:

transition-property:

transition-duration

一、HTML

二、CSS

`position:static` 默認(rèn)值，元素是靜止的沒(méi)有開(kāi)啟定位

`position:relative` 相對(duì)定位

`position:absolute` 絕對(duì)定位

`position:fixed` 固定定位

`position:sticky` 粘滯定位

`z-index:1`元素的層級(jí)

`color`設(shè)置字體顏色

`font-size`設(shè)置字體大小

`font-family`字體族（字體的格式）

`@font-face`將服務(wù)器中的字體直接提供給用戶(hù)使用

6. flex(彈性盒、伸縮盒)

三、LESS

四、顯示

五、響應(yīng)式布局