柚子快報(bào)邀請(qǐng)碼778899分享：

Unit808樂購家綜合2025-05-05480

http://yzkb.51969.com/

：定義表格單元：定義表格標(biāo)題

他們之間有嵌套關(guān)系，要符合嵌套規(guī)范

陳彥亨seventh

天氣預(yù)報(bào) 日期天氣情況出行情況 2021年8月7日天氣晴適合出行 2021年8月8日有小雨出門注意帶傘

運(yùn)行結(jié)果：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-O09nbrQO-1631875526431)(C:\Users\Ken-Chy\AppData\Roaming\Typora\typora-user-images\image-20210807140158069.png)]

語義化標(biāo)簽：,,（無實(shí)際作用，只是為了更規(guī)范）

在一個(gè)table中tbody是可以出現(xiàn)多次的，但是thead和tfoot只能出現(xiàn)一次

表格屬性

border：表格邊框 cellpadding：單元格內(nèi)的空間（用空白填充，上對(duì)齊時(shí)會(huì)被填充擋?。? cellspacing：單元格之間的空間（用空白填充） rowspan：合并行 colspan：合并列 align：左右對(duì)齊方式（left，center，right） valign：上下對(duì)齊方式（top，middle，bottom）

陳彥亨seventh

天氣預(yù)報(bào) 日期天氣情況出行情況 2021年8月7日白天天氣晴適合出行黑夜天氣晴適合出行 2021年8月8日白天有小雨出門注意帶傘黑夜有小雨出門注意帶傘

實(shí)現(xiàn)效果：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-EqnTYhHM-1631875526432)(C:\Users\Ken-Chy\AppData\Roaming\Typora\typora-user-images\image-20210807142718357.png)]

15、表單

表單標(biāo)簽input

:表單的最外層容器

:標(biāo)簽用于搜索用戶信息，根據(jù)不同的type屬性值，展示不同的空間，如輸入框，密碼框，復(fù)選框等。

type屬性

text：普通的文本輸入框 password：密碼輸入框 checkbox：復(fù)選框 radio：單選框 file：上傳文件 submit：提交按鈕 reset：重置按鈕

輸入框：

密碼框：

復(fù)選框

蘋果

香蕉

梨子

單選框

男

女

上傳文件

提交按鈕

重置按鈕

表單相關(guān)標(biāo)簽

多行文本框：textarear

下拉菜單：select>option

輔助表單：label

多行文本框

下拉菜單請(qǐng)選擇深圳廣州汕頭

深圳廣州汕頭

男

女

表格表單結(jié)合

? 表單沒有嵌套規(guī)范，表格有，所以應(yīng)該先寫表單

總體信息

用戶注冊(cè) 用戶名：密碼：

16、div和span

div（塊）：全稱為division，”分割、分區(qū)“的意思，div標(biāo)簽用來劃分一個(gè)區(qū)域，相當(dāng)于一塊區(qū)域容器，可以容納段落、標(biāo)題、表格、圖像等各種網(wǎng)頁元素。即HTML中大多數(shù)標(biāo)簽都可以嵌套在div標(biāo)簽中，div標(biāo)簽中還可以嵌套多層div標(biāo)簽，用來將網(wǎng)頁分割成獨(dú)立的、不同的部分，來實(shí)現(xiàn)網(wǎng)頁的規(guī)劃和布局。

span（內(nèi)斂）：用來修飾文字的，div和span都是沒有任何默認(rèn)樣式的，需要配合css使用。

CSS

=================================================================

1、CSS基礎(chǔ)語法

格式：選擇器{屬性1：值1，屬性2：值2；屬性3：值3}

單位：px–>像素（pixel）、%–>百分比（相對(duì)于父容器）

基本樣式：width、height、background-color

CSS注釋：/* */

2、CSS樣式

內(nèi)聯(lián)（行內(nèi)、行間）樣式

在html標(biāo)簽上添加style屬性來實(shí)現(xiàn)的

這是一個(gè)塊

內(nèi)部樣式

在style標(biāo)簽里添加的樣式（優(yōu)點(diǎn)是可以復(fù)用代碼）

這是一個(gè)塊

這是一個(gè)內(nèi)聯(lián)

外部樣式

引入一個(gè)單獨(dú)的CSS文件，name.css

通過link標(biāo)簽引入外部資源，rel屬性指定資源跟頁面的關(guān)系，href屬性比指定資源的地址

通過@import方式引入（此方式問題較多，不建議使用）

3、CSS中的顏色表示法

單詞表示法十六進(jìn)制表示法 RGB三原色表示法

4、CSS背景樣式

background-color：背景顏色 background-image：背景圖

? url：背景地址

? 默認(rèn)水平垂直都鋪滿背景圖

background-repear：平鋪方式

? repeat-x：x軸進(jìn)行平鋪

? repeat-y：y軸進(jìn)行平鋪

? repeat：x，y都進(jìn)行平鋪（默認(rèn)值）

? no-repeat：不進(jìn)行平鋪

background-position：背景位置

? x，y：數(shù)字（百分比）|單詞

（background-position：100px 100px|center top）

background-attachment：背景圖隨滾動(dòng)條的移動(dòng)方式

? scroll：背景位置是按照當(dāng)前元素進(jìn)行偏移的（默認(rèn)值），即滾動(dòng)滾動(dòng)條時(shí)圖片不動(dòng)

? fixed：背景位置是按照瀏覽器進(jìn)行偏移的，即跟著滾動(dòng)條滾動(dòng)

顯示效果

拖動(dòng)前：

拖動(dòng)后：

將background-attachment屬性改為scroll后

拖動(dòng)前：

拖動(dòng)后：

若將背景圖片位置設(shè)置為center center，則當(dāng)為fixed時(shí)看不到背景圖片（因?yàn)楸尘皥D片位于相對(duì)整個(gè)頁面的center，已經(jīng)超出容器大小，無法顯示）

5、邊框樣式

border-style：邊框樣式

? solid：實(shí)線

? dashed：虛線

? dotted：點(diǎn)線

border-width：邊框大小 boerder-color：邊框顏色

中間可加入方向，只針對(duì)某一條邊來設(shè)置樣式（top、bottom、left、right)

6、文字樣式

font-family：字體類型

? 一次可以設(shè)置多個(gè)字體，當(dāng)前面的字體電腦中不存在時(shí)則選擇后續(xù)方案，都不存在時(shí)自動(dòng)選擇電腦默認(rèn)字體 ? 當(dāng)字體類型名中出現(xiàn)空格時(shí)需要使用引號(hào)括起來

襯線體端點(diǎn)有棱角

font-size：字體大小

默認(rèn)大小為16px

數(shù)值法：字體大小一般設(shè)為偶數(shù)（方便文字對(duì)齊）

單詞法：

? xx-small：最小 ? x-small：較小 ? small：小 ? medium：正常（默認(rèn)值） ? large：大 ? x-large：較大 ? xx-large：最大

font-weigt：字體粗細(xì)

單詞法：

? 正常：normal ? 加粗：bold

數(shù)值法：

? 100-900（100-500為正常，600-900為加粗）

font-style：字體樣式

? 正常：normal

? 斜體：italic（oblique也表示斜體，但是使用較少）

區(qū)別：italic帶有傾斜屬性的字體才可以設(shè)置傾斜操作

? oblique沒有傾斜屬性的字體也可以設(shè)置傾斜操作

color：顏色

7、文本

text-decoration：文本裝飾

? 下劃線：underline ? 刪除線：line-through ? 上劃線：overline ? 不添加任何裝飾：none

可以添加多個(gè)文本修飾，之間用空格隔開

text-transform：文本大小寫

小寫：lowercase 大寫：uppercase 只針對(duì)首字母大寫：capitalize

（針對(duì)英文）

text-indent：文本縮進(jìn)

首行縮進(jìn)

em單位：相對(duì)單位，1em永遠(yuǎn)都是跟字體的大小相同

text-align：文本對(duì)齊方式

默認(rèn)左對(duì)齊

對(duì)齊方式：left，right，center，justify（兩端點(diǎn)對(duì)齊）

line-height：段落行高

段落行高由上邊距，字體大小，下邊距三者組成

默認(rèn)行高不是固定值，是隨當(dāng)前字體的大小不斷變化的

取值：number（px）| scale（比例值，跟文字大小成比例）

改變行高取值其實(shí)是改變上邊距大小

letter-spacing：字之間的間距

word-spacing：詞之間的間距

（只針對(duì)于英文）

折行問題

在容器中輸入中文或英文時(shí)默認(rèn)會(huì)自動(dòng)折行，但是當(dāng)輸入的英文中出現(xiàn)很長的單詞或遇到阿拉伯?dāng)?shù)字時(shí)不會(huì)自動(dòng)折行。

word-break：break-all（非常強(qiáng)烈的折行，將單詞緊挨在一起） word-wrap：break-word（不是那么強(qiáng)烈的折行，會(huì)產(chǎn)生空白區(qū)域）

8、CSS復(fù)合樣式

一個(gè)CSS屬性只控制一種樣式，叫做單一樣式

一個(gè)CSS屬性控制多種樣式，叫做復(fù)合樣式

復(fù)合樣式：background，border，font

復(fù)合的寫法：通過空格的方式實(shí)現(xiàn)

border-right : 2px black solid;

background : red url() repeat 0 0;

復(fù)合寫法有的不需要關(guān)心順序，有的需要。（background，border不需要）

font最少要有兩個(gè)值size family，且size要在family前面，其他屬性寫在這二者前面

9、CSS選擇器

ID選擇器

css：#elem{} html：id=“elem”

命名規(guī)范：

id是唯一值，在一個(gè)頁面中只能出現(xiàn)一次，不能有相同的id 命名的第一位不能是數(shù)字駝峰式(小駝峰：searchButton，大駝峰：SearchButton)、下劃線式、短線式

clss選擇器

css：.elem{} html：class=“elem”

注：

class選擇器是可以復(fù)用的（不同的容器可以有相同的class）可以添加多個(gè)class樣式（

）多個(gè)class樣式的時(shí)候，樣式的優(yōu)先級(jí)根據(jù)CSS中的順序決定，而不是class屬性中的順序標(biāo)簽+類的寫法（div.elem、p.elem使得該類只對(duì)于該容器生效）

標(biāo)簽選擇器（TAG選擇器）

div{}

適用的場(chǎng)景：

去掉某些標(biāo)簽的默認(rèn)樣式時(shí) 復(fù)雜的選擇器中，如層次選擇器

群組選擇器（分組選擇器）

可以通過逗號(hào)的方式，給多個(gè)不同的選擇器添加統(tǒng)一的CSS樣式，來達(dá)到代碼的復(fù)用

通配選擇器

*{} == div,ul,li,p,h1,h2…{}

盡量避免使用通配選擇器，因?yàn)闀?huì)給所有的標(biāo)簽添加樣式，慎用！

使用的場(chǎng)景：

去掉所有標(biāo)簽的默認(rèn)樣式時(shí)

層次選擇器

后代：M N{} M后層的所有N標(biāo)簽父子：M>N{} M的下一層N標(biāo)簽兄弟：M~N{} 當(dāng)前M下面的所有兄弟（同級(jí)別）N標(biāo)簽相鄰：M+N{} 當(dāng)前M相鄰的N標(biāo)簽

屬性選擇器

M[attr]{}

=：完全匹配 *=：部分匹配 ^=：起始匹配 $=：結(jié)束匹配 [][]：組合匹配

aaaaa

bbbbb

cccccc

BBBBB

bbbbb

偽類選擇器

CSS偽類用于向某些元素添加特殊的效果。一般用于初始樣式添加不上時(shí)，用偽類來添加。

M：偽類{}

：link——訪問前的樣式（只能添加給a標(biāo)簽）：visited——訪問后的樣式（只能添加給a標(biāo)簽）：hover——鼠標(biāo)移入時(shí)的標(biāo)簽（可以添加給所有的標(biāo)簽）：active——鼠標(biāo)按下時(shí)的標(biāo)簽（可以添加給所有的標(biāo)簽）

注：如果四個(gè)偽類都生效，一定要注意順序?yàn)椋篖VHA

一般網(wǎng)站只這樣去設(shè)置：a{}和a:hover{}（移入前后）

：after——通過偽類的方式給元素后面添加一個(gè)文本內(nèi)容：before——通過偽類的方式給元素前面添加一個(gè)文本內(nèi)容

div：after{content:"world";color:red}

hello

-->hello world(hello為黑色，world為紅色)

——可以用于實(shí)現(xiàn)浮動(dòng)清除，設(shè)置列表前面的圖標(biāo)等功能

：checked，：disabled，：focus都是針對(duì)表單元素的

check之前：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-ZonDR2Pg-1631875526433)(C:\Users\Ken-Chy\AppData\Roaming\Typora\typora-user-images\image-20210812002228944.png)]

點(diǎn)擊（check）之后：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-cL8LMmbQ-1631875526433)(C:\Users\Ken-Chy\AppData\Roaming\Typora\typora-user-images\image-20210812002239848.png)]

光標(biāo)點(diǎn)擊前

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-6PrFVC0Q-1631875526434)(C:\Users\Ken-Chy\AppData\Roaming\Typora\typora-user-images\image-20210812002545924.png)]

光標(biāo)點(diǎn)擊后

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-9I7PjtZ0-1631875526434)(C:\Users\Ken-Chy\AppData\Roaming\Typora\typora-user-images\image-20210812002644542.png)]

結(jié)構(gòu)性偽類選擇器

：nth-of-type(num) ：nth-child(num)

——num從1開始，表示第num項(xiàng)

——當(dāng)num寫n時(shí)表示所有項(xiàng)，2n表示偶數(shù)項(xiàng)，2n+1表示基數(shù)項(xiàng)

：first-of-type ：last-of-type ：only-of-type——只有一個(gè)時(shí)起作用

child和type的區(qū)別：

div：nth-of-type（2）表示第二個(gè)div

div：nth-of-child（2）表示第二個(gè)容器，如果第二個(gè)容器是div則起作用，不是則不起作用

10、CSS樣式繼承

文字相關(guān)的樣式可以繼承

布局相關(guān)的樣式不能繼承（如border，height等）

但是可以使用border：inherit來手動(dòng)繼承父樣式

11、CSS優(yōu)先級(jí)

相同樣式優(yōu)先級(jí)

當(dāng)設(shè)置相同樣式時(shí)，后面的優(yōu)先級(jí)較高，但不建議出現(xiàn)重復(fù)設(shè)置樣式的情況

內(nèi)部樣式和外部樣式

內(nèi)部樣式和外部樣式優(yōu)先級(jí)相同，如果都設(shè)置了相同樣式，那么后寫入的引入方式優(yōu)先級(jí)高

單一樣式優(yōu)先級(jí)

style行間>id>class>tag>*>繼承

權(quán)重1000、100、10、1（代表的是等級(jí)，即使100個(gè)1也小于10）

！important

提升樣式優(yōu)先級(jí)，非規(guī)范方式，不建議使用

#elem{color：red !important}

不能針對(duì)繼承的屬性進(jìn)行優(yōu)先級(jí)的提升

標(biāo)簽+類與單類

標(biāo)簽+類的優(yōu)先級(jí)大于單類

群組優(yōu)先級(jí)

群組選擇器與單一選擇器優(yōu)先級(jí)相同，靠后寫的優(yōu)先級(jí)高

層次優(yōu)先級(jí)

權(quán)重比較

ul li .box p input{} 1+1+10+1+1

.hello span #elem 10+1+100

約分比較

ul li .box p input{} -->li p input{}

.hello span #elem -->#elem{}

盡量寫三層以內(nèi)的層次

12、CSS盒子模型

組成

content–>padding–>border–>margin

物品填充物包裝盒盒子間的間距

content：內(nèi)容區(qū)域 width和height組成的

padding：內(nèi)邊距（內(nèi)填充）

只寫一個(gè)值：上下左右寫兩個(gè)值：上下、左右寫四個(gè)值：上、右、下、左

單一樣式只能寫一個(gè)值：padding-left/right/top/bottom

margin：外填充（兩個(gè)盒子之間的間距）

背景顏色會(huì)填充到margin以內(nèi)的區(qū)域（content，padding，border），不包括margin

文字會(huì)在content區(qū)域

padding不能為負(fù)值，而margin可以為負(fù)數(shù)（兩個(gè)盒子相交）

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-hgHLBeUb-1631875526435)(C:\Users\Ken-Chy\AppData\Roaming\Typora\typora-user-images\image-20210812155037143.png)]

box-sizing

box-sizing為盒子的尺寸，可以改變盒子模型的展示形態(tài)

默認(rèn)值：content-box：width、height作用于content

border-box：width、height作用于content，padding和border

使用場(chǎng)景：

不用再去計(jì)算一些值（例如給定可以分配的范圍，如果使用content-box需要計(jì)算多少的width加上padding后不會(huì)超過）解決一些百分比的問題（如果設(shè)置一個(gè)占百分之百的盒子，后又加上邊框和填充則會(huì)超過范圍，出現(xiàn)滾動(dòng)條，若設(shè)置為border-box則剛好

盒子模型的一些問題

margin疊加問題

上下margin同時(shí)存在的時(shí)候，會(huì)取上下值中較大的作為邊距（左右則不會(huì)有該問題）

解決方案：

BFC規(guī)范想辦法只給一個(gè)元素添加間距

margin傳遞問題

margin傳遞的問題只會(huì)出現(xiàn)在嵌套的結(jié)構(gòu)中，且只有margin-top會(huì)有傳遞的問題，其他三個(gè)方向是沒有傳遞問題的

解決方案：

BFC規(guī)范給父容器加邊框 margin換成padding

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-BcbNv6Mp-1631875526435)(C:\Users\Ken-Chy\AppData\Roaming\Typora\typora-user-images\image-20210812171109142.png)]

將margin-top: 100px;改為margin-left: 100px

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-JEmQ9Fsx-1631875526436)(C:\Users\Ken-Chy\AppData\Roaming\Typora\typora-user-images\image-20210812171323764.png)]

拓展

margin的居中

（margin可以左右自適應(yīng)，不能上下自適應(yīng)）

margin-left：auto——左邊全都是空白，盒子右靠齊

margin-right：auto——右邊全都是空白，盒子左靠齊

margin：0 auto——居中

width和height不設(shè)置的時(shí)候?qū)凶幽Ｐ偷挠绊?/p>

如果寬度設(shè)置為百分之百，添加邊框后會(huì)超過父級(jí)盒子的大小

如果不設(shè)置，則寬度永遠(yuǎn)保持與父級(jí)一致

設(shè)置為100%，padding-left：50px：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-R1zFI2PG-1631875526436)(C:\Users\Ken-Chy\AppData\Roaming\Typora\typora-user-images\image-20210812181427261.png)]

不設(shè)置寬度，padding-left：50px：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-k44R3hNW-1631875526437)(C:\Users\Ken-Chy\AppData\Roaming\Typora\typora-user-images\image-20210812181446637.png)]

13、標(biāo)簽分類

按類型

block（塊）：div、p、ul、li、h1…

? 1、獨(dú)占一行

? 2、支持所有樣式

? 3、不寫寬的時(shí)候跟父容器的寬相同

? 4、所占區(qū)域是一個(gè)矩形

inline（內(nèi)聯(lián)）：span、a、em、strong、img（因?yàn)閕mg也是替換元素所以可以設(shè)置寬高）,

? 1、挨在一起的

? 2、有些樣式不支持，比如width，height、margin（左右支持，上下不支持）、padding（左右支持、上下不支持）

? 3、不寫寬時(shí)，寬度由內(nèi)容決定

? 4、所占的區(qū)域不一定時(shí)矩形

? 5、內(nèi)斂標(biāo)簽之間會(huì)有空隙，原因是換行產(chǎn)生的（可以通過在body把font-size全換成0然后在需要輸入文本的地方重新設(shè)置字體大小，這樣間隙中的空格大小則為0）

inline-block：input、select…

? 1、挨在一起，但是支持寬高

? 2、所占區(qū)域是一個(gè)矩形

? 3、標(biāo)簽之間會(huì)有空隙

布局一般用塊標(biāo)簽，修飾文本一般用內(nèi)聯(lián)標(biāo)簽

按內(nèi)容

Flow：流內(nèi)容 Metadata：元數(shù)據(jù) Sectioninng：分區(qū) Heading：標(biāo)題 Phrasing：措辭 Embedded：嵌入的 Interactive：互動(dòng)的

按顯示

替換元素：瀏覽器根據(jù)元素的標(biāo)簽和屬性，來決定元素的具體顯示內(nèi)容（沒有屬性的話本身沒有顯示內(nèi)容）

img、iput

非替換元素：將內(nèi)容直接告訴瀏覽器，將其顯示出來

div、h1、p

14、顯示框類型

display

block inline block-inline none：不進(jìn)行顯示

可以將原本屬于block的div標(biāo)簽更改為inline,

注：display：none——不占空間的隱藏

? visibility：hidden——占空間的隱藏

15、標(biāo)簽嵌套規(guī)范

塊標(biāo)簽可以嵌套內(nèi)聯(lián)標(biāo)簽

塊標(biāo)簽不一定能嵌套塊標(biāo)簽（比如p不能嵌套div）

內(nèi)聯(lián)標(biāo)簽不呢個(gè)嵌套塊標(biāo)簽（a標(biāo)簽除外，a可以嵌套塊）

ul、li dl、dt、dd table、tr、td

16、overflow溢出隱藏

overflow

visible：默認(rèn)顯示 hidden：裁剪隱藏 scroll：下方和右方都出現(xiàn)滾動(dòng)條，不管是否溢出 auto：只有溢出方向出現(xiàn)滾動(dòng)條。 x軸、y軸：overflow-x、overflow-y可對(duì)下方和右方分別設(shè)置

默認(rèn)：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-PF0PFrdD-1631875526437)(C:\Users\Ken-Chy\AppData\Roaming\Typora\typora-user-images\image-20210813150703736.png)]

hidden：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-g2UE2r1J-1631875526438)(C:\Users\Ken-Chy\AppData\Roaming\Typora\typora-user-images\image-20210813150755763.png)]

17、透明度與手勢(shì)

opacity：0（透明）-1（不透明）0.5為半透明

占空間，且所有的子內(nèi)容也會(huì)透明！

rgba：前三個(gè)值設(shè)置背景顏色，最后一個(gè)值設(shè)置透明度（0-1）

可以讓指定的樣式透明，而不影響其他樣式（其中的文字不會(huì)被透明）

cursor：手勢(shì)

? auto：自動(dòng)變化（默認(rèn)的手勢(shì)）

? default：普通箭頭

要實(shí)現(xiàn)自定義手勢(shì)：

準(zhǔn)備圖片：.cur、ico cursor:url(./img/cursor/ico),auto

18、最大、最小寬高

min-width：寬度大于等于…（內(nèi)容大于值時(shí)則自動(dòng)增大寬） max-width：寬度小于等于…（內(nèi)容小于值時(shí)則自動(dòng)減小寬） min-height：高度大于等于… max-height：高度小于等于…

%單位：換算–>以父容器的大小進(jìn)行換算，跟祖先無關(guān)

一個(gè)容器怎么適應(yīng)屏幕的高：

html，body{height：100%}

.container{height:100%}

19、CSS默認(rèn)樣式

有些標(biāo)簽有默認(rèn)樣式，有些標(biāo)簽沒有默認(rèn)樣式

沒有默認(rèn)樣式：div、span…

有默認(rèn)樣式：body、h1…h(huán)6、p、ul…

body–> margin：8px h1–> margin（上下）：21.44px，font-weight：bold p–> margin（上下）：16px ul–> margin（上下）：16px padding（左）：40px ? list-style：disc a–> text-decoration：underline

20、CSS reset

自我介紹一下，小編13年上海交大畢業(yè)，曾經(jīng)在小公司待過，也去過華為、OPPO等大廠，18年進(jìn)入阿里一直到現(xiàn)在。

深知大多數(shù)Java工程師，想要提升技能，往往是自己摸索成長或者是報(bào)班學(xué)習(xí)，但對(duì)于培訓(xùn)機(jī)構(gòu)動(dòng)則幾千的學(xué)費(fèi)，著實(shí)壓力不小。自己不成體系的自學(xué)效果低效又漫長，而且極易碰到天花板技術(shù)停滯不前！

因此收集整理了一份《2024年Java開發(fā)全套學(xué)習(xí)資料》，初衷也很簡單，就是希望能夠幫助到想自學(xué)提升又不知道該從何學(xué)起的朋友，同時(shí)減輕大家的負(fù)擔(dān)。

既有適合小白學(xué)習(xí)的零基礎(chǔ)資料，也有適合3年以上經(jīng)驗(yàn)的小伙伴深入學(xué)習(xí)提升的進(jìn)階課程，基本涵蓋了95%以上Java開發(fā)知識(shí)點(diǎn)，真正體系化！

由于文件比較大，這里只是將部分目錄截圖出來，每個(gè)節(jié)點(diǎn)里面都包含大廠面經(jīng)、學(xué)習(xí)筆記、源碼講義、實(shí)戰(zhàn)項(xiàng)目、講解視頻，并且會(huì)持續(xù)更新！

如果你覺得這些內(nèi)容對(duì)你有幫助，可以掃碼獲?。。。▊渥ava獲?。?/p>

線程、數(shù)據(jù)庫、算法、JVM、分布式、微服務(wù)、框架、Spring相關(guān)知識(shí)

一線互聯(lián)網(wǎng)P7面試集錦+各種大廠面試集錦

學(xué)習(xí)筆記以及面試真題解析

《一線大廠Java面試題解析+核心總結(jié)學(xué)習(xí)筆記+最新講解視頻+實(shí)戰(zhàn)項(xiàng)目源碼》，點(diǎn)擊傳送門即可獲??！

17、透明度與手勢(shì)

opacity：0（透明）-1（不透明）0.5為半透明

占空間，且所有的子內(nèi)容也會(huì)透明！

rgba：前三個(gè)值設(shè)置背景顏色，最后一個(gè)值設(shè)置透明度（0-1）

可以讓指定的樣式透明，而不影響其他樣式（其中的文字不會(huì)被透明）

cursor：手勢(shì)

? auto：自動(dòng)變化（默認(rèn)的手勢(shì)）

? default：普通箭頭

要實(shí)現(xiàn)自定義手勢(shì)：

準(zhǔn)備圖片：.cur、ico cursor:url(./img/cursor/ico),auto

18、最大、最小寬高

%單位：換算–>以父容器的大小進(jìn)行換算，跟祖先無關(guān)

一個(gè)容器怎么適應(yīng)屏幕的高：

html，body{height：100%}

.container{height:100%}

19、CSS默認(rèn)樣式

有些標(biāo)簽有默認(rèn)樣式，有些標(biāo)簽沒有默認(rèn)樣式

沒有默認(rèn)樣式：div、span…

有默認(rèn)樣式：body、h1…h(huán)6、p、ul…

20、CSS reset

自我介紹一下，小編13年上海交大畢業(yè)，曾經(jīng)在小公司待過，也去過華為、OPPO等大廠，18年進(jìn)入阿里一直到現(xiàn)在。

因此收集整理了一份《2024年Java開發(fā)全套學(xué)習(xí)資料》，初衷也很簡單，就是希望能夠幫助到想自學(xué)提升又不知道該從何學(xué)起的朋友，同時(shí)減輕大家的負(fù)擔(dān)。[外鏈圖片轉(zhuǎn)存中…(img-or8WnguF-1711972196485)]

[外鏈圖片轉(zhuǎn)存中…(img-ZqPs9OLW-1711972196486)]

[外鏈圖片轉(zhuǎn)存中…(img-mK7qRoYV-1711972196486)]

如果你覺得這些內(nèi)容對(duì)你有幫助，可以掃碼獲取?。。▊渥ava獲取）

線程、數(shù)據(jù)庫、算法、JVM、分布式、微服務(wù)、框架、Spring相關(guān)知識(shí)

[外鏈圖片轉(zhuǎn)存中…(img-KJjjOKX7-1711972196487)]

一線互聯(lián)網(wǎng)P7面試集錦+各種大廠面試集錦

[外鏈圖片轉(zhuǎn)存中…(img-R2csJbCI-1711972196487)]

學(xué)習(xí)筆記以及面試真題解析

[外鏈圖片轉(zhuǎn)存中…(img-gRM61GSB-1711972196487)]

《一線大廠Java面試題解析+核心總結(jié)學(xué)習(xí)筆記+最新講解視頻+實(shí)戰(zhàn)項(xiàng)目源碼》，點(diǎn)擊傳送門即可獲?。?/p>

柚子快報(bào)邀請(qǐng)碼778899分享：

http://yzkb.51969.com/