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