Web工程实验
Web工程實驗
簡介
以下內容均總結自尚硅谷視頻 開放資料 ，官網鏈接: http://www.atguigu.com/.
課程名稱為 尚硅谷前端基礎_李立超老師（含HTML、CSS、H5、C3）(B站視頻連接附上)
所使用的開發工具為VS code，安裝教程和配置方法在視頻中有詳細步驟。
所需的配置內容為：
1 安裝VSCode
2 安裝中文語言包
3 嘗試安裝ayu主題
4 將一個目錄作為項目目錄大
5 創建一個新網頁
6 安裝live server
7 嘗試通過live server來運行網頁
8 設置代碼自動存儲
注意：以下內容僅作為學習筆記參考，以及復習知識使用，需要一定基礎。
課程評價
尚硅谷系列課程最大的特點是細，巨細無比。并且面向企業開發實戰，實用性很強與企業關聯緊密。但也是由于太過詳細導致課程內容較多和繁雜。適合0基礎新手并且有強烈學習欲望不容易半途而廢的學生學習。
快捷鍵：
以下為使用VScode時可以使用的快捷鍵。
注釋： Ctrl+/
自動補全標簽： 標簽名+tap
補全多個標簽： 標簽名*數字 回車
有時候，我們不能直接書寫部分符號，比如< > 和連續的空格，
< >可以在中間加空格解決，其他使用html中的實體（轉義字符）
例如: 空格 <小于
！+tap直接生成網頁模板
Ul>li * 5 + tab 可以生成ul里面包含五個li
搜狗輸入法中文v1可以輸出符號
多行編輯(列編輯): Alt+Shift+鼠標左鍵 ，ctrl+Alt+Down/Up
連點兩下即選中這一行
第一章：introduce
1.網頁的結構
結構(HTML )
表現(CSS)
行為(JavaScript)
CSS：層疊樣式表
2.META標簽
主要用于設置網頁中的一些元數據，元數據不是給用戶看
charset指定網頁的字符集
name指定的數據的名稱
content指定的數據的內容
keywords表示網站的關鍵字，可以同時指定多個關鍵字，關鍵字間使用,隔開
title標簽的內容會作為搜索結果的超鏈接上的文字顯示
description 用于指定網站的描述
例如：
將頁面重定向到另一個網站url=后面接的是重定向后的網址
<meta name="keywords" content="HTML5,前端,CSS3"> <meta http-equiv=" refresh" confent= "3 ;url=https:/ /www . mozilla.org">3.語義化標簽
在網頁中HTML專門用來負責網頁的結構
所以在使用html標簽時，應該關注的是標簽的語義，而不是它的樣式，比如不要管h1是不是比h2大。
標題標簽:
h1 ~ h6一共有六級標題
從h1~h6重要性遞減，h1最重要，h6最不重要
h1在網頁中的重要性僅次于title標簽，一般情況下一個頁 面中只會有一個h1
一般情況下標題標簽 只會使用到h1~h3, h4~h6很少用
4.塊元素
在頁面中獨占一行的元素稱為塊元素(block element)
在網頁中-般通過塊元素來對頁面進行布局
hgroup標簽用來為標題分組，可以將一組相關的標題同時放入到hgroup
例如：
4.行內元素
在頁面中不會獨占一行的元素稱為行內元素(inline element)。
行內元素主要用來包裹文字 如：
Em標簽用于表示語音語調的一個加重，效果為變為斜體
strong表示強調，重要內容
blockquote 表示一個長引用
q表示一個短引用
一般情況下會在塊元素中放行內元素，而不會在行內元素中放塊元素
塊元素中基本上什么都能放
p元素中不能放任何的塊元素
瀏覽器在解析網頁時，會自動對網頁中不符合規范的內容進行修正
比如:
標簽寫在了根元素的外部
p元素中嵌套了塊元素
根元素中出現了除head和body以外的子元素
5.布局標簽(結構化語義標簽)
header表示網頁的頭部
main表示網頁的主體部分(一個頁面中只會有一個。main)
footer表示網頁的底部
nav表示網頁中的導航
aside和主體相關的其他內容(側邊欄)
article表示一個獨立的文章
section 表示一個獨立的區塊，上邊的標簽都不能表示時使用secctiion
div 沒有語義， 就用來表示一個區塊，目前來講div還是我們主要的布局元素
span行內元素，沒有任何的語義，一般用于在網頁中選中文字
6.列表
1、有序列表
2、無序列表
3、定義列表
有序列表，使用ol標簽來創建有序列表
使用li表示列表項
無序列表，使用ul標簽來創建無序列表
使用li表示列表項
定義列表，使用dl標簽來創建一個 定義列表
使用dt來表示定義的內容
使用dd來對內容進行解釋說明
列表之間可以互相嵌套
例如：
實際效果：
- 結構
- 表現
- 行為
7.超鏈接：
可以讓我們從一個頁面跳轉到其他頁面，
或者是當前頁面的其他的位置
使用a標簽來定義超鏈接
屬性:
href指定跳轉的目標路徑，當我們需要跳轉一個服務器內部的頁面時，一般我們都會使用相對路徑
超鏈接是也是一個行內元素，在a標簽中可以嵌套除它自身外的任何元素
相對路徑都會使用./或. ./開頭，且./可以省略
值可以是一個外部網站的地址
也可以寫一個內部頁面的地址
target屬性，用來指定超鏈接打開的位置
可選值:
self默認值在當前頁面中打開超鏈接
blank在一個新的頁面打開超鏈接
可以直接將超鏈接的href屬性設置為#，這樣點擊超鏈接以后
頁面不會發生跳轉，而是轉到當前頁面的頂部的位置
可以跳轉到頁面的指定位置，只需將href屬性設置#目標元素的id屬性值
id屬性(唯一不重復的)：每一個標簽都可以添加一個d屬性
id屬性就是元素的唯一標識，同一個頁面中不能出現重復的id屬性。
可以使用javascript:;來作為href的屬性，此時點擊這個超鏈接什么也不會發生
8.圖片：
圖片標簽用于向當前頁面中引入一個外部圖片
使用img標簽來引入外部圖片，img標簽是一個自結束標簽
img這種元素屬于替換元素(塊和行內元素之間，具有兩種元素的特點)
屬性:
src. 屬性指定的是外部圖片的路徑(路徑規則和超鏈接是一 樣的)
alt圖片的描述，這個描述默認情況下不會顯示，有些瀏覽器會圖片無法加載時顯示
搜索引擎會根據alt中的內容來識別圖片，如果不寫alt屬性則圖片不會被搜索引擎所收錄
width圖片的寬度( 單位是像素)
height圖片的高度
寬度和高度中如果只修改了一個，則另一個會等比例縮放
注意:
一般情況在pc端，不建議修改圖片的大小，需要多大的圖片就裁多大
但是在移動端，經常需要對圖片進行縮放(大圖縮小)
9.圖片的格式:
jpeg(jpg)
一支持的顏色比較豐富，不支持透明效果，不支持動圖
一般用來顯示照片
gif
支持的顏色比較少，支持簡單透明， 支 持動圖
顏色單一的圖片，動圖
png
支持的顏色豐富，支持復雜透明，不支持動圖
顏色豐富，復雜透明圖片(專為網頁而生)
webp
這種格式是谷歌新推出的專門用來表示網頁中的圖片的一種格式
它具備其他圖片格式的所有優點，而且文件還特別的小
缺點:兼容性不好
base64
將圖片使用base64編碼，這樣可以將圖片轉換為字符，通過字符的形式來
引入圖片
一般都是一些需要和網頁-起加載的圖片才會使用base64
效果一樣，用小的
效果不一樣，用效果好的
10.內聯框架
內聯框架，用于向當前頁面中引入一個其他頁面
src 指定要引入的網頁的路徑
frameborder 指定內聯框架的邊框
11.音頻播放
用來向頁面中引入一個外部的音頻文件的
音視頻文件引入時，默認情況下不允許用戶自已控制播放停止
屬性:
controls是否允許用戶控制播放
autoplay音頻文件是否自動播放，有的瀏覽器不支持
一如果設置了autoplay 則音樂在打開頁面時會自動播放
但是目前來講大部分瀏覽器都不會自動對音樂進行播放
Loop 音樂是否循環播放
除了通過src來指定外部文件的路徑以外，還可以通過source來指定文件的路徑
用source引用可以讓不支持的瀏覽器顯示文字
Embed 是一個老式的標簽，可以適用所有瀏覽器
以上代碼優先執行第一條，無法執行則往下接替
效果如下：
效果如下：
效果如下：
第二章CSS
1.CSS簡介
第一種方式：(內聯樣式，行內樣式):
在標簽內部通過style屬性來設置元素的樣式
問題:
使用內聯樣式，樣式只能對一個標簽生效，
如果希望影響到多個元素必須在每一個元素中都復制一遍
并且當樣式發生變化時，我們必須要一個一個的修改，非常的不方便
注意:開發時絕對不要使用內聯樣式
第二種方式：(內部樣式表)
將樣式編寫到head中的style標簽里
然后通過css的選擇器來選中元素并為其設置各種樣式
可以同時為多個標簽設置樣式，并且修改時只需要修改-處即可全部應用
內部樣式表更加方便對樣式進行復用
問題:
我們的內部祥式表只能對一個網頁起作用，
它里邊的樣式不能跨頁面進行復用
第三種方式：(外部樣式表) 最佳實踐
可以將CSS樣式編寫到一個外部的CSS文件中，
然后通過link 標簽來引入外部的CSS.文件
外部樣式表需要通過link標簽進行引入，
意味著只要想使用這些樣式的網頁都可以對其進行引用
使樣式可以在不同頁面之間進行復用
將樣式編寫到外部的CSS文件中，可以使用到瀏覽器的緩存機制，
從而加快網頁的加載速度，提高用戶的體驗。
2.CSS的基本語法:
選擇器 + 聲明塊
選擇器，通過選擇器可以選中頁面中的指定元素
聲明塊，通過聲明塊來指定要為元素設置的樣式
聲明塊由一個一個的聲明組成
聲明是一個名值對結構
一個樣式名對應一個樣式值， 名和值之間以 : 連接， 以 ; 結尾
3.常用選擇器
（1）id選擇器：
作用:根據元素的id屬性值選中一個元素
語法: #id屬性值{ }
例子：
（2）類選擇器：
作用:根據元素的cLass 屠性值選中一組元素
語法: . class 屬性值
例子：
class 是一個標簽的屬性，它和id類似，不同的是class可以重復使用
可以通過class,屬性來為元素分組
可以同時為一個元素指定多個class屬性
（3）通配選擇器：
作用:選中頁面中的所有元素
語法:*
例子：
注意：p * { }中p和*之間要有空格
4.復合選擇器
（1）交集選擇器:
作用:選中同時復合多個條件的元素
語法:選擇器1選擇器2選擇器3選擇器n{ }
注意點:
交集選擇器中如果有元素選擇，必須使用元素選擇器開頭
（2）并集選擇器:
作用:同時選擇多個選擇器對應的元素
語法:選擇器1,選擇器2，選擇器3，選擇器n{ }
5.關系選擇器
（1）子元素選擇器
作用:選中指定父元素的指定子元素
語法: 父元素>子元素
（2）后代元素選擇器:
作用:選中指定元素內的指定后代元素
語法:祖先 后代(中間是空格)
（3）兄弟選擇器
選擇下一個兄弟
語法:前一個 + 下一個
選擇下邊所有的兄弟
語法:兄~弟
6.屬性選擇器
[屬性名]選擇含有指定屬性的元素 [屬性名=屬性值]選擇含有指定屬性和屬性值的元素 [屬性名^=屬性值]選擇屬性值以指定值開頭的元素 [屬性名$= 屬性值]選擇屬性值 以指定值結尾的元素 [屬性名*=屬性值]選擇屬性值中含有某值的元素的元素如：
p[title$=abc]{ }7.偽類選擇器
偽類(不存在的類，特殊的類)
偽類用來描述一個元素的特殊狀態
比如:第一個子元素、被點擊的元素、鼠標移入的元素…
偽類一般情況下都是使用:開頭
:first-child第一個子元素，這些都是限定詞，針對：前面的元素
:last-child 最后一個子元素
:nth-child()選中第n個子元素
特殊值:
n 第n個n的范圍0到正無窮
2n或even表示選中偶數位的元素
2n+1或odd表示選中奇數位的元素
以上這些偽類都是根據所有的子元素進行排序
:first-of-type
:last-of-type
:nth-of- type()
這幾個偽類的功能和上述的類似，不通點是他們是在同類型元素中進行排序
:not()否定偽類
將符合條件的元素從選擇器中去除
如：
指的是li是ul的2n+1個孩子時變紅色
注意：li和后面的：之間不要有空格！
a元素的偽類
:link 用來表示沒訪間過的娃接 (正常的鏈接)
:visited用來表示訪問過的鏈接 由于隱私的原因，所以visited這個偽類只能修改鏈接的顏色
:hover 用來表示鼠標移入的狀態
:active用來表示鼠標點擊
8.樣式的繼承
樣式的繼承，我們為一個元素設置的樣式同時也會應用到它的后代元素上
繼承是發生在祖先后后代之間的
繼承的設計是為了方便我們的開發，
利用繼承我們可以將一些通 用的樣式統一設 置到共同的祖先元素上，
這樣只需設置一次即可讓所有的元素都具有該樣式
注意:并不是所有的樣式都會被繼承:
比如背景相關的，布局相關等的這些樣式都不會被繼承。
9.選擇器的權重
樣式的沖突
當我們通過不同的選擇器，選中相同的元素，并且為相同的樣式設置不同的值時，此時就發生J樣式的沖突。
發生樣式沖突時，應用哪個樣式由選擇器的權重(優先級)決定
選擇器的權重
內聯樣式 1000
id選擇器 100
類和偽類選擇器 10
元素選擇器 1
通配選擇器 0
繼承的樣式 沒有優先級
比較優先級時，需要將所有的選擇器的優先級迸行相加計算，最后優先級越高，則越優先顯示(分組選擇器是單獨計算的)，
選擇器的累加不會超過其最大的數量級，類選擇器在高也不會超過id選擇器
如果優先級計算后相同，此時則優先使用靠下的梓式
可以在某一個樣式的后邊添加! important，則此時該樣式會獲取到最高的優先級，甚至超過內聯樣式，
注意:在開發中這個玩意一定要慎用!
10.長度單位:
像素
屏幕(顯示器)實際上是由一個一個的小點點構成的
不同屏幕的像素大小是不同的，像素越小的屏幕顯示的效果越清晰
-所以同樣的200px在不同的設 備下顯示效果不一樣
百分比
也可以將屬性值設置為相對于其父元素屬性的百分比
設置百分比可以使子元素跟隨父元素的改變而改變
em
em是相對于元素的字體大小來計算的
1em = lfont-size
em會根據字體大小的改變而改變
rem
rem是相對于根元素的字體大小來計算
11.顏色:
在CSS中可以直接使用顏色名來設置各種顏色
比如: red、 orange、 yellow、 blue、 green
但是在css中直接使用顏色名是非常的不方便
RGB值:
RGB通過三種顏色的不同濃度來調配出不同的顏色
Rred,Ggreen，Bblue
每一種顏色的范圍在0-255(0%-100%)之間
語法: RGB(紅色， 綠色，藍色)
RGBA:
就是在rgb的基礎上增加了一個a表示不透明度
需要四個值，前三個和rgb -一樣，第四個表示不透明度
1表示完全不透明0表示完全透明.5半透明
十六進制的RGB值:
語法: #紅色綠色藍色
顏色濃度通過00-ff
如果顏色兩位兩位重復可以進行簡寫
#aabbcc --> #abc
HSL值HSLA值
H色相(0 - 360)
S飽和度，顏色的濃度0% - 100%
L亮度，顏色的亮度0%- 100%
第三章 layout
1.文檔流(NORMAL FLOW)
網頁是一個多層的結構，一層接著一層
通過CSS可以分別為每一層來設置祥式
作為用戶來進只能看到最頂上一層
這些層中，最底下的一層稱為文檔流，文檔流是網頁的基社
我們所創建的元就都是在文檔說中進行排列
對于我們來元素主要有兩個狀態
在文檔流中
不在文檔流中(脫離文檔流)
元者在文檔流中有什么特點:
塊元素
塊元素會在頁面中獨占一行(自上向下垂直排列)
默認寬度是父元親的全部(會把父元病掉滿)
默認高度是被內容撐開(子元素)
行內元素
行內元素不會獨占頁面的一行，只占自身的大小
行內元責在頁面中左向右水平排列，如果一行之中不能容納下所有的行內元素
則元素會換間第二行繼續自左向右排列(書寫習慣一致)
行內元素的默認寬度和高度都是被內容撐開
2.盒模型、盒子模型、框模型(BOX MODEL)
CSS將頁面中的所有元親都設置為了一個矩形的盒子
將元素設置為矩形的盒子后，對頁面的布局就變成將不同的盒子擺放到不同的位置
每一個盒子都由一下/幾個部分組成:
內容區(content )
內邊距(padding )
邊框(border)
外邊距(margin)
邊框
邊框的寬度border-width
3.邊框
border-width: 10px;
默認值，一般都是3個像素
border-width可以用來措定四個方向的邊框的寬庹
值的情況
四個值:上右下左
三個值:上左右下
兩個值:上下左右
一個值:上下左右
除了border-width還有一組border-xxx -width
xxx可以是top right bottom Left
用來單獨指定某一條邊的寬度
邊框的顏色border-color
border-color.用來指定邊框的顏色，同樣可以分別指定四個邊的邊框
規則和border-width一樣
border-color也可以省略不寫，如果省略則自動使用color的值
邊框的樣式border-style
solid 表示實線
dotted點虛線
dashed虛線
double雙線
border-style以值是none表示沒有邊框
4.內邊距
內邊距（padding）
內容區和邊框之間的距離是內邊距
一共有四個方向的內邊距：
padding-top
padding-right
padding-bottom
padding-left
內邊距的設置會影響到盒子的大小
背景顏色會延伸到內邊距上
一個盒子的可見框的大小，由內容區 內邊距 和 邊框共同決定，
所以在計算盒子大小時，需要將這三個區域加到一起計算
5.外邊距
外邊距（margin）
外邊距不會影響盒子可見框的大小
但是外邊距會影響盒子的位置
一共有四個方向的外邊距：
margin-top
上外邊距，設置一個正值，元素會向下移動
margin-right
默認情況下設置margin-right不會產生任何效果
margin-bottom
下外邊距，設置一個正值，其下邊的元素會向下移動
margin-left
左外邊距，設置一個正值，元素會向右移動
margin也可以設置負值，如果是負值則元素會向相反的方向移動
元素在頁面中是按照自左向右的順序排列的，
所以默認情況下如果我們設置的左和上外邊距則會移動元素自身
而設置下和右外邊距會移動其他元素
margin的簡寫屬性
margin 可以同時設置四個方向的外邊距 ，用法和padding一樣
margin會影響到盒子實際占用空間
6.元素的水平方向的布局：
元素在其父元素中水平方向的位置由以下幾個屬性共同決定“
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一個元素在其父元素中，水平布局必須要滿足以下的等式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素內容區的寬度 （必須滿足）
以上等式必須滿足，如果相加結果使等式不成立，則稱為過度約束，則等式會自動調整
調整的情況：（可以變成負值）
如果這七個值中沒有為 auto 的情況，則瀏覽器會自動調整margin-right值以使等式滿足
這七個值中有三個值和設置為auto
width
margin-left
maring-right
如果某個值為auto，則會自動調整為auto的那個值以使等式成立
如果將一個寬度和一個外邊距設置為auto，則寬度會調整到最大，設置為auto的外邊距會自動為0
如果將三個值都設置為auto，則外邊距都是0，寬度最大
如果將兩個外邊距設置為auto，寬度固定值，則會將外邊距設置為相同的值，居中
所以我們經常利用這個特點來使一個元素在其父元素中水平居中
示例：
width:xxxpx;
margin:0 auto;
7.垂直布局
默認情況下父元素的高度被內容撐開
子元素是在父元素的內容區中排列的，
如果子元素的大小超過了父元素，則子元素會從父元素中溢出
使用 overflow 屬性來設置父元素如何處理溢出的子元素
可選值：
visible，默認值 子元素會從父元素中溢出，在父元素外部的位置顯示
hidden 溢出內容將會被裁剪不會顯示
scroll 生成兩個滾動條，通過滾動條來查看完整的內容
auto 根據需要生成滾動條
8.垂直外邊距的重疊(折疊)
相鄰的垂直方向外邊距會發生重疊現象
兄弟元素
兄弟元素間的相鄰垂直外邊距會取兩者之間的較大值(兩者都是正值)
特殊情況:
如果相鄰的外邊距一正一負，則取兩者的和
如果相鄰的外邊距都是負值，則取兩者中絕對值較大的
兄弟元素之間的外邊距的重疊，對于開發是有利的，所以我們不需要進行處理
父子元素
父子元素間相鄰外邊距，子元素的會傳遞給父元素(上外邊距)
父子外邊距的折疊會影響到頁面的布局，必須要進行處理
處理方式：
9.行內元素的盒模型
行內元素不支持設置寬度和高度
行內元素可以設置padding,但是垂直方向padding不會影響頁面的布局
行內元素可以設置border,垂直方向的border不會影響頁面的布局
行內元素可以設置margin,垂直方向的margin不會影響布局
display用來設置元素顯示的類型
可選值:
inline將元素設置為行內元素
block將元素設置為塊元素
inline-block 將元素設置為行內塊元素
行內塊，既可以設置寬度和高度又不會獨占一行
table將元素設置為一個表格
none元素不在頁面中顯示
visibility用來設置元素的顯示狀態
可選值:
visible 默認值，元素在頁面中正常顯示
hidden元素在頁面中隱藏不顯示，但是依然占據頁面的位置
10.默認樣式:
通常情況，瀏覽器都會為元素設置一些默認樣式
默認樣式的存在會影響到頁面的布局，
通常情況下編寫網頁時必須要去除瀏覽器的默認樣式(PC 端的頁面)
重置樣式表：專門用來對瀏覽器的樣式進行重置的
reset.css 直接去除了瀏覽器的默認樣式
normalize.css 對默認樣式進行了統一
要讓一個文字在父元素中垂直居中，只需將父元素的line-height設置為一個和父元素height一樣的值
line-height: 25px;
11.盒子的尺寸
默認情況下，盒子可見框的大小由內容區、內邊距和邊框共同決定
box-sizing 用來設置盒子尺寸的計算方式（設置width和height的作用）
可選值：
content-box 默認值，寬度和高度用來設置內容區的大小
border-box 寬度和高度用來設置整個盒子可見框的大小
width 和 height 指的是內容區 和 內邊距 和 邊框的總大小
12.陰影，輪廓和圓角
box-shadow 用來設置元素的陰影效果，陰影不會影響頁面布局
第一個值 水平偏移量 設置陰影的水平位置 正值向右移動 負值向左移動
第二個值 垂直偏移量 設置陰影的水平位置 正值向下移動 負值向上移動
第三個值 陰影的模糊半徑
第四個值 陰影的顏色
如：box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ;
outline 用來設置元素的輪廓線，用法和border一模一樣
如： outline: 10px red solid;
輪廓和邊框不同的點，就是輪廓不會影響到可見框的大小
border-radius: 用來設置圓角 圓角設置的圓的半徑大小
border-radius 可以分別指定四個角的圓角
四個值 左上 右上 右下 左下
三個值 左上 右上/左下 右下
兩個個值 左上/右下 右上/左下
也可以單獨制定一個角
border-top-left-radius:
border-top-right-radius
border-bottom-left-radius:
border-bottom-right-radius:
此時如果后面帶兩個值則為橢圓形圓角
將元素設置為一個圓形 ：border-radius: 50%;
第四章 float
1.浮動：
通過浮動可以使一個元素向其父元素的左側或右側移動，使用 float 屬性來設置于元素的浮動可選值：
none 默認值 ，元素不浮動
left 元素向左浮動
right 元素向右浮動
注意，元素設置浮動以后，水平布局的等式便不需要強制成立
元素設置浮動以后，會完全從文檔流中脫離，不再占用文檔流的位置，
所以元素下邊的還在文檔流中的元素會自動向上移動
2.浮動的特點：
1、浮動元素會完全脫離文檔流，不再占據文檔流中的位置
2、設置浮動以后元素會向父元素的左側或右側移動，
3、浮動元素默認不會從父元素中移出
4、浮動元素向左或向右移動時，不會超過它前邊的其他浮動元素
5、如果浮動元素的上邊是一個沒有浮動的塊元素，則浮動元素無法上移
6、浮動元素不會超過它上邊的浮動的兄弟元素，最多最多就是和它一樣高
7.浮動元素不會蓋住文字，文字會自動環繞在浮動元素的周圍，所以我們可以利用浮動來設置文字環繞圖片的效果
簡單總結：
浮動目前來講它的主要作用就是讓頁面中的元素可以水平排列，
通過浮動可以制作一些水平方向的布局
3.脫離文檔流的特點：
塊元素：
1、塊元素不在獨占頁面的一行
2、脫離文檔流以后，塊元素的寬度和高度默認都被內容撐開
行內元素：
1、行內元素脫離文檔流以后會變成塊元素，特點和塊元素一樣
2、脫離文檔流以后，不需要再區分塊和行內了
4.高度塌陷問題：
BFC(Block Formatting Context) 塊級格式化環境
BFC是一個CSS中的一個隱含的屬性，可以為一個元素開啟BFC
開啟BFC該元素會變成一個獨立的布局區域
元素開啟BFC后的特點：
1.開啟BFC的元素不會被浮動元素所覆蓋
2.開啟BFC的元素子元素和父元素外邊距不會重疊
3.開啟BFC的元素可以包含浮動的子元素
可以通過一些特殊方式來開啟元素的BFC：
1、設置元素的浮動（不推薦）
2、將元素設置為行內塊元素（不推薦）
3、將元素的overflow設置為一個非visible的值
常用的方式 為父元素設置 overflow:hidden 開啟其BFC 以使其可以包含浮動元素而不塌陷
如果我們不希望某個元素因為其他元素浮動的影響而改變位置，
可以通過clear屬性來清除浮動元素對當前元素所產生的影響
clear：
作用：清除浮動元素對當前元素所產生的影響
可選值：
left 清除左側浮動元素對當前元素的影響
right 清除右側浮動元素對當前元素的影響
both 清除兩側中最大影響的那側
原理：
設置清除浮動以后，瀏覽器會自動為元素添加一個上外邊距，以使其位置不受其他元素的影響
高度塌陷最終解決方案：在style里面加個
.clearfix::before, .clearfix::after{
content: ‘’;
display: table;
clear: both;
}
//這既可以解決高度塌陷（后面加table）也可以解決上邊距重疊（前面加table隔開）
再把父元素加一個class=clearfix就行了
第五章 position
1.定位的簡介
定位是一種更加高級的布局手段，但一定多用浮動少用定位
通過定位可以將元素擺放到頁面的任意位置
使用position屬性來設置定位
可選值：
static 默認值，元素是靜止的沒有開啟定位
relative 開啟元素的相對定位
absolute 開啟元素的絕對定位
fixed 開啟元素的固定定位
sticky 開啟元素的粘滯定位
2.相對定位：
當元素的position屬性值設置為relative時則開啟了元素的相對定位
相對定位的特點：
1.元素開啟相對定位以后，如果不設置偏移量元素不會發生任何的變化
2.相對定位是參照于元素在文檔流中的位置進行定位的
3.相對定位會提升元素的層級
4.相對定位不會使元素脫離文檔流
5.相對定位不會改變元素的性質塊還是塊，行內還是行內
偏移量（offset）
當元素開啟了定位以后，可以通過偏移量來設置元素的位置
top定位元素和定位位置上邊的距離
bottom定位元素和定位位置下邊的距離
定位元素垂直方向的位置由top和bottom兩個屬性來控制
通常情況下我們只會使用其中一
top值越大，定位元素越向下移動
bottom值越大，定位元素越向上移動
left 定位元素和定位位置的左側距離
right 定位元素和定位位置的右側距離
定位元素水平方向的位置由left和right兩個屬性控制
通常情況下只會使用一個
left越大元素越靠右
right越大元素越靠左
3.絕對定位
當元素的position屬性值設置為absolute時，則開啟了元素的絕對定位
絕對定位的特點：
1.開啟絕對定位后，如果不設置偏移量元素的位置不會發生變化
2.開啟絕對定位后，元素會從文檔流中脫離
3.絕對定位會改變元素的性質，行內變成塊，塊的寬高被內容撐開
4.絕對定位會使元素提升一個層級
5.絕對定位元素是相對于其包含塊進行定位的
包含塊( containing block )
正常情況下：
包含塊就是離當前元素最近的祖先塊元素
絕對定位的包含塊:
包含塊就是離它最近的開啟了定位的祖先元素，
如果所有的祖先元素都沒有開啟定位則根元素就是它的包含塊
html（根元素、初始包含塊）
4.固定定位：
將元素的position屬性設置為fixed則開啟了元素的固定定位
固定定位也是一種絕對定位，所以固定定位的大部分特點都和絕對定位一樣
唯一不同的是固定定位永遠參照于瀏覽器的視口進行定位
固定定位的元素不會隨網頁的滾動條滾動
5.粘滯定位
當元素的position屬性設置為sticky時則開啟了元素的粘滯定位
粘滯定位和相對定位的特點基本一致，
不同的是粘滯定位可以在元素到達某個位置時將其固定
6.絕對定位元素的布局
水平布局
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含塊的內容區的寬度
當我們開啟了絕對定位后:
水平方向的布局等式就需要添加left 和 right 兩個值
此時規則和之前一樣只是多添加了兩個值：
當發生過度約束：
如果9個值中沒有 auto 則自動調整right值以使等式滿足
如果有auto，則自動調整auto的值以使等式滿足
可設置auto的值
margin width left right
因為left 和 right的值默認是auto，所以如果不指定left和right
則等式不滿足時，會自動調整這兩個值
垂直方向布局的等式的也必須要滿足
top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含塊的高度
7.元素的層級
對于開啟了定位元素，可以通過z-index屬性來指定元素的層級
z-index需要一個整數作為參數，值越大元素的層級越高
元素的層級越高越優先顯示
如果元素的層級一樣，則優先顯示靠下的元素
祖先的元素的層級再高也不會蓋住后代元素
第六章font&background
1.字體
font-face可以將服務器中的字體直接提供給用戶去使用
問題：
1.加載速度
2.版權
3.字體格式
例如：
@font-face {
/* 指定字體的名字 /
font-family:‘myfont’ ;
/ 服務器中字體的路徑 */
src: url(‘./font/ZCOOLKuaiLe-Regular.ttf’) format(“truetype”);
}
字體相關的樣式
color 用來設置字體顏色
font-size 字體的大小
和font-size相關的單位
em 相當于當前元素的一個font-size
rem 相對于根元素的一個font-size
font-family 字體族（字體的格式）
可選值：
serif 襯線字體
sans-serif 非襯線字體
monospace 等寬字體
指定字體的類別，瀏覽器會自動使用該類別下的字體
font-family 可以同時指定多個字體，多個字體間使用,隔開
2.圖標字體
圖標字體（iconfont）
在網頁中經常需要使用一些圖標，可以通過圖片來引入圖標，但是圖片大小本身比較大，并且非常的不靈活，所以在使用圖標時，我們還可以將圖標直接設置為字體，然后通過font-face的形式來對字體進行引入。這樣我們就可以通過使用字體的形式來使用圖標
fontawesome 使用步驟
1.下載 https://fontawesome.com/
2.解壓
3.將css和webfonts移動到項目中
4.將all.css引入到網頁中
5.使用圖標字體
這里建議不下載而是直接引用，可以參照菜鳥教程
直接通過類名來使用圖標字體
class=“fas fa-bell”
class=“fab fa-accessible-icon”
通過偽元素來設置圖標字體
1.找到要設置圖標的元素通過before或after選中
2.在content中設置字體的編碼
3.設置字體的樣式
3. 阿里字體庫
官網：
https://www.iconfont.cn/
可以直接下載單個圖片或者加入購物車下載合集
注意版權
4. 行高
行高（line height）
行高指的是文字占有的實際高度
可以通過line-height來設置行高
行高可以直接指定一個大小（px em）
也可以直接為行高設置一個整數
如果是一個整數的話，行高將會是字體的指定的倍數
行高經常還用來設置文字的行間距
行間距 = 行高 - 字體大小
字體框
字體框就是字體存在的格子，設置font-size實際上就是在設置字體框的高度
行高會在字體框的上下平均分配
可以將行高設置為和高度一樣的值，使單行文字在一個元素中垂直居中
5. 字體的簡寫屬性
font 可以設置字體相關的所有屬性
語法：
font: 字體大小/行高 字體族
行高 可以省略不寫 如果不寫使用默認值
font-weight 字重 字體的加粗
可選值：
normal 默認值 不加粗
bold 加粗
100-900 九個級別（沒什么用）
font-style 字體的風格
normal 正常的
italic 斜體
如：font: bold italic 50px/2 微軟雅黑, ‘Times New Roman’, Times, serif;
6. 文本的樣式
text-align 文本的水平對齊
可選值：
left 左側對齊
right 右對齊
center 居中對齊
justify 兩端對齊
vertical-align 設置元素垂直對齊的方式
可選值：
baseline 默認值 基線對齊
top 頂部對齊
bottom 底部對齊
middle 居中對齊
圖片引入后底部會有縫隙，將垂直對齊設置為非基線對齊就可
text-decoration 設置文本修飾
可選值：
none 什么都沒有
underline 下劃線
line-through 刪除線
overline 上劃線
white-space 設置網頁如何處理空白
可選值：
normal 正常
nowrap 不換行
pre 保留空白
text-overflow: ellipsis;多出的內容顯示省略號
7. 背景
background-color 設置背景顏色
background-image 設置背景圖片
可以同時設置背景圖片和背景顏色，這樣背景顏色將會成為圖片的背景色
如果背景的圖片小于元素，則背景圖片會自動在元素中平鋪將元素鋪滿
如果背景的圖片大于元素，將會一個部分背景無法完全顯示
如果背景圖片和元素一樣大，則會直接正常顯示
background-repeat 用來設置背景的重復方式
可選值：
repeat 默認值 ， 背景會沿著x軸 y軸雙方向重復
repeat-x 沿著x軸方向重復
repeat-y 沿著y軸方向重復
no-repeat 背景圖片不重復
background-position 用來設置背景圖片的位置
設置方式：
通過 top left right bottom center 幾個表示方位的詞來設置背景圖片的位置
使用方位詞時必須要同時指定兩個值，如果只寫一個則第二個默認就是center
通過偏移量來指定背景圖片的位置：
水平方向的偏移量 垂直方向變量
設置背景的范圍
background-clip
可選值：
border-box 默認值，背景會出現在邊框的下邊
padding-box 背景不會出現在邊框，只出現在內容區和內邊距
content-box 背景只會出現在內容區
background-origin 背景圖片的偏移量計算的原點
padding-box 默認值，background-position從內邊距處開始計算
content-box 背景圖片的偏移量從內容區處計算
border-box 背景圖片的變量從邊框處開始計算
background-origin: border-box;
background-clip: content-box; */
background-size 設置背景圖片的大小
第一個值表示寬度
第二個值表示高度
如果只寫一個，則第二個值默認是 auto
cover 圖片的比例不變，將元素鋪滿
contain 圖片比例不變，將圖片在元素中完整顯示
background-color
background-image
background-repeat
background-position
background-size
background-origin
background-clip
background-attachment
backgound 背景相關的簡寫屬性，所有背景相關的樣式都可以通過該樣式來設置
并且該樣式沒有順序要求，也沒有哪個屬性是必須寫的
注意：
background-size必須寫在background-position的后邊，并且使用/隔開
background-position/background-size
background-origin background-clip 兩個樣式 ，orgin要在clip的前邊
8. 漸變
通過漸變可以設置一些復雜的背景顏色，可以實現從一個顏色向其他顏色過渡的效果
！！漸變是圖片，需要通過background-image來設置
線性漸變，顏色沿著一條直線發生變化
linear-gradient()
linear-gradient(red,yellow) 紅色在開頭，黃色在結尾，中間是過渡區域
線性漸變的開頭，我們可以指定一個漸變的方向
to left
to right
to bottom
to top
deg deg表示度數
turn 表示圈
漸變可以同時指定多個顏色，多個顏色默認情況下平均分布，
也可以手動指定漸變的分布情況
repeating-linear-gradient() 可以平鋪的線性漸變
9. 徑向漸變
默認情況下徑向漸變的形狀根據元素的形狀來計算的
正方形 --> 圓形
長方形 --> 橢圓形
我們也可以手動指定徑向漸變的大小
circle
ellipse
也可以指定漸變的位置
語法：
radial-gradient(大小 at 位置, 顏色 位置 ,顏色 位置 ,顏色 位置)
大小：
circle 圓形
ellipse 橢圓
closest-side 近邊
closest-corner 近角
farthest-side 遠邊
farthest-corner 遠角
位置：
top right left center bottom
第七章 html補充
1.表格
在table中使用tr表示表格中的一行，有幾個tr就有幾行
在tr中使用td表示一個單元格，有幾個td就有幾個單元格
rowspan 縱向的合并單元格
colspan 橫向的合并單元格
2.長表格
可以將一個表格分成三個部分：
頭部 thead
主體 tbody
底部 tfoot
th 表示頭部的單元格
這樣無論放在什么位置，thead永遠顯示在最前面
3.表格邊框
border-spacing: 指定邊框之間的距離
border-spacing: 0px;此時兩條線合二為一，邊框為2px
border-collapse: collapse; 設置邊框的合并，此時邊框為1px
默認情況下元素在td中是垂直居中的 可以通過 vertical-align 來修改
vertical-align:middle; 垂直居中
text-align: center;水平居中
如果表格中沒有使用tbody而是直接使用tr，那么瀏覽器會自動創建一個tbody，并且將tr全都放到tbody中，注意：tr不是table的子元素
因此在使用關系選擇器選擇tr時要這樣：
tbody > tr:nth-child(odd){background-color: #bfa; }
4.表單
表單： 在現實生活中表單用于提交數據，在網頁中也可以使用表單，網頁中的表單用于將本地的數據提交給遠程的服務器
使用form標簽來創建一個表單、
form的屬性
action 表單要提交的服務器的地址
如：
文本框：
<input type="text" name="username">注意：數據要提交到服務器中，必須要為元素指定一個name屬性值
密碼框
單選按鈕
<input type="radio" name="hello" value="a">像這種選擇框，必須要指定一個value屬性，value屬性最終會作為用戶的填寫的值傳遞給服務器
多選框
注意checked表示默認選中
下拉列表
selected表示默認選中
提交按鈕
在input標簽里面
autocomplete=“off” 關閉自動補全
readonly 將表單項設置為只讀，數據會提交
disabled 將表單項設置為禁用，數據不會提交
autofocus 設置表單項自動獲取焦點
提交按鈕
重置按鈕
<input type="reset">普通的按鈕
<input type="button" value="按鈕">未完待續…
總結
- 上一篇： 用python实现数字图片识别神经网络-
- 下一篇： 人工智能3.0展望---一种让AI产生自