尚硅谷李立超老师讲解web前端---笔记（持续更新）
目錄
?
一、準(zhǔn)備（2023.2.8）
二、組成部分（2023.2.8）
1、HTML
2.CSS
?????????3.layout
一、準(zhǔn)備（2023.2.8）
- 專業(yè)英語(yǔ)： 在進(jìn)行編寫(xiě)布局時(shí)，我們使用的類名通常用英文編寫(xiě)，所以我們可以使用百度翻譯、有道翻譯軟件等翻譯軟件等配合使用。
- 軟件使用：vs code
當(dāng)我們需要相關(guān)的軟件時(shí)，可通過(guò)擴(kuò)展的功能來(lái)實(shí)現(xiàn)，
今天我們要安裝網(wǎng)頁(yè)調(diào)試的插件：live server
二、組成部分（2023.2.8）
html 結(jié)構(gòu) css表現(xiàn) ????javascript行為
描述頁(yè)面 ??控制元素? ?? 響應(yīng)用戶操作
蒂姆 伯納斯發(fā)明了萬(wàn)維網(wǎng)
1991年8月6日，第一個(gè)服務(wù)器第一個(gè)網(wǎng)站上線。
伯納斯李1994年建立萬(wàn)維網(wǎng)聯(lián)盟（w3c），制定網(wǎng)頁(yè)開(kāi)發(fā)的標(biāo)準(zhǔn)
?
?
1、HTML
(一、）編寫(xiě)（2023.2.9）
?
左邊是源碼，右邊是瀏覽器渲染的結(jié)果
(二、)標(biāo)簽(2023.2.10)
標(biāo)簽一般成對(duì)出現(xiàn)，但是也存在一些自結(jié)束標(biāo)簽。
- <!--?? -->html注釋，注釋中的內(nèi)容會(huì)被瀏覽器所忽略，不會(huì)在網(wǎng)頁(yè)中直接顯示，但是可以在源代碼中查看注釋，注釋用來(lái)對(duì)代碼進(jìn)行解釋說(shuō)明
- 直接寫(xiě)到body里面，會(huì)直接出現(xiàn)在html
- 開(kāi)發(fā)中一定要養(yǎng)成良好的寫(xiě)注釋的習(xí)慣，注釋要求簡(jiǎn)單明了
?????2.不能在注釋里面寫(xiě)注釋，會(huì)多出一個(gè)-->，因?yàn)闉g覽器在解析網(wǎng)頁(yè)中是自上而下的。
屬性是一個(gè)名值對(duì)（x-y）
(三、)網(wǎng)頁(yè)的基本結(jié)構(gòu)(2023.2.12)
網(wǎng)頁(yè)有很多版本，會(huì)不斷更新，叫做迭代
- 網(wǎng)頁(yè)的版本： HTML4 ????XHTML2.0?? ?HTML5
文檔聲明(doctype)
-文檔聲明用來(lái)告訴瀏覽器當(dāng)前網(wǎng)頁(yè)的版本
-html5的文檔聲明
<!doctype html>
<!Doctype HTML>
不區(qū)分大小寫(xiě)
寫(xiě)在第一行
(四、)進(jìn)制(2023.2.12)
日常用的十進(jìn)制
? -特點(diǎn)：滿10進(jìn)1
? -計(jì)數(shù)：0 1 2 3 4 5 6 7 8 9 10 11 12 …19 20
? -單位數(shù)字：10個(gè)(0-9)
計(jì)算機(jī)用的二進(jìn)制
??? -特點(diǎn)：滿二進(jìn)一
??? -計(jì)數(shù)： 0 1 10 11 100 101 110 111
??? -單位數(shù)字：2個(gè)(0-1)
??? -擴(kuò)展：
?????? -所有數(shù)據(jù)在計(jì)算機(jī)底層都會(huì)以二進(jìn)制的形式保存
?????? -可以將內(nèi)存想想為一個(gè)存多個(gè)小格子組成的容器，每一個(gè)小格子中
?????? 都可以存儲(chǔ)一個(gè)1或一個(gè)0，這一個(gè)小格子在內(nèi)存中被稱為1位（bit）
?????? 1bit??????? =1byte(字節(jié))
?????? 1024byte=1 kb(千字節(jié))
?????? 1024kb =1mb(兆字節(jié))
?????? 1024mb? =1gb(吉字節(jié))
?????? 1024gb?? =1tb(特字節(jié))
?????? 1024tb ??? =1pb
(很少用)八進(jìn)制
??? -特點(diǎn)：滿8進(jìn)1
??? -計(jì)數(shù)：0 1 2 3 4 5 6 7 9 10 11 12 …
??? -單位數(shù)字：8個(gè)(0-7)
十六進(jìn)制
??? -特點(diǎn)：滿16進(jìn)1
??? -計(jì)數(shù)： 0 1 2 3 4 5 7 8 9 a b c d e f
??? -單位數(shù)字：16個(gè)(0-f )
(五、)字符編碼(2023.2.12)
????? -所有數(shù)據(jù)在計(jì)算機(jī)底層都會(huì)以二進(jìn)制的形式保存，文字也不例外，
?????? 所以一段文字在存儲(chǔ)內(nèi)存中時(shí)，都需要轉(zhuǎn)換為二進(jìn)制編碼
?????? 當(dāng)我們讀取這段文字時(shí)，計(jì)算機(jī)會(huì)將編碼轉(zhuǎn)換為字符，是我們閱讀
????? -編碼
?????? -將字符轉(zhuǎn)換為二進(jìn)制碼的過(guò)程稱為編碼
????? -解碼
?????? -將二進(jìn)制碼轉(zhuǎn)換為字符的過(guò)程稱為解碼
????? -字符集（charset）
?????? -編碼和解碼所采用的規(guī)則稱為字符集
????? -亂碼問(wèn)題：????
?????? -如果編碼和解碼所采用的字符集不同就會(huì)出現(xiàn)亂碼問(wèn)題
????? -常見(jiàn)的字符集：
?????? ASCII????? 美國(guó)
?????? ISO88591?? 歐洲
?????? GB2312???? 中國(guó)
?????? GBK??????? 中國(guó)
?????? UTF-8????? 所有國(guó)家（萬(wàn)國(guó)碼），在開(kāi)發(fā)時(shí)我們使用的都是utf-8
? ??????Html這樣寫(xiě)<meta charset=”utf-8”>可以通過(guò)meta標(biāo)簽來(lái)設(shè)置網(wǎng)頁(yè)的字符集，避免亂碼問(wèn)題
(六、)文檔的使用(2023.2.12)
(七、)live server動(dòng)態(tài)服務(wù)器
(八、)實(shí)體(2023.2.12)
在網(wǎng)頁(yè)中編寫(xiě)的多個(gè)空格默認(rèn)情況會(huì)自動(dòng)被瀏覽器解析為一個(gè)空格
在HTML中有些時(shí)候，我們不能直接書(shū)寫(xiě)一些特殊符號(hào)
比如，多個(gè)連續(xù)的空格，比如字母兩側(cè)的大于和小于
?如果我們需要在網(wǎng)頁(yè)中書(shū)寫(xiě)這些特殊的符號(hào)，則需要使用HTML中的實(shí)體（轉(zhuǎn)義符號(hào)）
? ? ? ? 實(shí)體的語(yǔ)法：
? ? ? ? ? ? nbsp; 空格
? ? ? ? ? ? >大于號(hào)
? ? ? ? ? ? <小于號(hào)
? ? ? ? ? ? ©版權(quán)符號(hào)
更多的實(shí)體符號(hào)可以在位w3chool里面查看
(九、)meta標(biāo)簽(2023.2.12)
meta主要用于設(shè)置網(wǎng)頁(yè)中的一些元數(shù)據(jù)，元數(shù)據(jù)不是給用戶看
? ? ? ? charset 指定網(wǎng)頁(yè)的字符集
? ? ? ? name ? ?指定的數(shù)據(jù)的名稱
? ? ? ? content 指定的數(shù)據(jù)的內(nèi)容
keyword 表示網(wǎng)站的關(guān)鍵字，可以同時(shí)指定多個(gè)關(guān)鍵字，關(guān)鍵字用逗號(hào)隔開(kāi)
<meta name="keyword" content="網(wǎng)上購(gòu)物,網(wǎng)上商城,家電,手機(jī),電腦,服裝,居家,母嬰,">
?description 用于指定網(wǎng)站的描述
?<meta name="description" content="京東JD.COM-專業(yè)的綜合網(wǎng)上購(gòu)物商城，為您提供正品低價(jià)的購(gòu)物選擇、優(yōu)質(zhì)便捷的服務(wù)體驗(yàn)。商品來(lái)自全球數(shù)十萬(wàn)品牌商家，囊括家電、手機(jī)、電腦、服裝、居家、母嬰、美妝、個(gè)護(hù)、食品、生鮮等豐富品類，滿足各種購(gòu)物需求。">
title標(biāo)簽的內(nèi)容會(huì)作為搜索結(jié)果的超鏈接上的文字顯示
<meta http-equiv="refresh"contents="3;url="https"//www.baidu.com"">
? ? 將頁(yè)面重定向到另一個(gè)網(wǎng)站
(十、)語(yǔ)義化標(biāo)簽(2023.2.12)
在網(wǎng)頁(yè)中HTML專門(mén)用來(lái)負(fù)責(zé)網(wǎng)頁(yè)的結(jié)構(gòu)
一、在使用html標(biāo)簽時(shí)，應(yīng)該關(guān)注的是標(biāo)簽的語(yǔ)義，而不是它的樣式
標(biāo)題標(biāo)簽：
? ? ? ? ? ? h1~h6一共有六級(jí)標(biāo)題，h1最重要，h6最不重要
? ? ? ? ? ? h1在網(wǎng)頁(yè)中的重要行僅次于title標(biāo)簽,一般情況下，一個(gè)頁(yè)面只會(huì)有一個(gè)h1,一般情況下標(biāo)題標(biāo)簽只會(huì)使用h1~h3,h4~h6很少用
二、在頁(yè)面中獨(dú)占一行的元素稱為塊元素(block element),例：p 、h1~h6
三、hgroup 標(biāo)簽用來(lái)為標(biāo)題分組，可以將一組相關(guān)的標(biāo)題同時(shí)放入到hgroup
em標(biāo)簽用于表示語(yǔ)音通話的一個(gè)加重，也是行內(nèi)元素
四、在頁(yè)面中不會(huì)獨(dú)占一行的元素稱為行內(nèi)元素(inline element)
strong表示強(qiáng)調(diào)，重要內(nèi)容
blockquote表示一個(gè)長(zhǎng)引用
q表示短引用
br表示頁(yè)面中的換行
五、解決使用記事本編輯的內(nèi)容用vscode打開(kāi)亂碼問(wèn)題
點(diǎn)擊右下角utf-8，再點(diǎn)擊通過(guò)編碼重新打開(kāi)，之后點(diǎn)擊gbk，成功解決問(wèn)題。
塊元素 block element
在網(wǎng)頁(yè)中一般通過(guò)塊元素來(lái)布局
行內(nèi)元素 lnline element
行內(nèi)元素主要用來(lái)包裹文字
一般情況下會(huì)在塊元素中放行內(nèi)元素，而不會(huì)在行內(nèi)元素放塊元素
塊元素中基本什么都能放
P元素中不能放任何的塊元素
瀏覽器在解析網(wǎng)頁(yè)時(shí)，會(huì)自動(dòng)對(duì)網(wǎng)頁(yè)中不符合規(guī)范的內(nèi)容進(jìn)行矯正
??? 比如：標(biāo)簽寫(xiě)在了根元素的外部
?????? ?? P元素嵌套了塊元素
?????? ? ?根元素中出現(xiàn)了head和body以外的子元素
?
瀏覽器開(kāi)發(fā)者模式按f12，elements是元素的意思，點(diǎn)擊以后也可以看見(jiàn)我們正在vscode編寫(xiě)的代碼。
（十一、）列表(2023.2.13)
?
（十二、）超鏈接(2023.2.13)
超鏈接可以讓我們一個(gè)頁(yè)面跳轉(zhuǎn)到其他頁(yè)面，?或者是當(dāng)前頁(yè)面的其他的位置?
????
使用a標(biāo)簽來(lái)定義超鏈接
????????????屬性：
????????????????herf?指定跳轉(zhuǎn)的目標(biāo)路徑
????????????????????值可以是一個(gè)外部網(wǎng)站地址
????????????????????也可以寫(xiě)一個(gè)內(nèi)部頁(yè)面的地址
????????超鏈接a標(biāo)簽也是一個(gè)行內(nèi)元素，在a標(biāo)簽中可以嵌套處它自身外的任何元素-
????????<a?href="https://4399.com">超鏈接</a>
????????<br>
????????<a?href="07-列表.html">超鏈接2</a>
相對(duì)路徑
當(dāng)我們需要跳轉(zhuǎn)一個(gè)服務(wù)器內(nèi)部的頁(yè)面時(shí)，一般我們都會(huì)使用相對(duì)路徑
????????相對(duì)路徑都會(huì)使用.跟..開(kāi)頭
????????????./
????????????../
????????????./可以省略不寫(xiě)，如果不寫(xiě)../也不寫(xiě)./就相當(dāng)于寫(xiě)了./?
????????????./表示的當(dāng)前文件所在目錄
????????????????在當(dāng)前頁(yè)面就是09.相對(duì)路徑.html
????????????????./就等于09.相對(duì)路徑.html所在的目錄?path
????????????../表示當(dāng)前文件所在目錄的上一級(jí)目錄
????
????<a?href="target.html">超鏈接1</a>????
????<br>????????????
????<a?href="../07-列表.html">超鏈接2</a>
????<br>
????<!--?因?yàn)槲募辉谒诼窂?#xff0c;所以上面可以的跳轉(zhuǎn)頁(yè)面，而下面的不可以?-->
????<a?href="./07-列表.html">超鏈接2</a>
????<br>
????<a?href="inner/target2.html">超鏈接3</a>
????<br>
<a?href="../outer/target3.html"></a>
?
（十三、）圖片標(biāo)簽(2023.2.14)
?圖片標(biāo)簽用于向當(dāng)前頁(yè)面中引入一個(gè)外部圖片
??????????? 使用img標(biāo)簽來(lái)引入外部標(biāo)簽，img標(biāo)簽是一個(gè)自結(jié)束標(biāo)簽
????????img這種元素屬于替換元素（塊和行內(nèi)元素之間，具有兩種元素的特點(diǎn)）
????????屬性：
????????????src?屬性指定的是外部圖片的路徑?
????????????alt?圖片的描述，這個(gè)描述默認(rèn)情況下不會(huì)顯示，有些瀏覽器會(huì)圖片無(wú)法加載時(shí)顯示
????????搜索引擎會(huì)根據(jù)alt中的內(nèi)容來(lái)識(shí)別圖片，如果不寫(xiě)alt屬性圖片不會(huì)被搜索引擎所發(fā)現(xiàn)
????????????width?圖片的寬度?（單位是像素）
????????????height?圖片的高度
?????????寬度和高度中如果只修改了一個(gè)，則另一個(gè)會(huì)等比例縮放
????????????
?????????注意：
?????????????一般情況在pc端，不建議修改圖片的大小，需要多大的圖片就裁多大
?????????????但是在移動(dòng)端，經(jīng)常需要對(duì)圖片進(jìn)行縮放（大圖縮小）
圖片的格式(2023.2.15)：
????????????jpeg(jpg):
????????????????支持的顏色比較豐富，不支持透明效果，不支持動(dòng)圖
????????????????一般用來(lái)顯示圖片
????????????gif：?????
????????????????支持的顏色標(biāo)膠少，支持簡(jiǎn)單透明，支持動(dòng)圖
????????????????顏色單一的圖片，動(dòng)圖
????????????png：?????
????????????????支持的顏色豐富，支持復(fù)雜透明，不支持動(dòng)圖
????????????????顏色豐富，復(fù)雜透明圖片（專為網(wǎng)頁(yè)為主）
????????????webp：????
????????????? ?這種格式是谷歌推出的專門(mén)用來(lái)表示網(wǎng)頁(yè)中的圖片的一種格式
????????????????它具備其他圖片格式的所有優(yōu)點(diǎn)，而且文件還特別小的
????????????? ?缺點(diǎn)：兼容性不好
????? ?????? ????base64
??? ?將圖片使用base64編碼，這樣可以將圖片轉(zhuǎn)換為字符，通過(guò)字符的形式來(lái)引入圖片
????一般都是一寫(xiě)需要和網(wǎng)頁(yè)一起加載的圖片才會(huì)使用base64
????????????效果一樣?用小的
????????????效果不一樣?用效果好的?
（十四、）內(nèi)聯(lián)框架(2023.2.14)：
????? ??內(nèi)聯(lián)框架，用于向當(dāng)前頁(yè)面中引入一個(gè)其他頁(yè)面
????????src制定要引入的網(wǎng)頁(yè)的路徑
????????frameborder?指定內(nèi)聯(lián)框架的邊框
?
(十五、)音頻標(biāo)簽(2023.2.15)
?audio?標(biāo)簽用來(lái)向頁(yè)面中引入一個(gè)外部的音頻文件的
????????????音視頻文件引入時(shí)，默認(rèn)情況下不允許用戶自己控制播放停止
????????屬性:
????????????controls?是否允許用戶控制播放
????????????autoplay?音頻文件是否自動(dòng)播放
????????????????如果設(shè)置了autoplay則音樂(lè)在打開(kāi)網(wǎng)頁(yè)時(shí)會(huì)自動(dòng)播放
????????????????????但是目前來(lái)講大部分瀏覽器都不會(huì)自動(dòng)對(duì)音樂(lè)進(jìn)行自動(dòng)播放
????????????loop?音樂(lè)是否循環(huán)播放
?
用vscode標(biāo)簽來(lái)向網(wǎng)頁(yè)中引入一個(gè)視頻,使用方法和audio基本上都是一致的
?
我們還可以在自己的網(wǎng)頁(yè)嵌入騰訊視頻的視頻標(biāo)簽，之后改變寬度和高度。
?
2.CSS
（一、）css簡(jiǎn)介（2023.2.15）
CSS
???????層疊樣式表
???????網(wǎng)頁(yè)實(shí)際上是一個(gè)多層的結(jié)構(gòu)，通過(guò)CSS可以分別為網(wǎng)頁(yè)的每一個(gè)層來(lái)設(shè)置樣式
????????????????而最終我們能看到只是網(wǎng)頁(yè)的最上邊一層
????????????總之一句話，CSS用來(lái)設(shè)置網(wǎng)頁(yè)中元素的樣式
（二、）CSS編寫(xiě)的位置(2023.2.15)
?第一種方式(內(nèi)聯(lián)樣式、行內(nèi)樣式)：
????????????在標(biāo)簽內(nèi)部通過(guò)style屬性來(lái)設(shè)置元素的樣式
?問(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)樣式??
?
第二種方式（內(nèi)部樣式表）：
?
????????????將樣式編寫(xiě)到head中的style標(biāo)簽里
????????????然后通過(guò)css的選擇器來(lái)選中元素病為其設(shè)置各種樣式
????????????可以同時(shí)為多個(gè)標(biāo)簽設(shè)置樣式，并且修改時(shí)只需要修改一處即可全部應(yīng)用
????????????內(nèi)部樣式表更加方便對(duì)樣式進(jìn)行復(fù)用
?????????? ?問(wèn)題：只能對(duì)一個(gè)頁(yè)面起作用，
????????????????它里邊的樣式不能跨頁(yè)面進(jìn)行復(fù)用
第三種方式(外部樣式表)：
????????????可以將CSS樣式編寫(xiě)到一個(gè)外部的CSS文件中???
????????????????然后通過(guò)link標(biāo)簽來(lái)引入外部的CSS文件
????????????????外部樣式表需要通過(guò)link標(biāo)簽進(jìn)行引用，
????????????????意味著只要想使用這些樣式的網(wǎng)頁(yè)都可以對(duì)其進(jìn)行引用
????????????????使樣式可以在不同頁(yè)面之間進(jìn)行復(fù)用
????????????????將樣式編寫(xiě)到外部的CSS文件中，可以使用到瀏覽器的緩存機(jī)制，
????????????????從而加快頁(yè)面的加載速度，提高用戶的體驗(yàn)。
???css中的注釋，注釋中的內(nèi)容會(huì)被瀏覽器自動(dòng)忽略
???????????css的基本語(yǔ)法：
????????????????????比如p的作用就是選中頁(yè)面中的所有的p元素
????????????????????聲明塊由一個(gè)一個(gè)的聲明組成
????????????????????聲明是一個(gè)名值對(duì)結(jié)構(gòu)
????????????????????一個(gè)樣式名對(duì)應(yīng)一個(gè)樣式值，名和值之間以：連接，以；結(jié)尾
(三、)常用選擇器(2023.2.15)
?元素選擇器
????????????????作用：根據(jù)標(biāo)簽名來(lái)選中指定的元素
????????????????語(yǔ)法：標(biāo)簽名（）
????????????????例子：p（）?h1()?div()
id選擇器
????????????????作用：根據(jù)元素的id屬性值選中一個(gè)元素
????????????????例子：#box()?#red()
Class類選擇器
class是一個(gè)標(biāo)簽的屬性，它和id類似，不同的是class可以重復(fù)使用
????????可以通過(guò)class屬性來(lái)為元素分組
????????可以同時(shí)為一個(gè)元素指定多個(gè)class屬性
復(fù)合選擇器
?
(四、)關(guān)系選擇器(2023.2.16)
????? 父元素
????????直接包含子元素的元素叫做父元素
????子元素
????????直接被父元素包含的元素是子元素
????祖先元素
??????????直接或間接包含后代元素的元素叫做祖先元素
??????????一個(gè)元素的父元素也是它的祖先元素
????后代元素
????????直接或間接被祖先元素包含的元素叫做后代元素
????????子元素也是后代元素
????兄弟元素????????
????????擁有相同父元素的是兄弟元素
子元素選擇器
????????????????作用：選中指定父元素的指定子元素
????????????????語(yǔ)法：?父元素>子元素
?
后代元素選擇器：
????????????????作用：選擇指定元素內(nèi)的指定后代元素
????????????????語(yǔ)法：祖先?后代
?
選擇下一個(gè)兄弟
????????????????????語(yǔ)法：前一個(gè)+后一個(gè)
?
選擇下面所有的兄弟
????????????????????語(yǔ)法：前一個(gè)~后一個(gè)
?
（五、）屬性選擇器(2023.2.16)
?
（六、）偽類選擇器(2023.2.16)
偽類（不存在的類，特殊的類）
????????????偽類用來(lái)描述一個(gè)元素的特殊狀態(tài)
????????????比如：第一個(gè)子元素，被點(diǎn)擊的元素，鼠標(biāo)移入的元素...
????????????偽類一般情況下都使用：開(kāi)頭
????????????????first-child?第一個(gè)子元素
????????????????last-child最后一個(gè)子元素
????????????????nth-child?選中第n個(gè)子元素
????????????????????特殊值：
???????????????????n?第n個(gè)?n的范圍0到正無(wú)窮
???????????????????2n?表示選中偶數(shù)位的元素
???????????????????2n+1?或odd表示選中奇數(shù)位的元素
??????????????????????
???????????? 以上這些偽類都是根據(jù)所有的子元素進(jìn)行
????????????????first-of-type
????????????????last-of-type
????????????????nth-of-type()
????????? ??這幾個(gè)偽類的功能和上述的類似，不同點(diǎn)是在同類型的元素進(jìn)行排序
????????????????:not()?否定偽類
????????????????????將符合條件的元素從選擇器中去掉
(七、)超鏈接的偽類（2023.2.16）
?
(八、)偽元素(2023.2.16)
偽元素，表示頁(yè)面中一些特殊的并不存在的元素
????????????????偽元素使用?：：開(kāi)頭
???????????::first-letter表示第一個(gè)字母
???????????::first-line??表示第一行
???????????::selection?表示選中的內(nèi)容
???????????::before?元素的開(kāi)始位置
???????????::after??元素的最后
Q標(biāo)簽雙引號(hào)就是通過(guò)::before和::after組成的
如圖，運(yùn)用了三個(gè)屬性::first-letter ::first-line ::selection
?
（九、）樣式的繼承(2023/2/19)
樣式的繼承，我們?yōu)橐粋€(gè)元素設(shè)置的樣式同時(shí)也會(huì)應(yīng)用到它的后代元素
? ? ? ? ? ?
? ? ? ? ? ? ? ? 這樣只需要設(shè)置一次即可讓所有的元素都具有該樣式
? ? ? ? ? ?
? ? ? ? ? ? ? ? 比如：背景相關(guān)的，布局相關(guān)的這些樣式都不會(huì)被繼承。
(十、)選擇器的權(quán)重(2023.2.19)
樣式的沖突:
? ? ? ? ? ? ? ? -當(dāng)我們通過(guò)不同的選擇器，選擇相同的元素，并且為相同的樣式設(shè)置為不同的值時(shí)，此時(shí)就發(fā)生了沖突。
? ? ? ? ? ? 發(fā)生樣式?jīng)_突時(shí)，應(yīng)用那個(gè)樣式由選擇器的權(quán)重（優(yōu)先級(jí)）決定
?選擇器的權(quán)重：
? 內(nèi)聯(lián)樣式 ? ? ? ? ? ?1,0,0,0
? id選擇器 ? ? ? ? ? ?0,1,0,0
? 類和偽類選擇器 ? ? ????0,0,1,0
? 元素選擇器 ? ? ? ? ??0,0,0,1
?? 通配選擇器 ? ? ? ? ?0,0,0,0
?? 繼承的樣式 ? ? ? ? ?沒(méi)有優(yōu)先級(jí)
? ? ? ? ? ? 比較優(yōu)先級(jí)時(shí)，需要將所有的選擇器的優(yōu)先級(jí)進(jìn)行相加計(jì)算，最后優(yōu)先級(jí)越高，則越優(yōu)先顯示（分組選擇器是單獨(dú)計(jì)算的）
? ?? ? 選擇器的累加不會(huì)超過(guò)其最大的數(shù)量級(jí)，類選擇器再高也不會(huì)超過(guò)id選擇器
(十一、)單位(2023.2.19)
?長(zhǎng)度單位：
? ? ? ? ? ? ? ? ? ? 像素 ? ?
? ? ? ? ? 屏幕（顯示器）實(shí)際上是由一個(gè)一個(gè)的小點(diǎn)構(gòu)成的
? ? ? ? ? 不同屏幕的像素大小是不同的，像素越小的屏幕像是的效果越清晰
? ? ? ? ? 所以同樣的200px在不同的設(shè)備下顯示效果不一樣
? ? ? ? ? ? ? ? ? ? 百分比
? ? ? ? ? ?也可以將屬性值設(shè)置為相對(duì)于其父元素屬性的百分比
? ? ? ? ? ?設(shè)置百分比可以使子元素隨父元素的改變而改變
? ? ? ? ? ? ? ? ? ? em ?
? ? ? ? ? ? ? ???? em是相對(duì)于元素的字體大小來(lái)計(jì)算的
? ? ? ? ? ? ? ? ?? 1em=1font-size
? ? ? ? ? ? ? ?? ? em會(huì)根據(jù)字體大小的改變而改變
? ? ? ? ? ? ? ? ? ? rem
? ? ? ? ? ? ?? ? rem是相對(duì)于根元素的字體大小來(lái)計(jì)算
（十二、）顏色(2023.2.19)
顏色單位：
? ? ? ? ? ?在CSS中可以直接使用顏色名來(lái)設(shè)置顏色
? ? ? ? ? ? ? ? ? ? ? ? 比如：red、orange、yellow、blue、green...
? ? ? ? ? ? ? ? ? ? ? ? 但是在css中直接使用顏色名是非常不方便
? ? ? ? ? ? ? ? RGB值：
? ? ? ? ? ? ? ? ? ? RGB通過(guò)三種顏色的不通濃度來(lái)調(diào)配出不同的顏色
? ? ? ? ? ? ? ? ? ? R red,給，G green，B blue
? ? ? ? ? ? ? ? ? ? 每一種顏色的范圍0~255(0%~100%)之間
? ? ? ? ? ? ? ? ? ? 語(yǔ)法:RGB(紅色，綠色，藍(lán)色)
? ? ? ? ? ? ? ? RGBA：
? ? ? ? ? ? ? ? ? 就是在rbg的基礎(chǔ)上添加了一個(gè)a表示不透明度
? ? ? ? ? ? ? ? ? 需要四個(gè)值，前三個(gè)和rgb一樣，第四個(gè)表示不透明度
? ? ? ? ? ? ? ? ? ? ? ? 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
3.layout
(一)文檔流normal flow(2023.2.19)
? ? ? ??網(wǎng)頁(yè)是一個(gè)多層的結(jié)構(gòu)，一層摞者一層
? ? ? ? 通過(guò)CSS可以分別為每一層來(lái)設(shè)置樣式
? ? ? ? 作為用戶來(lái)講只能看到最頂上一層
? ? ? ? 這些層中，最底下的一層稱為文檔流，文檔流是網(wǎng)頁(yè)的基礎(chǔ)
? ? ? ? 我們所創(chuàng)建的元素默認(rèn)都是在文檔流中進(jìn)行排列
? ? ? ? ? ? ??? 在文檔流中&不在文檔流中（脫離文檔流）
? ? ? ? ? ?
? ? ?元素在文檔流中有什么特征：
? ? ? ? ? ? ? ? ? ? 塊元素
? ? ? ? ? ? ? ? ? ? 行內(nèi)元素
-
- 行內(nèi)元素不會(huì)獨(dú)占頁(yè)面的一行，只占自身的大小
- 行內(nèi)元素在頁(yè)面中左向右水平排列，如果一行之中不能容納下項(xiàng)目的行內(nèi)元素
- 則元素回環(huán)到第二行繼續(xù)從左往右排列（書(shū)寫(xiě)習(xí)慣一致）
- 行內(nèi)元素的默認(rèn)寬度和高度都是被內(nèi)容撐開(kāi)
(二)盒模型-邊框(2023.2.19)
盒模型、盒子模型、框模型（box model）
? ? ? ? ? ? ? ? CSS將頁(yè)面中的所有元素設(shè)置為了一個(gè)矩形的盒子
? ? ? ? ? ? ? ? 將元素設(shè)置為矩形的盒子后，對(duì)頁(yè)面的布局就變成將不同的盒子擺放到不同的位置
? ? ? ? ? ? ? ? 沒(méi)一個(gè)盒子都由以下幾個(gè)部分組成：
? ? ? ? ? ? ? ? ? ? 內(nèi)容區(qū)(content)
? ? ? ? ? ? ? ? ? ? 邊框(border)
? ? ? ? ? ? ? ? ? ? 內(nèi)邊距(padding)
? ? ? ? ? ? ? ? ? ? 外邊距(margin) ? ?
內(nèi)容區(qū)(content)，元素中的所有子元素和文本內(nèi)容都在內(nèi)容區(qū)中排列
? ? ? ? ? ? ? ? ? ? 內(nèi)容區(qū)的大小用width和height兩個(gè)屬性來(lái)設(shè)置
? ? ? ? ? ? ? ? ? ? width設(shè)置內(nèi)容區(qū)的寬度
? ? ? ? ? ? ? ? ? ? height設(shè)置內(nèi)容區(qū)的高度
邊框(border),邊框?qū)儆诤凶舆吘?#xff0c;邊框里邊屬于盒子內(nèi)部，除了邊框都是盒子的外部
? ? 邊框的大小會(huì)影響到整個(gè)盒子的大小要設(shè)置邊框，需要至少設(shè)置三個(gè)樣式：
? ? ?????????????? 邊框的寬度 border-width
? ? ? ? ? ? ? ? ? ? 邊框的顏色 border-color
? ? ? ? ? ? ? ? ? ? 邊框的樣式 border-style
邊框的寬度
???????????? ? border-width: 10px;
? ? ? ? ? ? ? ?默認(rèn)值：一般都是3個(gè)像素
? ? ? ? ? ? ? ?border-width可以用來(lái)指定四個(gè)方向邊框的寬度
? ? ? ? ? ? ? ? 值的情況：
? ? ? ? ? ? ? ? ? ? 四個(gè)值：上 右 下 左
? ? ? ? ? ? ? ? ? ? 三個(gè)值：上 左右 下
? ? ? ? ? ? ? ? ? ? 兩個(gè)值：上下 左右
? ? ? ? ? ? ? ? ? ? 一個(gè)值：上下左右
?? ??除了border-width還有一組 border-xxx-width
? ? ? ? ? ? ? ? ? ? xxx可以是top right left bottom
? ? ? ? ? ? ? ? ? ? 用來(lái)單獨(dú)指定某一個(gè)邊的寬度
邊框的顏色
border-color用來(lái)指定邊框的顏色，同樣可以分別指定四個(gè)邊的邊框
?規(guī)則和border-width一樣
?border-color也可以省略不寫(xiě),如果省略了則自動(dòng)使用color的顏色值黑色
???
?
?
指定邊框的樣式
????????? border-style
? ? ? ? ? ? ? ? ? ? solid表示實(shí)線
? ? ? ? ? ? ? ? ? ? dotted點(diǎn)狀虛線
? ? ? ? ? ? ? ? ? ? dashed虛線
? ? ? ? ? ? ? ? ? ? double雙線
?border-style的默認(rèn)值是none表示沒(méi)有邊框
?
?
(三)盒模型-內(nèi)邊距(2023.2.20)
內(nèi)邊距(padding)
內(nèi)容區(qū)和邊框之間的距離是內(nèi)邊距
? ? ? ? ? ? ? ? ? ? 一共有四個(gè)方向的內(nèi)邊距
? ? ? ? ? ? ? ? ? ? ?padding-left
? ? ? ? ? ? ? ? ? ? ?padding-right
? ? ? ? ? ? ? ? ? ? ?padding-top
? ? ? ? ? ? ? ? ? ? ?padding-bottom
padding內(nèi)邊距的間歇屬性，可以同時(shí)指定四個(gè)方向的內(nèi)邊距
? ? ? ? ? ? ? ? ? ? 規(guī)則和border-width一樣
? ? ? ? ? ? ? ? ? ? 值的情況：
? ? ? ? ? ? ? ? ? ? 四個(gè)值：上 右 下 左
? ? ? ? ? ? ? ? ? ? 三個(gè)值：上 左右 下
? ? ? ? ? ? ? ? ? ? 兩個(gè)值：上下 左右
? ? ? ? ? ? ? ? ? ? 一個(gè)值：上下左右
(四)盒模型-外邊距(2023.2.20)
外邊距(margin)
外邊距不會(huì)影響到可見(jiàn)框的大小,但是外邊距會(huì)影響到盒子的位置? ? ? ?
? ? ? ? ? ? ? ? 一共有四個(gè)方向的外邊距：
? ? ? ? ? ? ? ? margin-top
? ? ? ? ? ? ? ? ? ? 上外邊距，設(shè)置一個(gè)正值，元素會(huì)向下移動(dòng)
? ? ? ? ? ? ? ? margin-right
? ? ? ? ? ? ? ? ? ? 默認(rèn)情況下設(shè)置margin-right不會(huì)產(chǎn)生任何效果
? ? ? ? ? ? ? ? margin-bottom
? ? ? ? ? ? ? ? ? ? 下外邊距，設(shè)置一個(gè)正值，其下邊的元素會(huì)向下移動(dòng)
? ? ? ? ? ? ? ? margin-left
? ? ? ? ? ? ? ? ? ? 左外邊距，設(shè)置一個(gè)正值，元素會(huì)向右移動(dòng)
? ? ? ? ? ? ? ? 元素在頁(yè)面中是按照自左向右的順序排列的，
? ? ?? 所以默認(rèn)情況下如果我們設(shè)置的左和上外邊距則會(huì)移動(dòng)元素自身
? ? ? ? ? ? ? ? ? 而設(shè)置下和右外邊距會(huì)移動(dòng)其他元素
? ? ? ? ? ? ? ?
? ?margin的簡(jiǎn)寫(xiě)屬性
? ? ? ?? ?margin可以同時(shí)設(shè)置四個(gè)方向的外邊距，用法和padding一樣
margin會(huì)影響到盒子實(shí)際占用空間
(五)盒子的水平居中(2023/2/20)
元素的水平方向的布局：
? ? ? ? ?元素在其父元素中水平方向的位置由以下幾個(gè)屬性共同決定
? ? ? ? ? ? ? ? ? ? ? ? margin-left
? ? ? ? ? ? ? ? ? ? ? ? border-left
? ? ? ? ? ? ? ? ? ? ? ? padding-left
? ? ? ? ? ? ? ? ? ? ? ? width
? ? ? ? ? ? ? ? ? ? ? ? padding-right
? ? ? ? ? ? ? ? ? ? ? ? border-right
? ? ? ? ? ? ? ? ? ? ? ? margin-right
一個(gè)元素在其父元素中，水平布局必須要滿足以下的等式
? ? ? ? margin-left + border-left +padding-left +width +padding-right+ border-right +margin-right =其父元素內(nèi)容區(qū)的寬度(必須滿足)
? ? ? ? 100 + 0 + 0 + 200 + 0 + 0 + 0=800
? ? ? ? ? ? ? ? 以上等式必須滿足，如果相加結(jié)果使等式不成立，則稱為過(guò)度約束，則等式會(huì)自動(dòng)調(diào)整
? ? ? ? ? ? ? ? ? ? 調(diào)整的情況：
? ? ? ? ? ? ? ? ? ? ? ? 如果這七個(gè)值中沒(méi)有auto的情況，則瀏覽器會(huì)自動(dòng)調(diào)整margin-right值以使等式滿足
? ? ? ? ? ? ? ? 這七個(gè)值有三個(gè)值可以設(shè)置為auto
? ? ? ? ? ? ? ? ? ? width
? ? ? ? ? ? ? ? ? ? margin-left
? ? ? ? ? ? ? ? ? ? margin-right
? 如果某個(gè)值為auto，則會(huì)自動(dòng)調(diào)整為auto的那個(gè)值以使等式成立
? ? ? ? ? ? ? ? ? ? 0+0+0+auto+0+0+0=800 auto=800
? ? ? ? ? ? ? ? ? ? 0+0+0+auto+200+0+0=800 auto=800
? ? ? ? ? ? ? ? ? ? auto+0+0+200+0+0+200=800 auto=400
? ? ? ? ? ? ? ? ? ? auto+0+0+200+0+0+auto=800 auto=300
? ? ? ?所以我們經(jīng)常利用這個(gè)特點(diǎn)來(lái)使一個(gè)元素在其父元素中水平居中
? ? ? ? ? ? ? ? ? ? 示例：
? ? ? ? ? ? ? ? ? ? ? ? width:xxxpx;
? ? ? ? ? ? ? ? ? ? ? ? margin:0 auto;
(六)盒子垂直方向的布局(2023.2.20)
盒子：?默認(rèn)情況下父元素的高度被內(nèi)容撐開(kāi)
?
子元素是在父元素的內(nèi)容區(qū)中排
?
? 如果子元素的大小超過(guò)了父元素，則子元素會(huì)從父元素中溢出可選值：
?? visible：默認(rèn)值 子元素會(huì)從父元素中溢出，在父元素外部的位置顯示
? ?hidden： 溢出內(nèi)容將會(huì)被裁剪不會(huì)顯示
? ?scroll ?生成兩個(gè)被動(dòng)值，通過(guò)滾動(dòng)條來(lái)查看完整的內(nèi)容
? ?auto ? ?根據(jù)需要生成滾動(dòng)條
?
?
?
?
(七)外邊距的折疊(2023.2.20)
垂直外邊距的垂直(折疊)
? ? ? ? ? ? 相鄰的垂直方向外邊距會(huì)發(fā)生重疊現(xiàn)象
? ? ? ? ? ? 兄弟元素
特殊情況：
? ? ? ? ? ? 父子元素
? ? ? ? ? ? ? ? 父子元素間相鄰?fù)膺吘?#xff0c;子元素的會(huì)傳遞給父元素(上外邊距)
? ? ? ? ? ? ? ? 父子外邊距的折疊會(huì)影響到頁(yè)面的布局，必須進(jìn)行處理
(八)行內(nèi)元素的盒模型(2023.2.20)
行內(nèi)元素的盒模型
? ? ? ?
- ? ? ? ?行內(nèi)元素可以設(shè)置margin，垂直方向的margin不會(huì)影響布局
- 行內(nèi)元素可以設(shè)置border，垂直方向的border不會(huì)影響到布局
- 行內(nèi)元素可以設(shè)置padding，但是垂直方向padding不會(huì)影響頁(yè)面的布局
- 行內(nèi)元素不支持設(shè)置寬度和高度
display 用來(lái)設(shè)置元素顯示的類型
? ? ? ? ? ? ? ? ? ? 可選擇：
行內(nèi)塊，即可以設(shè)置寬度和高度又不會(huì)獨(dú)占一行
? ? ? ? ? ? ? ?
visibility 用來(lái)設(shè)置元素的顯示狀態(tài)
? ? ? ? ? ? ? ? ? ? 可選值：
(九、)瀏覽器默認(rèn)樣式(2023.2.20)
默認(rèn)樣式：
? ? ? ? ? ? ? ? 通常情況，瀏覽器都會(huì)為元素設(shè)置一些默認(rèn)樣式
? ? ? ? ? ? ? ? 默認(rèn)樣式的存在會(huì)影響到頁(yè)面的布局，通常情況下編寫(xiě)網(wǎng)頁(yè)時(shí)必須要去除瀏覽器的默認(rèn)樣式（PC端的頁(yè)面）
重置樣式表，專門(mén)用來(lái)對(duì)瀏覽器的樣式進(jìn)行重置的
? ? ? ? ?reset.css直接去除了瀏覽器的默認(rèn)樣式
? ? ? ? ?normalize.css 對(duì)默認(rèn)樣式進(jìn)行了統(tǒng)一
(十、)盒子的尺寸(2023.2.22)
?
默認(rèn)情況下，盒子可見(jiàn)框的大小有內(nèi)容區(qū)、內(nèi)邊距和邊框共同決定的
? ? ? ?box-sizing用來(lái)設(shè)置盒子尺寸的計(jì)算方式（設(shè)置width和height的作用）
? ? ? ? ? ? ? ? ? ? 可選值：
? ? ? ? ? ? ? ? ? ? ? ? content-box默認(rèn)值，寬度和高度用來(lái)設(shè)置內(nèi)容區(qū)的大小
? ? ? ? ? ? ? ? ? ? ? ? border-box 寬度和高度用來(lái)設(shè)置整個(gè)盒子可見(jiàn)框的大小
? ? ? ? ? ? ? ? ? ? ? ? width和height指的是內(nèi)容區(qū)和內(nèi)邊距和邊框的總大小
當(dāng)我們?cè)O(shè)置box-sizing: content-box時(shí)，盒子還是默認(rèn)的樣式
然后我們?cè)O(shè)置box-sizing：border-box時(shí)，盒子大小會(huì)從內(nèi)容區(qū)內(nèi)邊距邊框的總和變?yōu)?span style="background-color:#ffff00;">盒子會(huì)隨著內(nèi)邊距和邊框調(diào)整自己的寬度和高度。
? ?---------->? ??
?
?
(十一、)輪廓和圓角(2023.2.22)
box-shadow用來(lái)設(shè)置元素的陰影效果，陰影不會(huì)影響到頁(yè)面布局
? ? ? ? ? ?第一個(gè)值 左側(cè)偏移量 設(shè)置陰影的水平位置 正值向右移動(dòng) 負(fù)值向左移動(dòng)
? ? ? ? ? ?第二個(gè)值 垂直偏移量 設(shè)置陰影的水平位置 正值向下移動(dòng) 負(fù)值向上移動(dòng)
? ? ? ? ? ?第三個(gè)值 陰影的模糊半徑
? ? ? ? ? ?第四個(gè)值 陰影的顏色
?
?
outline用來(lái)設(shè)置元素的輪廓線，用法和border一樣
? ? ? ? ? ? ? ? ? ? 輪廓和邊框不同的點(diǎn)，就是輪廓不會(huì)影響到可見(jiàn)框的大小
?
?
border-radius: 用來(lái)設(shè)置圓角 ?圓角設(shè)置的圓的半徑大小*/
? ? ? ? ? ? /* border-top-left-radius */
? ? ? ? ? ? /* border-top-right-radius */
? ? ? ? ? ? /* border-bottom-left-radius */
? ? ? ? ? ? /* border-bottom-right-radius */
?border-radius 可以分別指定四個(gè)角的圓角
? ? ? ? ? ? ? ? 四個(gè)值 左上 右上 右下 左下
? ? ? ? ? ? ? ? 三個(gè)值 ?左上 右上/左下 右下
? ? ? ? ? ? ? ? 兩個(gè)值 左上/右下 右上/左下
上邊兩個(gè)值都可以是div變成園，一、50%二、寬和高的一半
?
總結(jié)
以上是生活随笔為你收集整理的尚硅谷李立超老师讲解web前端---笔记（持续更新）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： ORA-12805: parallel
- 下一篇： 前端自学日记-day5