頭部開(kāi)始

logo部分

導(dǎo)航nav

搜索search

用戶user

banner橫幅圖片開(kāi)始Start

banner橫幅圖片結(jié)束End

——————————————————————

無(wú)序列表? 應(yīng)用場(chǎng)景：導(dǎo)航晴圾、輪播圖蹲坷、純列表 都是用無(wú)序列表來(lái)做的

注意ul里面只能放li，但是li里面可以放任何標(biāo)簽

<ul>

<li>? ? </li>? ? ? 會(huì)獨(dú)占一行有一個(gè)小圓點(diǎn)

</ul>

有序列表

<ol>

<li>? </li>? ? ? ? 前面會(huì)有個(gè)序號(hào)

</ol>

自定義列表

<dl>

<dt>? </dt>? ? ? ? 用于自定義列表標(biāo)題

<dd> <dd>? ? ? ? 自定義列表項(xiàng)目

</dl>

————————————————-

表格

<table border="1" >

<caption>? </coption>? ? 里面放大標(biāo)題可以自己居中

<tr>

? ? <th></th>? ? ? ? ? 標(biāo)題可以變大放面

? ? <td></td>? ? ? ? ? 里面的格子

</tr>

</table>

格子合并

rowspan =“2”? ? ? ? ? 跨行合并

colspan? ? ? ? ? ? ? ? ? ? ? ? 跨列合并

————————————————————

input? 屬性

input? ? text默認(rèn)? ? ? 文本輸入框? ? ? ：nth-child(1-8){默認(rèn)選中需要添加checked屬性}

? ? ? ? ? ? paword? ? ? 密碼框? ? ?

? ? ? ? ? ? radio? ? ? ? ? 單選框? ? 【注意】添加相同name屬性可以實(shí)現(xiàn)多選一的效果? ? ? ? ? ?

? ? ? ? ? checkbox? ? 多選框? ?

按鈕：

? ? ? ? ? submin? ? ? ? 提交? ?

? ? ? ? ? reset? ? ? ? ? ? 重置

? ? ? ? ? button? ? ? ? ? 普通按鈕? 建議用? ? 【注意】修改里面的文案加value

文件上傳：

? ? ? ? ? file? ? 如果多就加一個(gè)multiple就可以多文件上傳

按鈕：

<button>按鈕</button>

文本域

<textarea? cols="30" rows="10"></textarea>

? ? ? ? ? ? ? ? ? cols? ? 一行輸入的字?jǐn)?shù)

? ? ? ? ? ? ? ? ? rows? 輸入的行數(shù)

label標(biāo)簽增大可以點(diǎn)的區(qū)域? ? ? 【重點(diǎn)】

<label>

? ? <input type="checkbox"> 敲代碼

? </label>

第二種學(xué)法

<input type="checkbox" id="code">

<label for="code">敲代碼</label>

屬性：placeholder 占位符? 就系文本框用戶輸入完就會(huì)消失嘅屬性

【】【】【】【重點(diǎn)】用</form></form>包裹input 的才會(huì)用的了重置按鈕的功能

___________________________________________________________________________?

下拉選項(xiàng)框：

<select>

<ooption seceted>? ? </option> 【注意】設(shè)置默認(rèn)選中需要給option添加selected屬性

</select>

————————————————————————————————————

2021年9月3日

靜態(tài)地位? ? ? ? ? ? ? 基本不用

position: static? ?

相對(duì)定位? ? ? ? ? ? 會(huì)占位置建議用在父元素? ?

pasition-relative

絕對(duì)定位? ? ? ? ? ? 不占位置? ? ? 父相子絕

pasition-absolute

固定定位? ? ? ? ? ? 不占位置

pasition-fixed

——————————————————————

水平垂直居中? 用定位? 給父元素加上相對(duì)定位

可以實(shí)現(xiàn)父變變跟著變? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 用的地方比較廣泛

position: absolute;

? ? ? ? ? ? left: 50%;

? ? ? ? ? ? top: 50%;

? ? ? ? ? ? margin-top: -100px;? ? ? ? ? ? ? ? ? ? ? ? ? 子元素的高

? ? ? ? ? ? margin-left: -100px;? ? ? ? ? ? ? ? ? ? ? ? ? ? 子元素的寬÷2

第二種方法

position: absolute;

? ? ? ? ? ? left: 50%;

? ? ? ? ? ? top: 50%;

（2D 轉(zhuǎn)換 來(lái)居中）

? ? ? ? ? ? transform: translate(-50%, -50%);

——————————————————————

img和文字有基線的居中不對(duì)其的在圖片的樣式加? ? ? 【重點(diǎn)看看】

vertical-align：baseline? ? ? 基線對(duì)齊

vertical-align：top? ? ? ? ? ? ? 頂部對(duì)齊

vertical-align：middle? ? ? ? 中部對(duì)齊

vertical-align：baseline? ? ? 底部對(duì)齊

【注意】：給行內(nèi)元素或者行內(nèi)塊元素設(shè)置? ? ? 優(yōu)先給img標(biāo)簽設(shè)置

讓圖片隔壁的文字跟圖片居中

設(shè)置在圖片的樣式里

vertical-align: middle? ? 中

? ? ? ? ? ? ? ? ? ? ? top? ? ? ? ? 上

? ? ? ? ? ? ? ? ? ? ? middom? 中

? ? ? ? ? ? ? ? ? ? bottom? ? 下

——————————————————-——————————

用在button按鈕? ? ? ? ? ? 鼠標(biāo)變形樣式

cursor: pointer? ? ? ? ? ? ? ? ? ? ? ? ? 鼠標(biāo)變成小手建議一開(kāi)就寫(xiě)

cursor:not-allowed;" disabled? 禁止訪問(wèn)小手

cursor:default? ? ? ? ? ? ? ? ? ? ? ? ? ? 沉默箭頭

cursor:text? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 工字行

cursor:move? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 十字光標(biāo)

——————————————————————————————————————

用于盒子做半圓

border-radius：0 0 0 0喇聊；可以設(shè)置4個(gè)值分別是左上開(kāi)始

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 順時(shí)針

————————————————————————-

能夠設(shè)置元素顯示和隱藏

display:none锻拘；? ? ? ? ? 元素隱藏? ? ? ? 隱藏后是不占位置的記住?

display:block;? ? ? ? ? ? 元素顯示

visibility：hidden? ? ? 也是隱藏? ? ? 但是隱藏占位置不建議用跟上面的做對(duì)比

————————————--————————————

默認(rèn)值 溢出的部分正常顯示

? ? ? ? ? ? ? ? overflow: visible;

? ? ? ? ? ? ? ? overflow:hidden? ? ? ? ? ? ? ? 溢出隱藏? oh? 【重點(diǎn)】? 還占位置

? ? ? ? ? ? ? ? overflow:scroll? ? ? ? ? ? ? ? ? 水平和垂直都添加一個(gè)滾動(dòng)條

? ? ? ? ? ? ? ? overflow:auto? ? ? ? ? ? ? ? ? 自動(dòng) 溢出了就顯示滾動(dòng)條 不溢出就不顯示滾動(dòng)條? [重點(diǎn)]? 一般用這個(gè)

三行代碼的作用是：隱藏變省略號(hào)

? ? ? ? ? ? overflow: hidden;? ? ? ? ? ? 溢出部分隱藏

? ? ? ? ? ? text-overflow: ellipsis;? ? ? 文字變省略號(hào)

? ? ? ? ? ? white-space: nowrap;? ? ? 強(qiáng)行文字變成一行

——————————————————————————————————

元素整體透明度 opacity 0 - 1

opacuty:.5;

——————————————————————————

過(guò)度

transition: 2s linear;? ? ? linear勻速

————————————————————————————

偽元素 做遮罩層比較方便

：：before? ? 在......之前

：：after? ? ? ? 在......之后

兩個(gè)樣式都要加下面的在能用

content: "";

——————————————————————

拓展：跟盒子的邊框合并

border-collapse：collapse? ? ? 要給table標(biāo)簽設(shè)置

2021.9.4

精靈圖? ? ? ? ? ? ? ? ? ? ? ? 第一個(gè)是left左 第二是top上都是負(fù)值

background: url(./images/abcd.jpg) -366px -411px;

——————————————————————————

注意連寫(xiě)的話要加/分隔位置和尺寸不讓么顯示

如果寫(xiě)位置的的話第一值是左右第二個(gè)值是上下

樣式是

background-size? ? ? ? ? ? ? ? ? ? 設(shè)置圖片大小

background-size: contain;? ? ? 上下到了就不放大了

background-size: cover;? ? ? ? 左右到了就不放大了

如過(guò)分開(kāi)寫(xiě)的話background-size 【注意】要寫(xiě)在下面

background的連寫(xiě)：

background：color image repeat position / size

——————————————————————

盒子陰影? ?

瀏覽器調(diào)試工具-> 陰影編輯器 -> 調(diào)試

四個(gè)值

box-shadow: 水平偏移 垂直偏移 模糊程度 顏色;

box-shadow：0 0 0 #000蔽午；

文字陰影? ? ?

text-shadow: 水平 垂直 模糊程度 顏色

text-shadow: 0 0 0 #000阳距；

可以連寫(xiě)逾雄，分開(kāi)

text-shadow: 0 0 0 #000腐巢，text-shadow: 0 0 0 #000品追；

【】【【】【】【鼠標(biāo)懸停有出來(lái)的感覺(jué)】

給個(gè)position: relative;父元素

transition: .3s;? ? ? 過(guò)度值

top: 0;? ? ? ? ? ? ? ? ? 重o開(kāi)始

.good_button li:hover {

? ? box-shadow: 1px 0px 6px 0px #000;? ? ? ? ? ? 設(shè)置盒子的背景色

? ? top: -3px;? ? ? ? ? ? ? ? ? ? ? ? ? ? 要加個(gè)相對(duì)定位給父元素

}

或者 transform: translateY(-3px);加在hover上

————————————————————————

偽元素：? ? ? 【重點(diǎn)※※※※※※※※※※】

：nth-child(1){? ? ? ? ? 0,1,2,3,4,5加在后面的話就是直接選中子元素的第1個(gè)

}

：first-child{}? ? ? ? ? ? 選中第一個(gè)

：last-child{}? ? ? ? ? ? 選中最后一個(gè)

：nth-last-child{n}? ? ? 倒數(shù)的第幾個(gè)

：nth-child(2n) {? ? ? ? 就是偶數(shù)或者改成even

：nth-child(2n+1) {? ? 就系奇數(shù)或者odd

：nth-child(-n+5) {? ? 就是找到前5個(gè)

：nth-child(n+5) {? ? ? 就是從第5個(gè)開(kāi)始往后

偽元素：? ? ? ? ? ? ? ? ? ? ? 【重點(diǎn)※※※※※】

：：before? {? ? ? ? ? ? ? ? 在........之前

? ? ? comtent="";? ? ? ? ? ? 必寫(xiě)屬性不然沒(méi)效果

}

：：after? {? ? ? ? ? ? ? ? ? ? 在.......之后? ? ?

? ? ? comtent="";? ? ? ? ? ? 必寫(xiě)屬性不然沒(méi)效果

}

————————————————————————————————

網(wǎng)頁(yè)三大優(yōu)化

title? ? ? ? ? ? ? ? 通常設(shè)網(wǎng)名? ? ? ?

description? ? 用來(lái)注釋網(wǎng)頁(yè)用途

keywords? ? ? 用來(lái)注釋用品

用來(lái)改變網(wǎng)站網(wǎng)站上的logo

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

——————————————————————————

2021.9.6

尋找BUG思路

【群發(fā)消息】1. 確定是否打開(kāi)了一個(gè)錯(cuò)誤的文件。

2. 確定文件是否成功引入冯丙。

3. 文件是否有保存

4. 去頁(yè)面檢查肉瓦，哪里有問(wèn)題就檢查哪里遭京。

5. 基礎(chǔ)的語(yǔ)法錯(cuò)誤，vscode會(huì)幫助我們標(biāo)紅提示

6. css樣式出現(xiàn)中橫線/刪除線3中情況

6.1 沒(méi)有感嘆號(hào) 樣式的層疊性 畫(huà)了橫線泞莉。 提升權(quán)重哪雕。

6.2 有感嘆號(hào) unknown property name 不知道這個(gè)屬性的名字是啥?

6.3 有感嘆號(hào) invalid property value 不合法的屬性值。

7. 如果樣式在頁(yè)面中檢查不到鲫趁，重點(diǎn)去看css選擇器是否有錯(cuò)誤斯嚎。

8. 學(xué)會(huì)剪切可能有問(wèn)題的代碼，逐步縮小代碼出問(wèn)題的范圍

--------------

簡(jiǎn)潔性 - 確保代碼足夠簡(jiǎn)介挨厚，冗余的部分在代碼復(fù)盤(pán)的時(shí)候要進(jìn)行合理化的精簡(jiǎn)

可讀性 - 類(lèi)名 結(jié)構(gòu)要符合規(guī)范

健壯性/魯棒性 - 代碼的穩(wěn)定度堡僻，不受后續(xù)代碼的增加和刪除而受到影響

--------------

——————————————————————————————————

——————————————————————————————————

——————————————————————————

1. 設(shè)置寬度 width: 100px;

2. 設(shè)置高度 height: 100px;

3. 設(shè)置外邊距 上下左右均有100px的外邊距（盒子與盒子之間的距離）margin: 100px;

3.1 設(shè)置上外邊距 margin-top: 100px;

3.2 設(shè)置下外邊距 margin-bottom: 100px;

3.3 設(shè)置左外邊距 margin-left: 100px;

3.4 設(shè)置右外邊距 margin-right: 100px;

3.5 有寬度的塊級(jí)元素(占一整行的元素)水平 橫向 居中

? ? margin: 0 auto;

? ? margin: auto;

? ? 如果只寫(xiě)兩個(gè)值

? ? margin: 上下外邊距 左右外邊距

3.6 垂直方向上相鄰的兩個(gè)元素外邊距會(huì)發(fā)生合并現(xiàn)象：

上面盒子設(shè)置margin-bottom: 100px;

下面盒子設(shè)置margin-top: 200px;

則會(huì)取較大的值，最終垂直方向上相鄰的兩個(gè)元素之間有200px的距離疫剃，不會(huì)發(fā)生疊加钉疫。

3.7 垂直方向上嵌套的兩個(gè)元素外邊距會(huì)發(fā)生塌陷現(xiàn)象：

外面大盒子包裹里面小盒子，

里面小盒子設(shè)置margin-top: 100px;

則大盒子會(huì)和小盒子一起距離頂部100px距離巢价，發(fā)生塌陷現(xiàn)象牲阁。

解決辦法: 給大盒子設(shè)置overflow: hidden;(推薦)

或者

給大盒子設(shè)置1px的透明邊框

或者

給大盒子設(shè)置1px的padding

4. 設(shè)置內(nèi)邊距（盒子邊框與內(nèi)容之間的距離）上下左右均有100px的內(nèi)邊距 padding: 100px;

4.1 設(shè)置上內(nèi)邊距 padding-top: 100px;

4.2 設(shè)置下內(nèi)邊距 padding-bottom: 100px;

4.3 設(shè)置左內(nèi)邊距 padding-left: 100px;

4.4 設(shè)置右內(nèi)邊距 padding-right: 100px;

? ? padding: 上下內(nèi)邊距 左右內(nèi)邊距

5. 取消ul li 列表的小圓點(diǎn) list-style: none;

6. 取消下劃線 text-decoration: none;

6.1 添加下劃線 text-decoration: underline;

7. 搜索文檔中的內(nèi)容 ctrl+f

8. 設(shè)置背景顏色 background-color: #000;

8.1 background-color: rgb(0,0,0);

8.2 設(shè)置背景顏色透明：background-color: rgba(0,0,0,.3);

8.3 透明度中a的取值范圍是從0(完全透明) - 1(完全不透明)

9. 元素向左浮動(dòng) float: left

10. 元素向右浮動(dòng) float: right

10.1 清除浮動(dòng)：子元素浮動(dòng)了，脫離標(biāo)準(zhǔn)流不占位置 父元素沒(méi)有設(shè)置高度的情況下

無(wú)法被子元素?fù)伍_(kāi)壤躲，高度會(huì)變成0咨油，所以需要清除浮動(dòng)帶來(lái)的影響

隔墻法：給最后一個(gè)浮動(dòng)的元素后添加一個(gè)塊級(jí)元素 同時(shí)添加clear: both;

給浮動(dòng)的父元素添加overflow: hidden;

偽元素清除浮動(dòng)

.clearfix::after{

? ? content: "";

? ? display: block;

? ? height: 0;

? ? visibility: hidden;

? ? clear: both;

}

11. 設(shè)置邊框

? ? border: 邊框的粗細(xì) 線形狀 顏色

? ? border: 1px solid #000

? ? 設(shè)置上邊框 border-top: 1px solid #000

? ? 設(shè)置下邊框 border-bottom: 1px solid #000

? ? 設(shè)置左邊框 border-left: 1px solid #000

? ? 設(shè)置右邊框 border-right: 1px solid #000

? ? 設(shè)置透明顏色邊框

? ? border: 1px solid transparent;

12. 單行文字垂直居中： line-height: 高度值

13. 去掉邊框 border: 0;

? ? 去掉外輪廓線 outline: 0;

14. 設(shè)置文字顏色 color: #000;

15. 設(shè)置行高 line-height: 20px;

16. 文字水平居中 text-align: center;

17. 設(shè)置css3的盒子模型： box-sizing: border-box;

18. 設(shè)置版心 .w{width: 1200px; margin: 0 auto;}

19. 設(shè)置文字大小 font-size: 14px;

20. 設(shè)置文字粗細(xì) font-weight: 700; 加粗

21. 設(shè)置文字變細(xì) font-weight: 400; 變細(xì)

22. 設(shè)置字體 font-family: '微軟雅黑';

23. 設(shè)置斜體文字正常顯示 font-style: normal;

? ? 設(shè)置文字傾斜顯示 font-style: italic;

24. 設(shè)置相對(duì)定位 position: relative; 相對(duì)于自身移動(dòng) 占位置

25. 設(shè)置絕對(duì)定位 position: absolute; 相對(duì)于最近一層有定位的父輩元素 不占位置

26. 設(shè)置固定定位 position: fixed; 相對(duì)于瀏覽器可視窗口移動(dòng) 不占位置

27. 設(shè)置定位的方位值：top: 1px; 遠(yuǎn)離上面1px

? ? ? ? ? ? ? ? ? ? bottom: 1px 遠(yuǎn)離下面1px

? ? ? ? ? ? ? ? ? ? left: 1px 遠(yuǎn)離左面1px

? ? ? ? ? ? ? ? ? ? right: 1px 遠(yuǎn)離右面1px

28. 溢出隱藏： overflow: hidden;

29. 標(biāo)簽/元素隱藏不占位置 display: none;

30. 讓標(biāo)簽/元素隱藏的元素顯示出來(lái) display: block;

31. 標(biāo)簽/元素隱藏占位置 visibility: hidden;

32. 標(biāo)簽/元素隱藏占位置 visibility: visible;

33. 文本首行縮進(jìn) text-indent: 2em;

34. 透明顏色 transparent

35. 設(shè)置背景 屬性連寫(xiě) background: 背景顏色 背景路徑 是否平鋪 水平偏移值 垂直偏移值；

例如 background: pink url('../images/sprites.png') no-repeat -10px -20px;

注意精靈圖移動(dòng)背景位置 都是負(fù)值或0 不可能為正值

除此之外水平偏移值和垂直偏移值還可以用方位坐標(biāo)值來(lái)顯示

top 靠頂顯示背景圖片 bottom 靠底顯示背景圖片 left 靠左顯示背景圖片 right 靠右顯示背景圖片

**Ｆ饩簟Ｒ鄣纭！一定注意給背景圖片的盒子一定要有寬高值Ｃ拚汀７ㄉ！沒(méi)有寬高和內(nèi)容的盒子是無(wú)法顯示背景圖片的Ｑ渖荨ｖ！**

36. ul li:nth-child(1){}? ? ? ? ? ? 選中ul下的第一個(gè)li

? ? ul li:first-child{}? ? ? ? ? ? 選中ul下的第一個(gè)li

? ? ul li:last-child{}? ? ? ? ? ? ? 選中ul下的最后一個(gè)li

? ? ul li:nth-child(2n){}? ? ? ? ? 選中ul下偶數(shù)個(gè)li 比如第2個(gè) 第4個(gè) 第6個(gè) li

? ? ul li:nth-child(even){}? ? ? ? 選中ul下偶數(shù)個(gè)li 比如第2個(gè) 第4個(gè) 第6個(gè) li

? ? ul li:nth-child(2n+1){}? ? ? ? 選中ul下奇數(shù)個(gè)li 比如第1個(gè) 第3個(gè) 第5個(gè) li

? ? ul li:nth-child(odd){}? ? ? ? ? 選中ul下奇數(shù)個(gè)li 比如第1個(gè) 第3個(gè) 第5個(gè) li

? ? ul li:nth-child(n+3){}? ? ? ? ? 選中ul下從第3個(gè)開(kāi)始到最后的li 包括第三個(gè)

? ? ul li:nth-child(-n+3){}? ? ? ? 選中ul下從開(kāi)始到第三個(gè)的li? ? 包括第三個(gè)

37. 行內(nèi)塊元素和行內(nèi)元素的垂直居中對(duì)齊? ? vertical-align: middle; 同時(shí)可以解決img底部3px的問(wèn)題

38. 設(shè)置邊框圓角 border-radius: 10px;

39. 創(chuàng)建一個(gè)圓形 border-radius: 50%;

40. 創(chuàng)建一個(gè)膠囊形狀 border-radius: 高度的一半

50. 文字屬性連寫(xiě) font: italic 700 16px/30px "Microsoft Yahei"

? ? ? ? ? ? ? ? font: 字體斜體 粗細(xì) 大小/行高 字體家族

? ? ? ? ? ? ? ? 其中 字體大小和 字體家族是必寫(xiě)屬性麻掸，順序不能夠調(diào)換位置

51. 子絕父相 子元素絕對(duì)定位 父元素相對(duì)定位

52. 絕對(duì)定位酥夭、固定定位、浮動(dòng)不占位置脊奋，脫離標(biāo)準(zhǔn)流

? ? 脫離標(biāo)準(zhǔn)流的元素默認(rèn)寬度高度由內(nèi)容撐開(kāi)

? ? 默認(rèn)轉(zhuǎn)換為塊級(jí)元素

? ? margin: 0 auto;無(wú)法使其居中

? ? 不會(huì)發(fā)生外邊距塌陷的問(wèn)題

? ? 相對(duì)定位占位置

? ? 浮動(dòng)永遠(yuǎn)不會(huì)壓住文字

53. 權(quán)重 ：? 繼承 * 通配符選擇器 0 < 標(biāo)簽選擇器熬北、偽元素選擇器 1 < 類(lèi)選擇器、偽類(lèi)選擇器诚隙、屬性選擇器讶隐、結(jié)構(gòu)偽類(lèi)選擇器 10 < ID選擇器 100 < 行內(nèi)樣式 < 1000 < !important 正無(wú)窮

54. 浮動(dòng) 一般li包裹著a都是讓li左浮動(dòng) float: left;

? ? 右浮動(dòng): float: right;

? ? 浮動(dòng)的元素不占位置。無(wú)法撐開(kāi)父元素高度久又，所以要清除浮動(dòng)：本質(zhì)是閉合浮動(dòng)

? ? 常見(jiàn)的清除浮動(dòng)的方式有4種：

? ? 1. 隔墻法：在浮動(dòng)的元素后面插入一個(gè)塊級(jí)元素巫延，同時(shí)設(shè)置clear: both;

? ? 2. 溢出隱藏法：在浮動(dòng)元素所在的父元素設(shè)置overflow: hidden; 觸發(fā)BFC 實(shí)現(xiàn)清除浮動(dòng)

? ? 3. 單偽元素清除浮動(dòng)

? ? .clearfix:after{

? ? ? ? content: "";

? ? ? ? display: block;

? ? ? ? height: 0;

? ? ? ? visibility: hidden;

? ? ? ? clear: both;

? ? }

? ? ? /*兼容IE的寫(xiě)法*/

? ? ? ? .clearfix{

? ? ? ? ? ? *zoom:1;

? ? ? ? }

? ? 4. 雙偽元素清除浮動(dòng)

? ? ? ? .clearfix:before,.clearfix:after{

? ? ? ? ? ? content:"";

? ? ? ? ? ? display:table;

? ? ? ? }

? ? ? ? .clearfix:after{

? ? ? ? ? ? clear:both;

? ? ? ? }

? ? ? ? /*兼容IE的寫(xiě)法*/

? ? ? ? .clearfix{

? ? ? ? ? ? *zoom:1;

? ? ? ? }

55. 元素的顯示與隱藏

? ? 1. display: block; display: none; 元素顯示隱藏不占位置

? ? 2. visibility: visible; visibility: hidden; 元素顯示隱藏占位置

? ? 3. overflow: hidden; 元素溢出隱藏 可解決清除浮動(dòng)和外邊距塌陷問(wèn)題 原理是觸發(fā)了BFC

? ? 4. overflow: auto; 根據(jù)內(nèi)容自動(dòng)添加滾動(dòng)條

? ? 5. overflow: scroll; 添加滾動(dòng)條

? ? 6. opacity: 0; 完全透明占位置 opacity: 1; 完全不透明

56. 過(guò)渡：

? ? transition: 過(guò)渡的屬性 過(guò)渡時(shí)間(帶單位) 速度曲線 過(guò)渡延遲時(shí)間

? ? transition: width 2s linear 1s;? 讓寬度 延遲1s后 以linear線性的方式 持續(xù)2s的時(shí)間過(guò)渡

? ? 通常寫(xiě)法

? ? transition: 2s;

——————————————————

——————————————————

移動(dòng)wed

2021.9.11

啊里巴巴矢量圖上網(wǎng)官網(wǎng)下載icontfont官網(wǎng)

【首先】嵌入css文件下載完就有了

第一種是嵌入式

<i class="iconfont icon-gouwucheman

? "></i>? 叫css文件名加后面的編號(hào)

第二的是用偽元素

.box::before {

? ? ? font-family: iconfont;? ? ? ? ? ? 字號(hào)填文字的文件

? ? ? content: "\e641";? ? ? ? ? ? ? ? ? 內(nèi)容要近找來(lái)復(fù)制文件

? ? }

第三種就是連網(wǎng)

<link rel="stylesheet" >? ? 記住前面要加http:

應(yīng)用

<i class="iconfont icon-jiantou1"></i>

————————————————————

位移就像相對(duì)位置一樣

【】【】行內(nèi)元素不起效果

transform：translate(100px ,100px) 第一個(gè)是x軸 第二軸

浮動(dòng)居中響應(yīng)式布局

個(gè)父盒子加一個(gè)相對(duì)定位

position: absolute;

? ? ? left: 50%;

? ? ? top: 50%;

? ? ? transform: translate(-50%, -50%);

transform: rotate(360deg);? ? 旋轉(zhuǎn) 正值就是順時(shí)針? 負(fù)值就是逆時(shí)針? 單位deg

transform-origin: right;? ? ? ? 移動(dòng)圓心 誰(shuí)在轉(zhuǎn)就加給誰(shuí)

他是一個(gè)符合屬性可以

transform: translate(600px) rotate(360deg);? 如果平移更旋轉(zhuǎn)一起效五，平移放在前面

【要連寫(xiě)】

transform: scale（2，3)? ? ? ? ? 等比例縮放第一個(gè)是x第二個(gè)y

_________________________________________________________________________________________

漸變色

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 第一個(gè)值是從左往右可以加度數(shù)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 50deg? 第二就是從什么色到什么色漸變

background-image: linear-gradient(to right, pink, green);

background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.9));? ? 加個(gè)透明色

————————————————————————————————————

————————————————————————————————————

2021.9.12

移動(dòng)wed第二天

————————————————————————

空間轉(zhuǎn)換? 了解

【注意】要分明是那一個(gè)軸轉(zhuǎn)

給父元素設(shè)置perspective:（800px）? 開(kāi)視距是看Z軸

transform：ranslateZ(-400px)

transform-style: preserve-3d;? ? 給父元素加就變成3D的效果

transform:rotate3d(1,1,0,45deg)? ? ? 要加3D才行有效果

——————————————————————————

動(dòng)畫(huà) 【】【】【重點(diǎn)】

第一種：

@kwyframes 動(dòng)畫(huà)名稱{

form{開(kāi)始

? ? ? }

to{? 結(jié)束? }

}

第二種：

@kwyframes 動(dòng)畫(huà)名稱{

0%{開(kāi)始

? ? ? }

50%{? }

100%{

}

}

引用動(dòng)畫(huà)

是一個(gè)復(fù)合屬性

animation: mosd 1s linear infinite alternate forwards;? ? 連寫(xiě)

animation：動(dòng)畫(huà)名稱 時(shí)間 勻速播放 重復(fù)次數(shù) 動(dòng)畫(huà)播放炉峰；

linear? ? ? ? 勻速播放? ? ? ? ease? ? 默認(rèn)

infinite? ? ? 重復(fù)次數(shù)

alternate? 動(dòng)畫(huà)播放 交替播放

forwards? 執(zhí)行完畢時(shí)狀態(tài) forwards不能和infinite結(jié)合使用畏妖，否則不生效

animation-play-state: paused;? ? 鼠標(biāo)懸停停止加個(gè)hover

steps（加數(shù)字就是多少幀）? ? 逐幀動(dòng)畫(huà)? 建議用這個(gè)不要?jiǎng)蛩?/p>

【注意】動(dòng)畫(huà)和動(dòng)畫(huà)用起來(lái)的時(shí)候，分開(kāi)

background-size: cover疼阔； 把背景圖片放大到適合元素容器的尺寸,圖片比例不變

background-position: -8580px 0;? ? ? 背景圖的位置

————————————————————————————

2021.9.14

移動(dòng)wed第3天

【】【】【】【】【】【】【】【】【】【】【重點(diǎn)記】

彈性布局 display:flex? ? ? ? ? ? ? ? ? ? ? 給父盒子設(shè)置

設(shè)置主軸就是水平

justify-content:flex-stalt;? ? ? ? ? ? ? ? 默認(rèn)值去戒劫，起點(diǎn)開(kāi)始依次排序? ? 向左靠

justify-content:flex-end? ? ? ? ? ? ? ? ? 終點(diǎn)開(kāi)始依次排序? ? ? ? ? ? ? ? ? ? 向右靠

justify-content: center;? ? ? ? ? ? ? ? ? ? 居中擠在一起顯示? ? ? ? ? ? ? ? ? ? 向中間靠

justify-content: space-around;? ? ? ? 左右等分? ? 均分2側(cè)

justify-content: space-between;? ? 空白間距均分在相鄰盒子之間

justify-content: space-evenly;? ? ? ? 所有距離等分

側(cè)軸

align-items: flex-start;? ? ? ? ? ? ? ? ? ? 上部

align-items: center;? ? ? ? ? ? ? ? ? ? ? ? 中部

align-items: flex-end;? ? ? ? ? ? ? ? ? ? 下部

align-items：stretch? ? ? ? ? ? ? ? ? ? ? 默認(rèn)

align-self：flex-start;? ? ? ? ? ? ? ? ? ? ? 給自己設(shè)置

flex: 1;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 伸縮比一個(gè)固定寬高其他給這個(gè)填滿

flex-direction: column;? ? ? ? ? ? ? ? ? ? 改變主軸方向

align-items: center;? ? ? ? ? ? ? ? ? ? ? ? 單行換行

flex-warp:warp;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 多行換行

align-content：space-evenly;? ? ? ? 調(diào)整行對(duì)齊方式? 屬性值跟justify-content：的屬性一樣

————————————————————————————————

2021.9.16

移動(dòng)端設(shè)配視口

em? ? ? ? ? ? 就是參考body的文字單位

rem? ? ? ? ? ? root根的意識(shí)? ? ? rem是根據(jù)html設(shè)置的字體大小來(lái)算

@media(width:375px) {? ? ? ? ? ? 適配視口的寬度? 就是手機(jī)適配要加單位

? ? ? ? ? ? html {

? ? ? ? ? ? ? ? font-size: 37.5px;? ? ? ? 適配視口? 文字大小是寬度的1/10? 10分之一

? ? ? ? ? ? }

? ? ? ? }

pc端

? ? ? 或者（min-width：600px）and (max-1200px)? ? ? 600到1200的就適配

@media(min-width:1200px) {

? ? ? ? ? ? .box {

? ? ? ? ? ? ? ? background-color: black;

? ? ? ? ? ? }

? ? ? ? }

——————————————————————

用less新建文件 保存會(huì)生成css

在less里面運(yùn)算? 中間要又空客分開(kāi)? ? ? ? css顯示? ? ? ? ?

width：50 + 50px；? ? ? ? ? ? ? ? ? ? ? ? ? 100px

? ? ? ? ? ? 100 - 50px竿开；? ? ? ? ? ? ? ? ? ? ? ? ? 50px

? ? ? ? ? ? 100 * 2px? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 200px

? ? ? ? ? （100 / 2px）? ? ? ? ? ? ? ? ? ? ? ? ? 50px

——————————————————————

less定義主題色

@開(kāi)頭名字自己起 用的時(shí)候調(diào)用他就可以

@fontColor: pink;

@fontsize：37.5rem谱仪；? ? ? ? 也可以設(shè)配文字大小

導(dǎo)入文件

@import “文件路徑”玻熙；? ? ? 注意是less文件不是css

less文件第一行寫(xiě)

"out":"../css/"? ? ? ? ? ? ? ? ? ? ? ? 導(dǎo)出less

//out:ture;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 可以上傳

//out:falst;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 禁止導(dǎo)出

//compress:ture? ? ? ? ? ? ? ? ? ? 壓縮上傳

2021.9.18

1 vw = 1/100 的視口寬度

1 vh = 1/100 的視口高度

vw? ? ? ? ? viewport? width

vh? ? ? ? ? viewport? hight? ? ? ? ? 都是單位

————————————————————

2021.9.19

第七天

響應(yīng)式? ? ? ? 【】【】【】【用于響應(yīng)式布局縮小時(shí)候變小的盒子設(shè)置尺寸的】

媒體查詢? ? ? ? 就是給他一個(gè)最下下限和最大上線? 范圍值來(lái)約束? ? ?

/* 視口寬度大于等于768px 小于等于991px否彩， 網(wǎng)頁(yè)背景色是天藍(lán)色 #6cf */

? ? @media (min-width:768px) and (max-width:991px) {

? ? ? body {

? ? ? ? background-color: blue;

? ? ? }

? ? }

css引入

? ? <!-- 視口寬度 >= 992px，引入992.css -->

? ? <link rel="stylesheet" href="./992.css" media="(min-width:992px)">

隱藏

/* 當(dāng)視口的寬度小于768px時(shí)（就表示視口已經(jīng)是移動(dòng)端）嗦随，隱藏left盒子 */? ? ? ?

? ? @media (max-width:768px) {

? ? ? .left {

? ? ? ? display: none;

? ? ? }

? ? }

——————————————————————————

bootstrap? 網(wǎng)頁(yè)copy下來(lái)代碼改

引入bootstrap文件

<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

最小屏幕 <768px? ? ? ? 小屏幕 >=768? ? ? ? 中等屏幕>=992? ? ? ? ? 大屏幕1170

? ? ? ? ? ? ? 3? ? ? ? 12? /? 4

col-sx-占幾分(12/要顯示個(gè)數(shù))? ? col-sm-? ? ? ? col-md-? ? ? ? ? ? ? ? ? ? col-lg-

——————————————————————————————————

object-fit: cover; 完美圖片彈性縮放【】【】

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">? ? 引入網(wǎng)站圖標(biāo)

————————————————————————————————————————

js? 基礎(chǔ)第一天

2021.9.22

五大類(lèi)型

number? ? ? 數(shù)字類(lèi)型

string? ? ? ? ? 字符串

Boolean? ? ? 布爾類(lèi)型? ? ture? false

undefined? undefined 類(lèi)型

nall? ? ? ? ? ? ? 空

object? ? ? ? ? object （對(duì)象）

typeof? ? ? ? ? 用來(lái)判斷類(lèi)型

parseInt? ? ? 轉(zhuǎn)換成整數(shù)

parseFloat? ? 轉(zhuǎn)換成小數(shù)

轉(zhuǎn)換數(shù)字類(lèi)型

Number（屬性名）

alert(Number(ast) + Number(asa))? ? ? 輸出以數(shù)字類(lèi)型輸出

alert(+ast + +asa)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 也可以加+號(hào)來(lái)代替Number

string字符串類(lèi)型

String（屬性名）

alert(String(ast) + (String(asa))

——————————————————————————————

彈出輸入框

let age = prompt("請(qǐng)輸入你的年齡")? ? ? ? ? ? ? ? 用于用戶輸入

變量：

let age = 18

let age = 18, nuame = "pink" 列荔，temp? ? 多個(gè)變量連寫(xiě)，號(hào)分開(kāi)枚尼。就是同時(shí)聲明兩個(gè)變量

最后一個(gè)是空變量 用于容器

遵守小駝峰命名法

比如? ：

userName? ? ? ? 后面的首字母要大寫(xiě)

————————————————————————

數(shù)組：Array

有下標(biāo)沖0開(kāi)始數(shù)

let 數(shù)組名 = [ "123","小明","456","789","小紅" ]? ? 贴浙，號(hào)分開(kāi)

? ? ? ? ? ? ? ? ? ? ? ? 0? ? ? ? 1? ? ? ? 2? ? ? 3? ? ? ? 4

console.write(數(shù)組名[0])? ? ? ? ? ? ? ? 調(diào)用

————————————————————————

字符串類(lèi)型（string）：

用的比較多的就是【模板字符串】

document.write(`里面直接可以放文字 ${變量名}`)? ? ? ? ? ? ? ? ${}里面是加變量名

document.write(`大家好，我叫${name}署恍，今年${age}歲`)? ? ? 要用``包裹

————————————————————————

判斷什么類(lèi)型typeof

console.log（typeof 變量名）

————————————————————————————

類(lèi)型型轉(zhuǎn)換

隱形轉(zhuǎn)換就是

documen.write（"123" + 11）? ? ? ? ? 系統(tǒng)會(huì)自己跟第一個(gè)值的類(lèi)型相加 不建議用

顯式轉(zhuǎn)換

數(shù)字number

Number（數(shù)據(jù)）? 或者? ? +數(shù)據(jù)? ? ? ? ? ? 在值前面加一個(gè)+就變數(shù)字類(lèi)型

parseInt（數(shù)據(jù)）? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 轉(zhuǎn)為整數(shù)

parseFloat（數(shù)據(jù)）? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 轉(zhuǎn)為小數(shù)?

字符串轉(zhuǎn)換

String(數(shù)據(jù))? ? ? 或者? ? 變量.toString(進(jìn)制)

——————————————————————————

js基礎(chǔ)? 第二天

2021.9.23

算數(shù)運(yùn)算符

+?

-

*?

/? ? ? ? ? infinity? ? 無(wú)窮

? %

%? 取余

5%3? =2.5? ? ? 0.5*2 = 1? ? ? 所以取余1

2%5? =0.4? ? ? 如果后面比前面大他的余數(shù)就是前面? ? 就是2

——————————————————————————

賦值運(yùn)算

+=

-=

*=

/=

%=

num1 += 1

num1 = num1 + 1? ? ? ? ? 就是? ? ? ? ? ? ? 變量=變量 + 右邊結(jié)果

mun2=1

num2 += 1-1? ? ? ? ? ? mun2 = mun2+ (1-1)

——————————————————

【】【自操作：是唯一一種會(huì)自動(dòng)改變變量自身數(shù)據(jù)類(lèi)型】

++gae? ? ? gae++? ? 是一樣的結(jié)果的

獨(dú)立就沒(méi)區(qū)別? ? 就是獨(dú)占一行就是沒(méi)區(qū)別

——————————————————————

比較運(yùn)算符

> <

>=? ? <=

！=? ? 不等

==? ? 左右兩邊相等

===? 嚴(yán)格的相等要同以類(lèi)型

！==? 不全等

數(shù)字類(lèi)型就比大小number

字符串比較 是ASCII碼比較

undefined? ? ? ? 沒(méi)復(fù)值

NaN? 不能比較 所得結(jié)果一定是false

——————————————————

邏輯運(yùn)算符

&&? ? 邏輯與? ? ? ? ? 且? ? ? ? ? 一假則假

||? ? ? ? 邏輯或? ? ? ? ? 或者? ? ? ? 一真則真

劲阎！? ? ? 邏輯非? ? ? ? ? 取反? ? ? ? ? ? ? 相反

——————————————————

【】【】【【】【】【】【重點(diǎn)】

邏輯運(yùn)算符的短路

? ? ? ? ? ? ? ? ? ? ? ? ? 短路條件?

&&? ? ? ? ? ? ? ? ? ? 左邊為false就短路? ? ? ? 左邊為假彪标，右面不執(zhí)行

||? ? ? ? ? ? ? ? ? ? ? ? 左邊為true就短路? ? ? ? ? 左邊為真，右面不執(zhí)行

代碼：

左邊為假呼巷，右面不執(zhí)行

3>5 && console.log("內(nèi)容")? ? ? ? ? ? 第一個(gè)就是false后面就不執(zhí)行

左邊為真囱修，右面不執(zhí)行

5>3 || console.log("內(nèi)容")? ? ? ? ? ? ? ? 第一個(gè)是ture后面就不執(zhí)行

拓展：邏輯與&&的結(jié)果未必是布爾結(jié)果（除非兩邊本身都是布爾）

console.log（10 && 20）? ? ? ? ? ? //20

數(shù)字轉(zhuǎn)布爾：只有0是false，其他都是true

——————————————————————————————

if語(yǔ)句

? ? ? let fs = +prompt("請(qǐng)輸入你的成績(jī)")? ? ? ? ? ? ? ? ? ? 多條件分支

? ? ? ? let str = ""

? ? ? ? if (fs >= 90 && fs <= 100) {

? ? ? ? ? ? str = (`獎(jiǎng)勵(lì)法拉利`)

? ? ? ? } else if (fs >= 80 && fs <= 89) {

? ? ? ? ? ? str = (`獎(jiǎng)勵(lì)迪迦`)

? ? ? ? } else if (fs >= 60 && fs <= 79) {

? ? ? ? ? ? str = (`獎(jiǎng)勵(lì)奧迪`)

? ? ? ? } else {

? ? ? ? ? ? str = (`打一頓`)

? ? ? ? }

? ? ? ? document.write(str)

——————————————————————————

2021.9.24

js第三天

三元運(yùn)算

三元: 是一種簡(jiǎn)化操作, 簡(jiǎn)化if雙分支

可以利用三元運(yùn)算, 簡(jiǎn)化操作

語(yǔ)法: 條件 ? 結(jié)果1 : 結(jié)果2?

語(yǔ)法:? 條件表達(dá)式 ? 結(jié)果表達(dá)式1 : 結(jié)果表達(dá)式2? ? ? ? ? ? ? //前面大就輸出第一個(gè)否則第二個(gè)

switch語(yǔ)句? ? 嚴(yán)格的要【】【全等】===

switch (數(shù)據(jù)) {

? ? ? ? ? ? case 值1:

? ? ? ? ? ? ? ? alere（）? ? ? ? ? ? ? ? ? ? ? ? ? 輸出語(yǔ)句

? ? ? ? ? ? ? ? break;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 要有結(jié)束代碼不讓不會(huì)結(jié)束

? ? ? ? case 值2:

? ? ? ? ? ? ? ? alere（）? ? ? ? ? ? ? ? ? ? ? ? ? 輸出語(yǔ)句

? ? ? ? ? ? ? ? break;? ?

? ? ? ? ? ? default:

? ? ? ? ? ? ? ? alere()

? ? ? ? ? ? ? ? break;

? ? ? ? }

_______________________________________________________________

循環(huán)

while（循環(huán)條件）{

}

// 循環(huán)控制: continue和break

// 說(shuō)出: continue和break的區(qū)別

【注意只翻到循環(huán)里面有用】

continue? ? ? ? ? ? ? 下面不是不執(zhí)行? ? 就是跳出循環(huán)? ? 重新開(kāi)始循環(huán)

break? ? ? ? ? ? ? ? ? ? 只循環(huán)一次

數(shù)組遍歷【】【】【重點(diǎn)】

for（let i = 0王悍； i< 數(shù)組名.length破镰；i++）{}

訪問(wèn)數(shù)組必須要有? 數(shù)組名【第幾個(gè)下標(biāo)】

【】【數(shù)組找最大值】

求極值：

求數(shù)組的最大值和最小值

數(shù)組的擂臺(tái)思想? ?

let num = [88, 77, 20, 66, 499]

? ? let max = num[0]

? ? for (let i = 0; i < num.length; i++) {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? i是下標(biāo)? ? num【i】才是上面數(shù)組里的數(shù)

? ? ? if (max < num[i]) {

? ? ? ? ? max = num[i]

? ? ? ? }

? ? } document.write(max)

______________________________________________________________________________________

2021.9.26

第三天

增刪改查? ? CURD? C：create新增? ? R：read/Retrive 查看? ? ? u:update 改? ? D：Delete刪除

增加

arr.push(元素1 元素2 ......? n)? ? ? ? 在當(dāng)前的數(shù)組新增? ? 加到尾端

arr.push(arr1[i])? ? ? ? ? ? ? ? ? ? ? ? ? 數(shù)組新增

arr.unshift(新增的內(nèi)容)? ? ? ? ? ? ? ? ? 加到頭部

刪除

數(shù)組. pop()? 不帶參數(shù)? ? ? ? ? ? ? ? 數(shù)組中刪除最后一個(gè)元素，并返回該元素的值

數(shù)組. shift()? 不帶參數(shù)? ? ? ? ? ? ? ? ? 數(shù)組中刪除第一個(gè)元素压储，并返回該元素的值

? ? ? ? ? ? ? ? ? 起開(kāi)始下標(biāo)鲜漩，幾個(gè)

數(shù)組.splice （1，1）? ? ? ? ? ? ? ? ? ? 選擇刪除? arr.length -1 最好一個(gè)

? ? ? ? arr.length -1集惋，1

函數(shù)

can? ? 能不能?

set? ? ? 設(shè)置某值?

? ? ? ? ? ? ? ? ? ? ? ? 【形參】? 可以多個(gè), 用逗號(hào)分隔? ?

? ? ? ? ? ? ? ? ? ? ? ? 變量

function 名字（num1,num2）{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //這里建議后臺(tái)輸出一下復(fù)了值的實(shí)參

函數(shù)體

return? 數(shù)據(jù)? ? ? ? ? ? ? ? ? ? ? ? // return的格式加空格【注意】翻回的是函數(shù)調(diào)用處

}

? ? ? ? 【實(shí)參】這里調(diào)用形參

名字（10宇整，20）? ? 賦值給上面

? ? ? ? 這里面可以是數(shù)組[12,45,45,45]形參就給一個(gè)數(shù)組明

——————————————————————————————————

【】【調(diào)用reture】

reture調(diào)用? ? ? ? ? ? ? ? ? ?

let 變量 = 函數(shù)(), 將返回值保存到變量中? ? ? ? ? ? ? ? ? 定義一個(gè)變量給他

document.write(變量名)

2021.9.27

js基礎(chǔ)第4天

Infinity? ? ? ? ? ? ? +無(wú)窮大

// 需求: 創(chuàng)建一個(gè)函數(shù), 可以求任意數(shù)組元素中的最小值

? ? ? ? /*

? ? ? ? ? ? 初學(xué)者函數(shù)的制作步驟

? ? ? ? ? ? 1. 不用函數(shù), 所有內(nèi)容寫(xiě)死實(shí)現(xiàn)

? ? ? ? ? ? 2. 將實(shí)現(xiàn)的功能, 用函數(shù)實(shí)現(xiàn): 套一個(gè)函數(shù), 調(diào)用函數(shù)驗(yàn)證功能實(shí)現(xiàn)

? ? ? ? ? ? 3. 用參數(shù)代替寫(xiě)死的數(shù)據(jù): 數(shù)組, 形參和實(shí)參

? ? ? ? ? ? 4. 用返回值代替輸出(不要有任何輸出): 未必一定需要(但是但凡涉及到獲取這種動(dòng)作,一定有返回值)

? ? ? ? */

作用域：? 【】【】【就近原則】

全局作用域(Script, 以前叫Global): 這里定義的變量叫全局變量: 特點(diǎn)是: 哪里都能用(公共的)

到處可用: 到處可改(危險(xiǎn): 因此全局變量使用較少)

局部作用域(Local): 函數(shù)內(nèi)部區(qū)域, 函數(shù)內(nèi)部定義的變量叫局部變量: 特點(diǎn)是: 只能當(dāng)前函數(shù)內(nèi)部使用

形參: 屬于局部變量, 只能在函數(shù)內(nèi)部使用

? 塊級(jí)作用域(Block): {}以內(nèi)

——————————————————————————————

匿名函數(shù)? ? ? 隱藏名字的意思

? ? ? ? 匿名函數(shù): 函數(shù)表達(dá)式

let fn = function (){

}

? ? ? ? 函數(shù)沒(méi)有名字, 將函數(shù)的聲明賦值給變量保存

? ? ? ? 不要給匿名函數(shù)加名字: 沒(méi)有存在的意義(外部不能通過(guò)函數(shù)名調(diào)用)

立即執(zhí)行函數(shù)? ? ? 解決污染問(wèn)題? ? ? 【沙箱】

? ? ? ? 語(yǔ)法：

? ? ? ? (function(){})()

? ? ? ? (function(){}) 表示定義一個(gè)函數(shù)(匿名)

? ? ? ? () 表示調(diào)用前面的函數(shù)

對(duì)象（object）? 數(shù)據(jù)類(lèi)型：能很好的描述數(shù)據(jù)? 【】【重點(diǎn)】

格式

對(duì)象: 成員叫屬性和方法

? ? ? ? 屬性:? 屬性名 : 屬性值? ? ? ? ? ? ? // 本質(zhì) 變量 = 值

? ? ? ? 方法:? 方法名 : 匿名函數(shù)? ? ? ? ? ? // 本質(zhì) 變量 = 函數(shù)

? ? ? ? 允許多個(gè)屬性和方法存在, 用逗號(hào)分隔

let goods = {

? ? ? ? ? ? // 屬性：不定數(shù)量，不限定數(shù)據(jù)類(lèi)型

? ? ? ? ? ? name: "小米手機(jī)",

? ? ? ? ? ? num: "商品編號(hào)100012816024",? ? ? ? ? ? ? 后面的記住要加芋膘，好

? ? ? ? ? ? weight: "0.55kg",

? ? ? ? ? ? address: "中國(guó)大陸"

? ? ? ? ? ? //方法

? ? ? ? ? ? hide: function () {

? ? ? ? ? ? ? ? console.log("在大陸買(mǎi)手機(jī)");

? ? ? ? ? ? }

? ? ? ? }

推薦語(yǔ)法: .語(yǔ)法, 對(duì)象專屬語(yǔ)法? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? . 輸出對(duì)象

擴(kuò)展語(yǔ)法: []語(yǔ)法, 與數(shù)組一樣? 數(shù)組[數(shù)字下標(biāo)]? 對(duì)象['名字']

改對(duì)象里面的參數(shù)

let goos = {

? ? ? ? ? ? name: "男"

? ? ? ? }

? ? ? ? console.log(goos);

? ? ? ? // 1. 新增: 對(duì)象.新屬性名 = 值? || 對(duì)象['新屬性名'] = 值

? ? ? ? goos.age = "18"

? ? ? ? console.log(goos);

? ? ? ? // 2. 修改: 對(duì)象.屬性名 = 值? || 對(duì)象['屬性名'] = 值

? ? ? ? goos.age = "女"

? ? ? ? console.log(goos);

? ? ? ? // 3. 刪除: delete 對(duì)象.屬性名? || delete 對(duì)象['屬性名']

? ? ? ? delete goos.price

? ? ? ? console.log(goos);

? ? ? ? // delete是對(duì)象的專屬 語(yǔ)法

【數(shù)組的遍歷】? ? for（let k 對(duì)象名）{}? ? ? 【數(shù)組也可以這樣遍歷】

對(duì)象很少遍歷: 對(duì)象本身就是一種方便訪問(wèn)的語(yǔ)法

? 未來(lái)項(xiàng)目級(jí)開(kāi)發(fā), 配置文件大多數(shù)是對(duì)象: 肯定要用到遍歷

? ? ? ? let hero = { name: "小明", age: 18, gebder: "女", skill: "燒光" }

? ? ? ? for (let k in hero) {

? ? ? ? ? ? console.log(k)

? ? ? ? ? ? document.write(hero[k])? ? ? ? ? ? ? 【注意】調(diào)用要對(duì)象名[k]

? ? ? ? }

? ? ? ? // for(let 變量名 in 對(duì)象){ 變量名拿到的是屬性名, 對(duì)象[變量名] 訪問(wèn)值}

時(shí)分秒轉(zhuǎn)換??轉(zhuǎn)換成時(shí)分秒? ? ? ? ? ? ? 數(shù)學(xué)邏輯

?function?fn(miao)?{

????????????//?轉(zhuǎn)換成時(shí)分秒

????????????//?轉(zhuǎn)時(shí):?parseInt(秒數(shù)?/?3600)

????????????let?zs?=?parseInt(miao?/?3600)

????????????//?轉(zhuǎn)分:?parseInt(秒數(shù)?/?60)?%?60

????????????let?zf?=?parseInt((miao?/?60)?%?60)

????????????//?轉(zhuǎn)秒:?秒數(shù)?%?60

????????????let?zm?=?miao?%?60

????????????//?補(bǔ)0

????????????zs?=?zs?<?10???"0"?+?zs?:?zs

????????????zf?=?zf?<?10???"0"?+?zf?:?zf

????????????zm?=?zm?<?10???"0"?+?zm?:?zm

????????????document.write(`你輸入的${miao};轉(zhuǎn)成${zs}小時(shí)?轉(zhuǎn)成${zf}分?轉(zhuǎn)成${zm}秒`)

????????}