一鞠鲜、網(wǎng)頁認(rèn)識

1、網(wǎng)頁組成

文字断国、圖片镊尺、超鏈接、音頻并思、視頻；

2语稠、網(wǎng)頁背后本質(zhì)

前端程序員寫的一行行的代碼宋彼；

3、代碼通過什么轉(zhuǎn)化為網(wǎng)頁

瀏覽器（通過渲染引擎）轉(zhuǎn)換（解析和渲染）

二仙畦、瀏覽器內(nèi)核

1输涕、常用瀏覽器

IE 、火狐 慨畸、谷歌 莱坎、SAFARI瀏覽器 、Opera（歐朋）瀏覽器

2寸士、瀏覽器內(nèi)核

IE : Trident? 獵豹 360急速 百度檐什；

FireFox :? Gecko；

Safari : Webkit弱卡；

Chrome/Opera : Blink webkit分支乃正；

三、Web標(biāo)準(zhǔn)

1婶博、構(gòu)成：

結(jié)構(gòu)-HTML語言-頁面元素表現(xiàn)-CSS語言-頁面樣式行為-javaScript-頁面交互

四瓮具、HTML基礎(chǔ)認(rèn)識

1、HTML中文譯名

超文本標(biāo)記語言（Hyper Text Markup Language）

2、骨架結(jié)構(gòu)組成

html名党、head叹阔、title、body

3传睹、注釋

快捷鍵：ctrl+/

4耳幢、標(biāo)簽構(gòu)成

雙標(biāo)簽：開始標(biāo)簽、包裹內(nèi)容蒋歌、結(jié)束標(biāo)簽

單標(biāo)簽：開始標(biāo)簽帅掘，自成一體，無法包裹內(nèi)容堂油。

eg：< br>< hr>

5修档、標(biāo)簽屬性

寫在開始 標(biāo)簽 屬性名=”屬性值“ 如：class="one“

注意點(diǎn)：

1.標(biāo)簽的屬性寫在開始標(biāo)簽內(nèi)部

2.標(biāo)簽上可以同時存在多個屬性

3.屬性之間以空格隔開

4.標(biāo)簽名與屬性之間必須以空格隔開

5.屬性之間沒有順序之分

6、標(biāo)簽與標(biāo)簽之間關(guān)系

父子關(guān)系（嵌套關(guān)系）府框、兄弟關(guān)系（并列關(guān)系）

五吱窝、HTML標(biāo)簽學(xué)習(xí)

1、排版標(biāo)簽

1.1標(biāo)題標(biāo)簽

代碼:h系列標(biāo)簽

語義：1~6級標(biāo)題迫靖，重要程度依次遞減

特點(diǎn)：

文字都有加粗院峡；

字體都有變大，并且從h1 →h6文字逐漸減少;

獨(dú)占一行;

1.2段落標(biāo)簽

代碼: < p>< /p>

語義：段落

特點(diǎn)：

段落之間存在間隙系宜；

獨(dú)占一行照激；

1.3換行標(biāo)簽

代碼:< br>

語義：換行；

特點(diǎn)：

單標(biāo)簽盹牧；

讓文字強(qiáng)制換行俩垃；

1.4水平線標(biāo)簽

代碼:< hr>

語義:主題的分割切換

特點(diǎn)：

單標(biāo)簽；

在頁面中顯示一條水平線汰寓；

1.5文本格式化標(biāo)簽

代碼：b加粗? u下劃線? i傾斜? s 刪除線?

strong 加粗? ins下劃線 em傾斜? del刪除線

語義：突出文字重要性

注意：推薦使用< strong>口柳、< ins>、< em>有滑、< del>跃闹，語義更強(qiáng)烈，遵循標(biāo)簽語義化 好處： ? 對人：好記憶毛好、好理解 對機(jī)器：對SEO（搜索引擎）有幫助

2望艺、媒體標(biāo)簽

2.1圖片標(biāo)簽 img：

代碼：<img src="" alt="">

特點(diǎn)：

2.1.1.src屬性（必須屬性）

eg:? ./cat.gif? ./指的是當(dāng)前目錄or同級目錄

2.1.2alt屬性 屬性值：替換文本

加載失敗才會顯示alt的文本

2.1.3.title屬性 屬性值：提示文本

鼠標(biāo)懸停時，才顯示的文本（不論圖片是否加載成功肌访，都會顯示）荣茫，也可以用于其他標(biāo)簽eg：h1等

2.1.4.width和height屬性（在標(biāo)簽內(nèi)設(shè)置屬性值可以不加單位）

注意：1.一般只設(shè)置width或者h(yuǎn)eight其中一個時，另一個沒設(shè)置的會等比縮放（圖片不會變形）

2.同時設(shè)置兩個场靴，設(shè)置不當(dāng)會導(dǎo)致圖片變形

2.2音頻標(biāo)簽 audio

代碼:< audio src="">< /audio>

屬性： src:音頻路徑

controls :播放控件

autoplay：自動播放 谷歌瀏覽器不支持

loop:循環(huán)播放

muted：禁音

只支持：MP3啡莉、Wav港准、Ogg 建議使用MP3

2.3視頻標(biāo)簽 video

代碼:< video src="">< /video>

屬性：

src：填寫視頻路徑

controls：顯示播放控件

autoplay：自動播放（谷歌禁用），要配合muted（靜音播放）才可以

loop：循環(huán)播放

poster：加載等待時的圖片

muted：禁音

只支持：MP4咧欣、Webm浅缸、Ogg 建議使用MP4

3、鏈接標(biāo)簽 a

? 代碼：< a href="">< /a>

特點(diǎn)：

1.雙標(biāo)簽魄咕，內(nèi)部可以包裹內(nèi)容

2.需要去指定網(wǎng)頁的話衩椒，需要設(shè)置a標(biāo)簽的href屬性

<!-- 外部鏈接以https://或http://開頭 -->

外部鏈接：< a href="https://www.baidu.com/"></ a >

<!-- 內(nèi)部鏈接以./開頭 選擇目標(biāo)頁面 -->

內(nèi)部鏈接：< a href="./index.html"></ a >

3.1 target屬性

取值 效果

_self 默認(rèn)，在當(dāng)前窗口內(nèi)跳轉(zhuǎn)

_blank 在新窗口中跳轉(zhuǎn)

3.2 a標(biāo)簽的顯示特點(diǎn)

a標(biāo)簽?zāi)J(rèn)是下劃線

a標(biāo)簽未點(diǎn)擊過時哮兰，默認(rèn)顯示為藍(lán)色

a標(biāo)簽點(diǎn)擊過后顯示為紫色（清除歷史記錄可恢復(fù)藍(lán)色）

3.3 空鏈接

? < a href="#">< /a>

功能：

1.點(diǎn)擊后回到頂部（假試的刷新頁面）

2.開發(fā)中不確定鏈接最終位置時毛萌，用空鏈接占個位置

3.4 錨點(diǎn)鏈接

第一步：把需要跳轉(zhuǎn)的文本用a鏈接包裹起來，href里面填充#加名字

第二步：找到目標(biāo)文本喝滞，給他的標(biāo)簽里面添加 ID 屬性：id=“名字”

六阁将、路徑的介紹

1.絕對路徑

絕對位置，可直達(dá)目標(biāo)位置右遭，一般以盤符開始

eg： 盤符開頭：E:\a-ketang\day1\筆記

網(wǎng)絡(luò)地址：https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png

2.相對路徑

當(dāng)前文件：當(dāng)前的html網(wǎng)頁

目標(biāo)文件：要放入的圖片

2.1 同級目錄

當(dāng)前文件和目標(biāo)文件在同一目錄（一個文件夾中）

方法一：直接寫圖片名字

方法二：使用 ./ VS Code會提示同級目錄有哪些圖片

2.2 下級目錄

目標(biāo)文件在下級目錄

方法一：寫目標(biāo)圖片所在的文件夾做盅，再直接寫圖片名字

方法二：使用 ./進(jìn)入目標(biāo)圖片所在的文件夾，再直接寫圖片名字

2.3 上級目錄

方法：使用 ../返回上一級的文件夾窘哈，直到返回到圖片所在的文件夾后吹榴，再直接寫或選擇圖片名字

day02

一、列表標(biāo)簽

1滚婉、應(yīng)用場景

場景：新聞列表图筹、排行榜、賬單

特點(diǎn)：按照行的方式让腹，整齊顯示內(nèi)容

種類：無序列表远剩、有序列表、自定義列表

2哨鸭、無序列表

場景：新聞列表

組成：

ul：無序列表的整體，用于包裹li

li：表示無序列表的每一項(xiàng)

特點(diǎn)：列表每項(xiàng)前面默認(rèn)顯示圓點(diǎn)標(biāo)識

注意：ul只能包裹li娇妓、li可以包裹任何內(nèi)容

3像鸡、有序列表

場景：排行榜

組成：

ol：有序列表的整體，用于包裹li

li：表示有序列表的每一項(xiàng)

特點(diǎn)：列表每項(xiàng)前面默認(rèn)顯示序號標(biāo)識

注意：ol只能包裹li哈恰、li可以包裹任何內(nèi)容

4只估、自定義列表

場景：網(wǎng)頁底部導(dǎo)航

組成：

dl：表示自定義列表的整體，用于包裹dt/dd

dt：表示自定義列表的主題

dd：表示自定義列表針對主題的每一項(xiàng)內(nèi)容（解釋說明)

特點(diǎn)：dd前面默認(rèn)顯示縮進(jìn)效果

注意：dl只能包裹dt着绷、dd蛔钙；

dt、dd可以包裹任何內(nèi)容

二荠医、表格標(biāo)簽

1.表格的基本標(biāo)簽

場景：學(xué)習(xí)成績表

基本標(biāo)簽：

table：表格整體吁脱，可包裹tr

tr：表格每行桑涎，可包裹td

td：表格單元格，可包裹內(nèi)容

注意嵌套關(guān)系：table>tr>td

2.表格的相關(guān)屬性

屬性名 屬性值 效果

border 數(shù)字 表格邊框?qū)挾?/p>

width? ? ? ? ? 數(shù)字 表格寬度

hieght? 數(shù)字 表格高度

align? ? ? center/left/right? 居中/居左/居右

cellspacing? 數(shù)字? 單元格與單元格之間的距離

cellpadding 數(shù)字? 單元格的內(nèi)容與單元格邊界的距離

注意：開發(fā)時兼贡，推薦使用CSS設(shè)置

3.表格標(biāo)題和表頭單元格標(biāo)簽

其他標(biāo)簽

屬性名 名稱 效果

caption 表格大標(biāo)題 在表格頂部居中顯示

th 表頭單元格? 表格一列的小標(biāo)題（默認(rèn)內(nèi)部居中加粗顯示）

注意：

caption標(biāo)簽書寫在table標(biāo)簽內(nèi)部th標(biāo)簽書寫在tr標(biāo)簽內(nèi)部（用于替換td標(biāo)簽）

4.表格的結(jié)構(gòu)標(biāo)簽

場景：突出表頭攻冷、主體、底部

結(jié)構(gòu)標(biāo)簽：

標(biāo)簽名 名稱

thead 表格頭部

tbody 表格主體

tfoot ? 表格底部

注意：

1.表格結(jié)構(gòu)標(biāo)簽內(nèi)部用于包裹tr標(biāo)簽2.表格的結(jié)構(gòu)標(biāo)簽可以省略

5.合并單元格

場景：將水平或者垂直的多個單元格合并成一個單元格

合并單元格步驟：

確定是跨行合并（垂直方向）還是跨列合并（水平方向）

找到目標(biāo)單元格左上原則：

跨行合并（垂直方向）rowspan="合并幾個就寫幾" 保留最上的

跨列合并（水平方向）colspan="合并幾個就寫幾" 保留最左邊的從誰開始合并 誰就是目標(biāo)單元格

刪除多余的單元格

屬性名 屬性值 說明

rowspan? 合并的個數(shù)? 跨行合并遍希，將多個單元格垂直合并

colspan? ? 合并的個數(shù)? 跨列合并? ? 將多個單元格水平合并

只有同一結(jié)構(gòu)標(biāo)簽中的單元格才能合并等曼，不能跨結(jié)構(gòu)標(biāo)簽合并（不能跨：thead、tbody凿蒜、tfoot）

三禁谦、表單標(biāo)簽

1.input系列標(biāo)簽（單標(biāo)簽）

場景：登錄頁、注冊頁

標(biāo)簽名：input

通過type屬性值的不同废封，展示不同效果

type屬性值 說明

text（默認(rèn)） 文本框州泊，用于輸入單行文本

password 密碼框，用于輸入密碼

radio 單選框虱饿，多選一

checkbox 復(fù)選框拥诡，多選多

file 文件選擇，用于上傳文件

submit 提交按鈕

reset 重置按鈕

button 普通按鈕氮发，之后配合js使用

date 日期按鈕

1.1文本框

type屬性值：text

常用屬性：placeholder 效果:占位符渴肉，提示用戶輸入的文本

注意：只要是輸入型的input 都可以使用該屬性

value：相當(dāng)于用戶輸入的內(nèi)容，提交后會發(fā)送給服務(wù)器

name：提交后可以告示后端發(fā)送過去的數(shù)據(jù)是什么含義

后端接收到的數(shù)據(jù)的格式是：name的屬性值=value的屬性值

1.2密碼框

type屬性值：password

注意：type寫錯或多加空格就會變?yōu)槟J(rèn)的text

1.3單選框

type屬性值：radio

常用屬性：

name：有相同的name的單選框?yàn)橐唤M爽冕，一組只有一個可以被選中

checked：默認(rèn)選中

1.4復(fù)選框

type屬性值：checkbox

常用屬性：

checked：默認(rèn)選中

1.5文件選擇

type屬性值：file

常用屬性：

multiple：多文件選擇

1.6按鈕

type屬性值

submit：提交按鈕仇祭，點(diǎn)擊會提交數(shù)據(jù)給服務(wù)器

reset：重置按鈕，點(diǎn)擊后恢復(fù)默認(rèn)值

button：普通按鈕颈畸，之后配合js添加功能

注意：

value屬性可以更改按鈕的顯示內(nèi)容

2.button按鈕標(biāo)簽(雙標(biāo)簽)

標(biāo)簽名：buttom

type屬性：

submit：提交按鈕乌奇，點(diǎn)擊會提交數(shù)據(jù)給服務(wù)器

reset：重置按鈕，點(diǎn)擊后恢復(fù)默認(rèn)值

button：普通按鈕眯娱，之后配合js添加功能

注意：

1.谷歌瀏覽器中buttom默認(rèn)是提交按鈕

2.buttom是雙標(biāo)簽礁苗，包裹的內(nèi)容就是顯示內(nèi)容

3.button標(biāo)簽一般用于普通按鈕，提交和重置使用input里面的提交和重置

3.select下拉菜單標(biāo)簽

標(biāo)簽組成

select：下拉菜單的整體

option：下拉菜單的每一項(xiàng)

常見屬性：

selected：默認(rèn)被選中

4.textarea文本域標(biāo)簽

標(biāo)簽名：textarea

常見屬性：

rows：文本域的可見行

clos：文本域的可見寬

注意點(diǎn)：

1.右下角可以拖拽改變大嗅憬伞（用resize：none试伙；可取消）

2.推薦使用CSS設(shè)置相關(guān)樣式

3.填充內(nèi)容需要和標(biāo)簽寫在一行，不然會多出不必要的空格

5.label標(biāo)簽

標(biāo)簽名：label

使用方法①：

1.使用label標(biāo)簽把內(nèi)容（如：文本）包裹起來

2.在表單標(biāo)簽上添加id屬性

3.在label標(biāo)簽的for屬性中設(shè)置對應(yīng)的id屬性值

使用方法②:

1.直接使用label標(biāo)簽把內(nèi)容（如：文本）和表單標(biāo)簽一起包裹起來

2.需要把label標(biāo)簽的for屬性刪除即可

四于样、語義化標(biāo)簽

1.無語義的布局標(biāo)簽

div標(biāo)簽：獨(dú)占一行（塊元素）

span標(biāo)簽：一行多個（行內(nèi)元素）

2.有語義的布局標(biāo)簽

head：網(wǎng)頁頭部

nav：網(wǎng)頁導(dǎo)航

footer：網(wǎng)頁底部

aside：網(wǎng)頁側(cè)邊欄

section：網(wǎng)頁區(qū)塊

article：網(wǎng)頁文章

注意：顯示特點(diǎn)與div一致疏叨，但是多了語義

五、字符實(shí)體

1.HTML中的空格合并現(xiàn)象

如果HTML代碼同時出現(xiàn)多個空格穿剖、換行蚤蔓、縮進(jìn)，頁面只會顯示一個空格

2.常見的字符實(shí)體

結(jié)構(gòu)：&英文糊余；

空格：&nbsp秀又；

小于：&lt单寂；

大于：&gt；

day03

一涮坐、基礎(chǔ)認(rèn)知

1.CSS初識

1.1 CSS介紹

中文名：（Cascading style sheets）層疊樣式表

CSS寫在哪里凄贩？

寫在style中，style寫在head中袱讹，title下面

CSS作用：給頁面中的html標(biāo)簽設(shè)置樣式

1.2語法規(guī)則

選擇器{

css屬性（屬性名+屬性值（鍵值對））疲扎；

}

2.CSS的引入方式

內(nèi)嵌式：寫在style標(biāo)簽中，stlye通常寫在head標(biāo)簽中

外聯(lián)式：單獨(dú)寫在一個.CSS文件中捷雕，需要通過link標(biāo)簽在網(wǎng)頁里引入

行內(nèi)式：寫在標(biāo)簽的style屬性中

小結(jié)：

二椒丧、基礎(chǔ)選擇器

1.標(biāo)簽選擇器

1.1選擇器的作用

選擇頁面中的標(biāo)簽，后續(xù)設(shè)置樣式

1.2標(biāo)簽選擇器

結(jié)構(gòu)：標(biāo)簽名 { css屬性名：屬性值救巷； }

作用：通過標(biāo)簽名壶熏，找到頁面中所有這類標(biāo)簽，設(shè)置樣式注意點(diǎn)：

1.標(biāo)簽選擇器選擇的是一類標(biāo)簽浦译，而不是單獨(dú)某一個

2.標(biāo)簽選擇器無論嵌套關(guān)系有多深棒假，都能找到對應(yīng)的標(biāo)簽

優(yōu)點(diǎn)：可以一次性選擇一類標(biāo)簽進(jìn)行更改

缺點(diǎn)：不能差異化選擇

2.類選擇器

結(jié)構(gòu)：.類名 { css屬性名：屬性值； }作用：通過類名精盅，找到頁面中所有帶有這個類名的標(biāo)簽帽哑，設(shè)置樣式 注意點(diǎn)：

1.所有標(biāo)簽上都有class屬性，class屬性的屬性值稱為類名（類似于名字）

2.類名可以由數(shù)字叹俏、字母妻枕、下劃線、中劃線組成粘驰，但不能以數(shù)字或者中劃線開頭

3.一個標(biāo)簽可以同時有多個類名屡谐，類名之間以空格隔開

4.類名可以重復(fù)，一個類選擇器可以同時選中多個標(biāo)簽

3.id選擇器

結(jié)構(gòu)：#id屬性值 { css屬性名：屬性值蝌数； }作用：通過id屬性值愕掏，找到頁面中帶有這個id屬性值的標(biāo)簽，設(shè)置樣式注意點(diǎn)：

1.所有標(biāo)簽上都有id屬性

2.id屬性值類似于身份證號碼顶伞，在一個頁面中是唯一的饵撑，不可重復(fù)的！

3.一個標(biāo)簽上只能有一個id屬性值

4.一個id選擇器只能選中一個標(biāo)簽

3.1 class類名與id屬性值的區(qū)別

class類名相當(dāng)于姓名枝哄，可以重復(fù)肄梨，一個標(biāo)簽可以同時有多個class類名

id屬性值相當(dāng)于身份證號碼阻荒，不可重復(fù)挠锥，一個標(biāo)簽只能有一個id屬性值

3.2類選擇器與id選擇器的區(qū)別

類選擇器以 . 開頭id選擇器以 # 開頭

3.3實(shí)際開發(fā)的情況

類選擇器用的最多 id一般配合js使用，除非特殊情況侨赡，否則不要使用id設(shè)置樣式實(shí)際開發(fā)中會遇到冗余代碼的抽取 （可以將一些公共的代碼抽取到一個公共的類中去）

4.通配符選擇器

結(jié)構(gòu)：* { css屬性名：屬性值蓖租； }作用：找到頁面中所有的標(biāo)簽粱侣，設(shè)置樣式注意點(diǎn)：

1.開發(fā)中使用極少，只會在極特殊情況下才會用到

2.在基礎(chǔ)班小頁面中可能會用于去除標(biāo)簽?zāi)J(rèn)的margin和padding（后續(xù)講解）

三蓖宦、字體和文本樣式

1 字體樣式

字體大衅胗ぁ：font-size

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

字體樣式：font-style

字體類型：font-family

字體類型：font屬性連寫

1.1字體大小

屬性名：font-size（速打：fsz）取值：數(shù)字 + px注意點(diǎn)：1.谷歌瀏覽器默認(rèn)文字大小是16px、最小是12px2.單位需要設(shè)置稠茂，否則無效

1.2字體粗細(xì)

屬性名：font-weight取值：

關(guān)鍵字：

normal：正常

加粗：bold

純數(shù)字：

100~900的整百數(shù)：

400：正常

700：加粗

注意點(diǎn)：1.不是所有字體都提供了九種粗細(xì)柠偶，因此部分取值頁面中無變化2.實(shí)際開發(fā)中以：正常、加粗兩種取值使用最多睬关。

1.3字體樣式（是否傾斜）

屬性名：font-style取值：正常（默認(rèn)值）：normal

傾斜：italic

1.4常見字體系列（了解）

無襯線字體（sans-serif）

1.特點(diǎn)：文字筆畫粗細(xì)均勻诱担，并且首尾無裝飾

2.場景：網(wǎng)頁中大多采用無襯線字體

3.常見該系列字體：黑體、Arial

襯線字體（serif）

1.特點(diǎn)：文字筆畫粗細(xì)不均电爹，并且首尾有筆鋒裝飾

2.場景：報刊書籍中應(yīng)用廣泛

3.常見該系列字體：宋體蔫仙、Times New Roman

等寬字體（monospace）

1.特點(diǎn)：每個字母或文字的寬度相等

2.場景：一般用于程序代碼編寫，有利于代碼的閱讀和編寫

3.常見該系列字體：Consolas丐箩、fira code

1.5字體系列 font-family

屬性名：font-family常見取值：具體字體1,具體字體2,具體字體3,具體字體4,...,字體系列

eg：

? 具體字體："Microsoft YaHei"摇邦、微軟雅黑、黑體屎勘、宋體施籍、楷體等……? 字體系列：sans-serif、serif挑秉、monospace等……渲染規(guī)則：

1.從左往右按照順序查找法梯，如果電腦中未安裝該字體，則顯示下一個字體

2.如果都不支持犀概，此時會根據(jù)操作系統(tǒng)立哑，顯示最后字體系列的默認(rèn)字體

注意點(diǎn)：

1.如果字體名稱中存在多個單詞，推薦使用引號包裹

2.最后一項(xiàng)字體系列不需要引號包裹

3.網(wǎng)頁開發(fā)時姻灶，盡量使用系統(tǒng)常見自帶字體铛绰，保證不同用戶瀏覽網(wǎng)頁都可以正確顯示

1.6 樣式的層疊問題

問題：給同一個標(biāo)簽設(shè)置了相同的樣式，此時瀏覽器會如何渲染呢产喉？結(jié)果：如果給同一個標(biāo)簽設(shè)置了相同的屬性捂掰，此時樣式會層疊（覆蓋），寫在最下面的會生效

1.7 字體font相關(guān)屬性的連寫

屬性名：font

取值：? font : style weight size family;順序要求：? swsf （稍微舒服）省略要求：? 只能省略前兩個曾沈，如果省略了相當(dāng)于設(shè)置了默認(rèn)值注意點(diǎn)：如果需要同時設(shè)置單獨(dú)和連寫形式? 要么把單獨(dú)的樣式寫在連寫的下面（避免層疊）? 要么把單獨(dú)的樣式寫在連寫的里面（避免層疊）

2 文本樣式

2.1 文本縮進(jìn)

屬性名：text-indent取值：? 數(shù)字+px? 數(shù)字+em（推薦：1em = 當(dāng)前標(biāo)簽的font-size的大姓庀）

2.2 文本水平對齊方式

屬性名：text-align取值：

left:左對齊

right:右對齊

center:水平居中對齊

注意點(diǎn)：? 如果需要讓文本水平居中，text-align屬性給文本所在標(biāo)簽（文本的父元素）設(shè)置

2.3文本修飾

屬性名：text-decoration

屬性值 效果

underline 下劃線（常用）

line-through 刪除線（不常用）

overline 上劃線（幾乎不用）

none 無裝飾線（常用）

注意：

開發(fā)中會使用 text-decoration : none ; 清除a標(biāo)簽?zāi)J(rèn)的下劃線

2.4 水平居中方法總結(jié) text-align : center

text-align : center 能讓那些元素水平居中塞俱？

1.文本

2.span標(biāo)簽姐帚、a標(biāo)簽

3.input標(biāo)簽、img標(biāo)簽

總結(jié)：只要是一行顯示多個的元素障涯，都可以給其父元素添加text-aligh? : center令其水平居中

注意點(diǎn)：

如果需要讓以上元素水平居中罐旗， text-align : center 需要給以上元素的 父元素 設(shè)置

2.5水平居中方法

margin : 0 auto

如果需要讓div膳汪、p、h（大盒子）水平居中九秀？? 可以通過margin : 0 auto ; 實(shí)現(xiàn)注意點(diǎn)：

1.如果需要讓 div遗嗽、p、h（大盒子） 水平居中鼓蜒，直接給 當(dāng)前元素本身 設(shè)置即可

2.margin：0 auto 一般針對于固定寬度的盒子痹换，如果大盒子沒有設(shè)置寬度，此時會默認(rèn)占滿父元素的寬度

3 行高

作用：控制一行的上下行間距屬性名：line-height取值：? 數(shù)字+px? 倍數(shù)（當(dāng)前標(biāo)簽font-size的倍數(shù)） 應(yīng)用：

1.讓單行文本垂直居中可以設(shè)置 line-height : 文字父元素高度

2.網(wǎng)頁精準(zhǔn)布局時都弹，會設(shè)置 line-height : 1 可以取消上下間距 行高與font連寫的注意點(diǎn)：? 如果同時設(shè)置了行高和font連寫晴音，注意覆蓋問題? font : style weight size/line-height family ;

? 如果行高不跟單位，那就是當(dāng)前文字大小的倍數(shù)

四缔杉、Chrome調(diào)試工具

1 Chrome調(diào)試工具操作

打開方式? ① 右擊 → 檢查 ② 看哪里選擇元素? 兩種常見方法控制樣式? ① 修改屬性值 ② 添加屬性 ③ 控制樣式生效特殊情況? ① 出現(xiàn)刪除線 ② 出現(xiàn)小三角形

2 擴(kuò)展 顏色取值

文字顏色 ：color

背景顏色 ：background-color

屬性值：

1.關(guān)鍵詞（預(yù)定義的顏色名）

常見 ：

red 紅色

green 綠色

blue 藍(lán)色

yellow 黃色

orange 黃色

skyblue 天空藍(lán)

pink 粉色

2.rgb表示法

r：紅

g：綠

b：藍(lán)

每項(xiàng)取值（0255）三原色

eg: color:rgb(255,0,0);

常見取值：

3.rgba表示法

a表示透明度

取值范圍 0~1

0：完全透明

1：完全不透明

省略寫法：

rgba（0锤躁，0，0或详，0.5）省略成rgba（0系羞，0，0霸琴，.5）

4.十六進(jìn)制表示法

#ff（red） 00（green） 00（blue）

取值范圍：

兩個數(shù)字為一組椒振，每個數(shù)值取值為：0~9，a梧乘，b澎迎，c，d选调，e夹供，f

省略寫法：

#ff0000 寫成 #f00（）每組兩個相同可以寫成一個

常見取值：

#fff 白色

#000 黑色

day04

一、選擇器進(jìn)階

1.復(fù)合選擇器

1.1 后代選擇器 空格

作用：根據(jù) HTML 標(biāo)簽的嵌套關(guān)系仁堪，選擇父元素 后代中 滿足條件的元素選擇器語法：選擇器1 選擇器2 { css }結(jié)果：? 在選擇器1所找到標(biāo)簽的后代（兒子哮洽、孫子、重孫子…）中弦聂，找到滿足選擇器2的標(biāo)簽鸟辅，設(shè)置樣式注意點(diǎn)：

1.后代包括：兒子、孫子莺葫、重孫子……

2.后代選擇器中匪凉，選擇器與選擇器之前通過 空格 隔開

1.2 子代選擇器 >

作用：根據(jù) HTML 標(biāo)簽的嵌套關(guān)系，選擇父元素 子代中 滿足條件的元素選擇器語法：選擇器1 > 選擇器2 { css }結(jié)果：? 在選擇器1所找到標(biāo)簽的子代（兒子）中捺檬，找到滿足選擇器2的標(biāo)簽再层，設(shè)置樣式注意點(diǎn)：

1.子代只包括：兒子

2.子代選擇器中，選擇器與選擇器之前通過 > 隔開

2.并集選擇器：,

作用：同時選擇多組標(biāo)簽，設(shè)置相同的樣式選擇器語法：選擇器1 树绩， 選擇器2 { css }結(jié)果：? 找到 選擇器1 和 選擇器2 選中的標(biāo)簽，設(shè)置樣式注意點(diǎn)：

1.并集選擇器中的每組選擇器之間通過 , 分隔

2.并集選擇器中的每組選擇器可以是基礎(chǔ)選擇器或者復(fù)合擇器

3.并集選擇器中的每組選擇器通常一行寫一個隐轩，提高代碼的可讀性

3.交集選擇器:緊貼著

作用：選中頁面中 同時滿足 多個選擇器的標(biāo)簽選擇器語法：選擇器1選擇器2 { css }結(jié)果：? （既又原則）找到頁面中 既 能被選擇器1選中饺饭，又 能被選擇器2選中的標(biāo)簽，設(shè)置樣式注意點(diǎn)：

1.交集選擇器中的選擇器之間是緊挨著的职车，沒有東西分隔

2.交集選擇器中如果有標(biāo)簽選擇器瘫俊，標(biāo)簽選擇器必須寫在最前面

4.Emmet語法

作用：通過簡寫語法，快速生成代碼語法：

5.hover偽類選擇器

作用：選中鼠標(biāo)懸停在元素上的狀態(tài)悴灵，設(shè)置樣式

選擇器語法：選擇器:hover { css }

注意點(diǎn)：

1.偽類選擇器選中的元素的某種狀態(tài)

總結(jié)：

二扛芽、背景相關(guān)屬性

1 背景顏色

屬性名：background-color（bgc）屬性值：? 顏色取值：關(guān)鍵字蚯斯、rgb表示法馁菜、rgba表示法、十六進(jìn)制……注意點(diǎn)：背景顏色默認(rèn)值是透明： rgba(0,0,0,0) 藻糖、transparent

背景顏色不會影響盒子大小茫孔，并且還能看清盒子的大小和位置叮喳，一般在布局中會習(xí)慣先給盒子設(shè)置背景顏色

2 背景圖片

屬性名：background-image（bgi）屬性值：background-image：url（圖片路徑）；注意點(diǎn)：? 背景圖片中url中可以省略引號? 背景圖片默認(rèn)是在水平和垂直方向平鋪的? 背景圖片僅僅是指給盒子起到裝飾效果缰贝，類似于背景顏色馍悟，是不能撐開盒子的

3 背景平鋪

屬性名：background-repeat（bgr）

屬性值:

4 背景位置

屬性名：background-position（bgp）

注意點(diǎn)：方位名詞取值和坐標(biāo)取值可以混使用，第一個取值表示水平剩晴，第二個取值表示垂直

5 背景相關(guān)屬性的連寫形式

屬性名：background

屬性值：? 單個屬性值的合寫锣咒，取值之間以空格隔開

書寫順序：? 推薦：background：color image repeat position省略問題：可以按照需求省略特殊情況：在pc端，如果盒子大小和背景圖片大小一樣赞弥，此時可以直接寫 background：url()注意點(diǎn)：? 如果需要設(shè)置單獨(dú)的樣式和連寫要么把單獨(dú)的樣式寫在連寫的下面要么把單獨(dú)的樣式寫在連寫的里面

6.1 （拓展）img標(biāo)簽和背景圖片的區(qū)別

需求：需要在網(wǎng)頁中展示一張圖片的效果毅整？方法一：直接寫上img標(biāo)簽即可? img標(biāo)簽是一個標(biāo)簽，不設(shè)置寬高默認(rèn)會以原尺寸顯示方法二：div標(biāo)簽 + 背景圖片? 需要設(shè)置div的寬高绽左，因?yàn)楸尘皥D片只是裝飾的CSS樣式毛嫉，不能撐開div標(biāo)簽

三、元素顯示模式

1 塊級元素

屬性：display：block顯示特點(diǎn)：

1.獨(dú)占一行（一行只能顯示一個）

2.寬度默認(rèn)是父元素的寬度妇菱，高度默認(rèn)由內(nèi)容撐開

3.可以設(shè)置寬高代表標(biāo)簽：? div承粤、p、h系列闯团、ul辛臊、li、dl房交、dt彻舰、dd、form、header刃唤、nav隔心、footer……

注意：對于文本類型的塊級元素，里面不要再去包含其他塊級元素尚胞，尤其是div

2 行內(nèi)元素

屬性：display：inline顯示特點(diǎn)：

1.一行可以顯示多個

2寬度和高度默認(rèn)由內(nèi)容撐開

3.不可以設(shè)置寬高

代表標(biāo)簽：? a硬霍、span 、b笼裳、u唯卖、i、s躬柬、strong拜轨、ins、em允青、del……

注意：

一般行內(nèi)元素可以包含文本或其他行內(nèi)元素橄碾，不能包含其他塊級元素，但a鏈接可以包含塊級元素颠锉，a鏈接里面不要再包含a鏈接

3 行內(nèi)塊元素

屬性：display：inline-block顯示特點(diǎn)：

1.一行可以顯示多個

2.可以設(shè)置寬高代表標(biāo)簽：? img堪嫂、input、button木柬、textarea皆串、select……? 特殊情況：img標(biāo)簽有行內(nèi)塊元素特點(diǎn)，但是Chrome調(diào)試工具中顯示結(jié)果是inline

4 元素顯示模式轉(zhuǎn)換

目的：改變元素默認(rèn)的顯示特點(diǎn)眉枕，讓元素符合布局要求

語法：

5 拓展1：HTML嵌套規(guī)范注意點(diǎn)

塊級元素一般作為大容器恶复，可以嵌套：文本、塊級元素速挑、行內(nèi)元素谤牡、行內(nèi)塊元素等等……但是：p標(biāo)簽中不要嵌套div、p姥宝、h等塊級元素

a標(biāo)簽內(nèi)部可以嵌套任意元素但是：a標(biāo)簽不能嵌套a標(biāo)簽

6 拓展2：居中方法總結(jié)

四翅萤、CSS三大特性

1 繼承性介紹

特性：子元素有默認(rèn)繼承父元素樣式的特點(diǎn)（子承父業(yè)）可以繼承的常見屬性：

1.color

2.font-style、font-weight腊满、font-size套么、font-family

3.text-indent、text-align

4.line-height

5.……注意點(diǎn)：? 可以通過調(diào)試工具判斷樣式是否可以繼承

2（拓展）繼承的應(yīng)用

好處：可以在一定程度上減少代碼常見應(yīng)用場景：

可以直接給ul設(shè)置 list-style:none （lin速寫）屬性碳蛋，從而去除列表默認(rèn)的小圓點(diǎn)樣式

直接給body標(biāo)簽設(shè)置統(tǒng)一的font-size胚泌，從而統(tǒng)一不同瀏覽器默認(rèn)文字大小

3（拓展）繼承失效的特殊情況

如果元素有瀏覽器默認(rèn)樣式，此時繼承性依然存在肃弟，但是優(yōu)先顯示瀏覽器的默認(rèn)樣式

1.a標(biāo)簽的color會繼承失效其實(shí)color屬性繼承下來了玷室，但是被瀏覽器默認(rèn)設(shè)置的樣式給覆蓋掉了

2.h系列標(biāo)簽的font-size會繼承失效其實(shí)font-size屬性繼承下來了零蓉，但是被瀏覽器默認(rèn)設(shè)置的樣式給覆蓋掉了

3.div的高度不能繼承，但是寬度有類似于繼承的效果穷缤，原因是div獨(dú)占一行的特性導(dǎo)致的

4 層疊性介紹

特性：

1.給同一個標(biāo)簽設(shè)置不同的樣式 → 此時樣式會層疊疊加 → 會共同作用在標(biāo)簽上

2.給同一個標(biāo)簽設(shè)置相同的樣式 → 此時樣式會層疊覆蓋 → 最終寫在最后的樣式會生效注意點(diǎn)：

當(dāng)樣式?jīng)_突時敌蜂，只有當(dāng)選擇器優(yōu)先級相同時，才能通過層疊性判斷結(jié)果

day05

CCS布局

一津肛、CSS三大特性

1.繼承性

2.層疊性

3.優(yōu)先級

1 優(yōu)先級的介紹

特性：不同選擇器具有不同的優(yōu)先級章喉，優(yōu)先級高的選擇器樣式會覆蓋優(yōu)先級低選擇器樣式

優(yōu)先級公式：? 繼承 < 通配符選擇器 < 標(biāo)簽選擇器 < 類選擇器 < id選擇器 < 行內(nèi)樣式 < !important注意點(diǎn)：

1.!important寫在屬性值的后面，分號的前面快耿！

2.!important不能提升繼承的優(yōu)先級，只要是繼承優(yōu)先級最低芳绩！

3.實(shí)際開發(fā)中不建議使用 !important 掀亥。

2.權(quán)重疊加計(jì)算

場景：如果是復(fù)合選擇器，此時需要通過權(quán)重疊加計(jì)算方法妥色，判斷最終哪個選擇器優(yōu)先級最高會生效權(quán)重疊加計(jì)算公式：（每一級之間不存在進(jìn)位）比較規(guī)則：

1.先比較第一級數(shù)字搪花，如果比較出來了，之后的統(tǒng)統(tǒng)看

2如果第一級數(shù)字相同嘹害，此時再去比較第二級數(shù)字撮竿，如果比較出來了，之后的統(tǒng)統(tǒng)不看

3.……

4.如果最終所有數(shù)字都相同笔呀，表示優(yōu)先級相同幢踏，則比較層疊性（誰寫在下面，誰說了算!）注意點(diǎn)：!important如果不是繼承许师，則權(quán)重最高房蝉，天下第一！

3（拓展）權(quán)重疊加計(jì)算案例

權(quán)重計(jì)算題解題步驟：

1.先判斷選擇器是否能直接選中標(biāo)簽微渠，如果不能直接選中 → 是繼承搭幻，優(yōu)先級最低 → 直接pass

2.通過權(quán)重計(jì)算公式，判斷誰權(quán)重最高注意點(diǎn)：1.實(shí)際開發(fā)中選擇標(biāo)簽需要精準(zhǔn)逞盆，盡量避免多個選擇器同時選中一個標(biāo)簽的情況檀蹋，不要自己難為自己

2.全是繼承的情況下，要比較父級元素的權(quán)重(看父元素的樣式)

4（拓展）查錯流程

（遇到樣式出不來云芦，要學(xué)會通過調(diào)試工具找錯）

二俯逾、PxCook的基本使用

略

三、盒子模型

1 盒子模型的介紹

1.盒子的概念

2.頁面中的每一個標(biāo)簽舅逸，都可看做是一個 “盒子”纱昧，通過盒子的視角更方便的進(jìn)行布局

3.瀏覽器在渲染（顯示）網(wǎng)頁時，會將網(wǎng)頁中的元素看做是一個個的矩形區(qū)域堡赔，我們也形象的稱之為 盒子

4.盒子模型CSS 中規(guī)定每個盒子分別由：

內(nèi)容區(qū)域（content）

內(nèi)邊距區(qū)域（padding）

邊框區(qū)域（border）

外邊距區(qū)域（margin）構(gòu)成识脆，這就是 盒子模型

5.記憶：可以聯(lián)想現(xiàn)實(shí)中的包裝盒

2 內(nèi)容的寬度和高度

作用：利用 width 和 height 屬性默認(rèn)設(shè)置是盒子 內(nèi)容區(qū)域 的大小屬性：width / height常見取值：數(shù)字+px

3 邊框（boder）

1 邊框（border）-單個屬性

作用：給設(shè)置邊框粗細(xì)、邊框樣式、邊框顏色效果

2 邊框（border）- 連寫形式

屬性名：border屬性值：單個取值的連寫灼捂，取值之間以空格隔開? 如：border : 10px solid red;快捷鍵：bd + tab

3 邊框（border）- 單方向設(shè)置

場景：只給盒子的某個方向單獨(dú)設(shè)置邊框?qū)傩悦篵order - 方位名詞屬性值：連寫的取值

4 盒子實(shí)際大小計(jì)算公式

4.1 盒子實(shí)際大小初級計(jì)算公式

需求：盒子尺寸 400*400离例，背景綠色，邊框10px 實(shí)線 黑色悉稠，如何完成宫蛆？? 注意點(diǎn)： ① 設(shè)置width和height是內(nèi)容的寬高！② 設(shè)置border會撐大盒子的猛！盒子實(shí)際大小初級計(jì)算公式：? 盒子寬度 = 左邊框 + 內(nèi)容寬度 + 右邊框? 盒子高度 = 上邊框 + 內(nèi)容高度 + 下邊框解決：當(dāng)盒子被border撐大后耀盗，如何滿足需求？? 解決：計(jì)算多余大小卦尊，手動在內(nèi)容中減去（手動內(nèi)減）

4.2 盒子實(shí)際大小終極計(jì)算公式

需求：盒子尺寸300*300叛拷，背景粉色，邊框10px實(shí)線黑色岂却，上下左右20px的內(nèi)邊距忿薇，如何完成？? 注意點(diǎn)：① 設(shè)置width和height是內(nèi)容的寬高躏哩！

② 設(shè)置border會撐大盒子

? ③ 設(shè)置padding會撐大盒子

盒子實(shí)際大小終極計(jì)算公式：? 盒子寬度 = 左邊框 + 左padding + 內(nèi)容寬度 + 右padding + 右邊框? 盒子高度 = 上邊框 + 上padding + 內(nèi)容寬度 + 下padding + 下邊框解決方法 ① ：手動內(nèi)減? 操作：自己計(jì)算多余大小署浩，手動在內(nèi)容中減去? 缺點(diǎn)：項(xiàng)目中計(jì)算量太大，很麻煩解決方法 ② ：自動內(nèi)減? 操作：給盒子設(shè)置屬性 box-sizing : border-box ; 即可? 優(yōu)點(diǎn)：瀏覽器會自動計(jì)算多余大小扫尺，自動在內(nèi)容中減去

5 盒子模型布局順序

1.從外往內(nèi)筋栋，從上往下每一個盒子的樣式：

1.寬高

2.輔助的背景顏色

3.盒子模型的部分：border、padding正驻、margin

4.其他樣式：color二汛、font-、text-拨拓、……

6 內(nèi)邊距（padding）- 取值

作用：設(shè)置 邊框 與 內(nèi)容區(qū)域 之間的距離屬性名：padding

記憶規(guī)則：從上開始賦值肴颊，然后順時針賦值，如果設(shè)置賦值的渣磷，看對面的Ｐ鲎拧！

6.1內(nèi)邊距（padding）- 單方向設(shè)置

場景：只給盒子的某個方向單獨(dú)設(shè)置內(nèi)邊距屬性名：padding - 方位名詞屬性值：數(shù)字 + px

7 外邊距（margin）- 取值

作用：設(shè)置邊框以外醋界，盒子與盒子之間的距離屬性名：margin常見取值：

記憶規(guī)則：從上開始賦值竟宋，然后順時針賦值，如果設(shè)置賦值的形纺，看對面的Ｇ鹣馈！

7.1外邊距（margin） - 單方向設(shè)置

場景：只給盒子的某個方向單獨(dú)設(shè)置外邊距屬性名：margin - 方位名詞屬性值：數(shù)字 + px

8 清除默認(rèn)內(nèi)外邊距

場景：瀏覽器會默認(rèn)給部分標(biāo)簽設(shè)置默認(rèn)的margin和padding逐样，但一般在項(xiàng)目開始前需要先清除這些標(biāo)簽?zāi)J(rèn)的margin和padding蜗字，后續(xù)自己設(shè)置? 比如：body標(biāo)簽?zāi)J(rèn)有margin：8px? 比如：p標(biāo)簽?zāi)J(rèn)有上下的margin? 比如：ul標(biāo)簽?zāi)J(rèn)由上下的margin和padding-le

9 內(nèi)外邊距各類情況

9.1 正常情況

場景：水平布局 的盒子打肝，左右的margin正常，互不影響結(jié)果：最終兩者距離為左右margin的和

9.2 外邊距折疊現(xiàn)象 – ① 合并現(xiàn)象

場景：垂直布局 的 塊級元素挪捕，上下的margin會合并結(jié)果：最終兩者距離為margin的最大值解決方法：避免就好? 只給其中一個盒子設(shè)置margin即可

9.3 外邊距折疊現(xiàn)象 – ② 塌陷現(xiàn)象

場景：互相嵌套 的 塊級元素粗梭，子元素的 margin-top 會作用在父元素上結(jié)果：導(dǎo)致父元素一起往下移動解決方法：

1.給父元素設(shè)置border-top 或者 padding-top（分隔父子元素的margin-top）

2.給父元素設(shè)置overflow：hidden

3.轉(zhuǎn)換成行內(nèi)塊元素

4.給父元素或子元素設(shè)置浮動

9.4行內(nèi)元素的margin和padding無效情況

場景：給行內(nèi)元素設(shè)置margin和padding時結(jié)果：

1.水平方向的margin和padding布局中有效！

2.垂直方向的margin和padding布局中無效级零！

day06

一断医、結(jié)構(gòu)偽類選擇器

1 nth-child()

作用與優(yōu)勢：

1.作用：根據(jù)元素在HTML中的結(jié)構(gòu)關(guān)系查找元素

2.優(yōu)勢：減少對于HTML中類的依賴，有利于保持代碼整潔

3.場景：常用于查找某父級選擇器中的子元素

nth的由來

n的注意點(diǎn)：

1.n為：0奏纪、1鉴嗤、2、3序调、4醉锅、5、6炕置、……

2.通過n可以組成常見公式

n選擇中間幾個的寫法：

2 nth-of-type()

區(qū)別：

nth-child：從父元素的所有元素中查找第N個（一個列表只有一類的標(biāo)簽用nth-child）

nth-of-type：從父元素的當(dāng)前所選擇的標(biāo)簽類型中查找第N個（一個列表有多類的標(biāo)簽用nth-of-type）

二荣挨、偽元素

偽元素：一般頁面中的非主體內(nèi)容可以使用偽元素區(qū)別：

1.元素：HTML 設(shè)置的標(biāo)簽

2.偽元素：由 CSS 模擬出的標(biāo)簽效果種類：

注意點(diǎn)：

1.必須設(shè)置content屬性才能生效

2.偽元素默認(rèn)是行內(nèi)元素

3.偽元素是加在內(nèi)容的前后

4.每一個盒子只能有兩個偽元素男韧，一個before朴摊，一個after

5.img、單標(biāo)簽沒有偽元素

三此虑、標(biāo)準(zhǔn)流

標(biāo)準(zhǔn)流：又稱文檔流甚纲，是瀏覽器在渲染顯示網(wǎng)頁內(nèi)容時默認(rèn)采用的一套排版規(guī)則，規(guī)定了應(yīng)該以何種方式排列元素

常見標(biāo)準(zhǔn)流排版規(guī)則：

1.塊級元素：從上往下朦前，垂直布局介杆，獨(dú)占一行

2.行內(nèi)元素 或 行內(nèi)塊元素：從左往右，水平布局韭寸，空間不夠自動折行

四春哨、浮動

1 浮動的作用

早期的作用：圖文環(huán)繞

現(xiàn)在的作用：網(wǎng)頁布局

場景：讓垂直布局的盒子變成水平布局，如：一個在左恩伺，一個在右

2 浮動的代碼

屬性名：float

屬性值：left（左浮動）赴背、right（右浮動）

3 浮動的特點(diǎn)

1.浮動元素會脫離標(biāo)準(zhǔn)流（簡稱：脫標(biāo)），在標(biāo)準(zhǔn)流中不占位置? 相當(dāng)于從地面飄到了空中

2.浮動元素比標(biāo)準(zhǔn)流高半個級別晶渠，可以覆蓋標(biāo)準(zhǔn)流中的元素

3.浮動找浮動（找邊緣）凰荚，找到邊緣停止浮動。下一個浮動元素會在上一個浮動元素后面左右浮動

4.浮動元素不會影響上面的標(biāo)準(zhǔn)流褒脯，只會影響下面的標(biāo)準(zhǔn)流

5.任何元素可以添加浮動便瑟，只要添加了浮動，都具有行內(nèi)塊元素的特點(diǎn)番川，即：? 一行可以顯示多個? 可以設(shè)置寬高注意點(diǎn)：? 浮動的元素不能通過text-align:center或者margin:0 auto到涂，讓浮動元素本身水平居中脊框，margin:0 auto設(shè)置盒子水平居中的必要條件是這個盒子是獨(dú)占一行的盒子，且必須有寬度

口訣：一浮全浮养盗，子浮父不浮缚陷，兄弟一起浮。

五往核、清除浮動

1 清除浮動的介紹

含義：清除浮動帶來的影響? 影響：如果子元素浮動了箫爷，此時子元素不能撐開標(biāo)準(zhǔn)流的塊級父元素原因：? 子元素浮動后脫標(biāo) → 不占位置目的：? 需要父元素有高度，從而不影響其他網(wǎng)頁元素的布局

2聂儒、清除浮動的方法

2.1清除浮動的方法

① 直接設(shè)置父元素高度

? 優(yōu)點(diǎn)：簡單粗暴虎锚，方便? 缺點(diǎn)：有些布局中不能固定父元素高度。如：新聞列表衩婚、京東推薦模塊

② 額外標(biāo)簽法

操作：

1.在父元素內(nèi)容的最后添加一個塊級元素

2.給添加的塊級元素設(shè)置 clear:both

? 缺點(diǎn)：

會在頁面中添加額外的標(biāo)簽窜护，會讓頁面的HTML結(jié)構(gòu)變得復(fù)雜

③ 單偽元素清除法

操作：用偽元素替代了額外標(biāo)簽① ：基本寫法

② ：補(bǔ)充寫法

? 優(yōu)點(diǎn)：項(xiàng)目中使用，直接給標(biāo)簽加類即可清除浮動

④ 雙偽元素清除法

操作：

特點(diǎn)：? 優(yōu)點(diǎn)：項(xiàng)目中使用非春，直接給標(biāo)簽加類即可清除浮動

⑤ 給父元素設(shè)置overflow : hidden

操作：

直接給父元素設(shè)置 overflow : hidden特點(diǎn)：? 優(yōu)點(diǎn)：方便

六柱徙、（拓展補(bǔ)充）BFC的介紹

塊格式化上下文（Block Formatting Context）：BFC? 是Web頁面的可視CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域奇昙，也是浮動元素與其他元素交互的區(qū)域护侮。創(chuàng)建BFC方法：

1.html標(biāo)簽是BFC盒子

2.浮動元素是BFC盒子

3.行內(nèi)塊元素是BFC盒子

4.overflow屬性取值不為visible。如：auto储耐、hidden…

5.…… BFC盒子常見特點(diǎn)：

1.BFC盒子會默認(rèn)包裹住內(nèi)部子元素（標(biāo)準(zhǔn)流羊初、浮動）→ 應(yīng)用：清除浮動

2.BFC盒子本身與子元素之間不存在margin的塌陷現(xiàn)象 → 應(yīng)用：解決margin的塌陷

day07

一、CSS書寫順序

二什湘、學(xué)成在線頁面

day08

一长赞、定位

1 定位的基本介紹

1.1網(wǎng)頁布局常見的布局方式

標(biāo)準(zhǔn)流

1.塊級元素獨(dú)占一行 → 垂直布局

2.行內(nèi)元素/行內(nèi)塊元素一行顯示多個 → 水平布局

浮動

1.可以讓原本垂直布局的 塊級元素變成水平布局

定位

1.可以讓元素自由的擺放在網(wǎng)頁的任意位置

2.一般用于盒子之間的層疊情況

1.2 定位的常見應(yīng)用場景

1.可以解決盒子與盒子之間的層疊問題? 定位之后的元素層級最高，可以層疊在其他盒子上面

2.可以讓盒子始終固定在屏幕中的某個位置

2 定位的基本使用

定位的使用步驟

1.設(shè)置定位方式屬性名：position常見屬性值：

2.設(shè)置偏移值偏移值設(shè)置分為兩個方向闽撤，水平和垂直方向各選一個使用即可選取的原則一般是就近原則 （離哪邊近用哪個）

總結(jié)

3 靜態(tài)定位

介紹：靜態(tài)定位是默認(rèn)值得哆，就是之前認(rèn)識的標(biāo)準(zhǔn)流。代碼：position：static哟旗；注意點(diǎn)：

1.靜態(tài)定位就是之前標(biāo)準(zhǔn)流贩据，不能通過方位屬性進(jìn)行移動

2.之后說的定位不包括靜態(tài)定位，一般特指后幾種：相對热幔、絕對乐设、固定

4 相對定位

介紹：自戀型定位，相對于自己之前的位置進(jìn)行移動代碼：position :relative;特點(diǎn)：

1.需要配合方位屬性實(shí)現(xiàn)移動

2.相對于自己原來位置進(jìn)行移動

3.在頁面中占位置 → 沒有脫標(biāo)應(yīng)用場景：

1.配合絕對定位組CP（子絕父相）

2.用于小范圍的移動

5 絕對定位

5.1絕對定位

介紹：拼爹型定位绎巨，相對于非靜態(tài)定位的父元素進(jìn)行定位移動代碼：position：absolute;特點(diǎn)：

1.需要配合方位屬性實(shí)現(xiàn)移動

2.默認(rèn)相對于瀏覽器可視區(qū)域進(jìn)行移動

3.在頁面中不占位置 → 已經(jīng)脫標(biāo)

ps：只要是脫標(biāo)的元素都具有行內(nèi)塊元素的特性

應(yīng)用場景：

1.配合絕對定位組CP（子絕父相）

5.2 絕對定位移動

絕對定位相對于誰移動近尚？

1.祖先元素中沒有定位 → 默認(rèn)相對于瀏覽器進(jìn)行移動

2.祖先元素中有定位 → 相對于 最近的 有定位 的祖先元素進(jìn)行移動

6 子絕父相

6.1 子絕父相

場景：讓子元素相對于父元素進(jìn)行自由移動含義：? 子元素：絕對定位? 父元素：相對定位子絕父相好處：? 父元素是相對定位，則對網(wǎng)頁布局影響最小

6.2（拓展） 子絕父絕特殊場景

場景：在使用子絕父相的時候场勤，發(fā)現(xiàn)父元素已經(jīng)有絕對定位了戈锻，此時直接子絕即可歼跟！原因：? 父元素已經(jīng)有定位已經(jīng)滿足要求，如果盲目修改父元素定位方式格遭，可能會影響之前寫好的布局

6.3（案例）子絕父相水平居中案例-解決方法

1.子絕父相

2.先讓子盒子往右移動父盒子的一半? left：50%

3.再讓子盒子往左移動自己的一半? 普通做法：margin-left：負(fù)的子盒子寬度的一半缺點(diǎn)：子盒子寬度變化后需要重新改代碼? 優(yōu)化做法：transform：translateX(-50%)優(yōu)點(diǎn)：表示沿著X軸負(fù)方向（往左）始終移動自己寬度的一半哈街，子盒子寬度變化不需要更改代碼

eg：father盒子內(nèi)有個son盒子

.father {

? ? ? position: relative;

? ? ? width: 600px;

? ? ? height: 400px;

? ? ? margin: 0 auto;

? ? ? background-color: blue;

? ? }

? ? .son {

? ? ? position: absolute;

? ? ? left: 50%;

? ? ? transform: translateX(-50%);

? ? ? width: 200px;

? ? ? height: 100px;

? ? ? background-color: pink;

? ? }

6.4（案例）子絕父相水平垂直都居中案例-解決方法

1.子絕父相

2.讓子盒子往右走大盒子一半? left：50%

3.讓子盒子往下走大盒子一半? top：50%

4.讓子盒子往左+往上走自己的一半? transform：translate(-50%，-50%)拒迅；

7 固定定位

介紹：死心眼型定位骚秦，相對于瀏覽器進(jìn)行定位移動代碼：position：fixed；特點(diǎn)：

1.需要配合方位屬性實(shí)現(xiàn)移動

2.相對于瀏覽器可視區(qū)域進(jìn)行移動

3.在頁面中不占位置 → 已經(jīng)脫標(biāo)應(yīng)用場景：

1.讓盒子固定在屏幕中的某個位置

8璧微、元素層級問題

8.1 元素層級問題

不同布局方式元素的層級關(guān)系：? 標(biāo)準(zhǔn)流 < 浮動 < 定位不同定位之間的層級關(guān)系：? 相對作箍、絕對、固定默認(rèn)層級相同? 此時HTML中寫在下面的元素層級更高前硫，會覆蓋上面的元素

8.2 更改定位元素的層級

場景：改變定位元素的層級屬性名：z-index屬性值：數(shù)字? 數(shù)字越大胞得，層級越高

二、裝飾

1 基線

1.1 認(rèn)識基線

基線：瀏覽器文字類型元素排版中存在用于對齊的基線（baseline）屹电。

1.2 文字對齊問題

場景：解決行內(nèi)/行內(nèi)塊元素垂直對齊問題問題：當(dāng)圖片和文字在一行中顯示時阶剑，其實(shí)底部不是對齊的

1.3 垂直對齊方式

屬性名：vertical-align屬性值：

1.4（拓展）項(xiàng)目中 vertical-align 可以解決的問題

1.iput文本框和表單按鈕無法對齊問題

2.input和img無法對齊問題

3.div中的iput文本框，iput文本框無法貼頂問題

4.div不設(shè)高度由img標(biāo)簽撐開危号，此時img標(biāo)簽下面會存在額外間隙問題（將img轉(zhuǎn)化為塊元素也可以解決該問題）

5.使用line-height讓img標(biāo)簽垂直居中問題注意點(diǎn)：? 學(xué)習(xí)浮動之后牧愁，不推薦使用行內(nèi)塊元素讓div一行中顯示，因?yàn)榭赡軙霈F(xiàn)垂直對齊問題? 推薦優(yōu)先使用浮動完成效果

2 光標(biāo)類型

場景：設(shè)置鼠標(biāo)光標(biāo)在元素上時顯示的樣式屬性名：cursor常見屬性值：

3 邊框圓角

場景：讓盒子四個角變得圓潤葱色，增加頁面細(xì)節(jié)递宅，提升用戶體驗(yàn)屬性名：border-radius常見取值：數(shù)字+px 娘香、百分比原理：

賦值規(guī)則：從左上角開始賦值苍狰，然后順時針賦值，沒有賦值的看對角烘绽！

3.2 邊框圓角的常見應(yīng)用

畫一個正圓：

1.盒子必須是正方形

2.設(shè)置邊框圓角為盒子寬高的一半 → border-radius:50%膠囊按鈕：

1.盒子要求是長方形

2.設(shè)置 → border-radius：盒子高度的一半

4 溢出部分顯示效果

溢出部分：指的是盒子 內(nèi)容部分 所超出盒子范圍的區(qū)域場景：控制內(nèi)容溢出部分的顯示效果淋昭，如：顯示、隱藏安接、滾動條……屬性名：overflow常見屬性值：

5 元素隱藏

場景：讓某元素本身在屏幕中不可見翔忽。如：鼠標(biāo):hover之后元素隱藏常見屬性：

1.visibility：hidden

2.display：none區(qū)別：

1.visibility：hidden 隱藏元素本身，并且在網(wǎng)頁中 占位置

2.display：none 隱藏元素本身盏檐，并且在網(wǎng)頁中 不占位置注意點(diǎn)：開發(fā)中經(jīng)常會通過 display屬性完成元素的顯示隱藏切換display：none歇式；（隱藏）、 display：block胡野；（顯示）

6 （拓展）

1 元素整體透明度

場景：讓某元素整體（包括內(nèi)容）一起變透明屬性名：opacity屬性值：0~1之間的數(shù)字? 1：表示完全不透明? 0：表示完全透明注意點(diǎn)：? opacity會讓元素整體透明材失，包括里面的內(nèi)容，如：文字硫豆、子元素等……

2 邊框合并

場景：讓相鄰表格邊框進(jìn)行合并龙巨，得到細(xì)線邊框效果代碼：border-collapse：collapse笼呆；（給table標(biāo)簽設(shè)置）

3 用CSS畫三角形技巧（面試題）

用CSS畫三角形的步驟是什么呢？

1.設(shè)置一個盒子

2.設(shè)置四周不同顏色的邊框

3.將盒子寬高設(shè)置為0旨别，僅保留邊框

4.得到四個三角形诗赌，選擇其中一個后，其他三角形（邊框）設(shè)置顏色為透明

eg :

? .box {

? ? ? width: 0;

? ? ? height: 0;

? ? ? border: 20px solid transparent;

? ? ? border-bottom: 20px solid #000;

? ? }

? /* 清除瀏覽器兼容性 */

? ? ? font-size: 0;

? ? ? line-height: 0;

拓展：通過調(diào)整不同邊框的寬度秸弛，可以調(diào)整三角形的形態(tài)

直角三角形：

水平和垂直各設(shè)置一個為0铭若，各保留一個

eg：boder-width：0 0 50px（改變高） 100p(改變寬)x；

直角三角形寬由水平方向的屬性控制递览，高由垂直方向?qū)傩钥刂?/p>

三奥喻、選擇器拓展

1 鏈接偽類選擇器

場景：常用于選中超鏈接的不同狀態(tài)選擇器語法：

注意點(diǎn)：? 如果需要同時實(shí)現(xiàn)以上四種偽類狀態(tài)效果，需要按照 LVHA 順序書寫記憶口訣：男盆友送了你一個 LV 包包非迹，你開心的 HA 哈笑? 其中 :hover偽類選擇器 使用更為頻繁环鲤，常用于選擇各類元素的懸停狀態(tài)

2 焦點(diǎn)偽類選擇器

場景：用于選中元素獲取焦點(diǎn)時狀態(tài)，常用于表單控件（input憎兽、textarea）選擇器語法：

效果：? 表單控件獲取焦點(diǎn)時默認(rèn)會顯示外部輪廓線

注意:

1.textarea和input去除外部輪廓線使用outline：none冷离；

2.textarea防止拖動使用 resize：none

3 屬性選擇器

場景：通過元素上的HTML屬性來選擇元素，常用于選擇 input 標(biāo)簽選擇器語法

eg：

day09

一纯命、項(xiàng)目樣式補(bǔ)充

1 精靈圖

1 介紹

場景：項(xiàng)目中將多張小圖片西剥，合并成一張大圖片，這張大圖片稱之為精靈圖優(yōu)點(diǎn)：減少服務(wù)器發(fā)送次數(shù)亿汞，減輕服務(wù)器的壓力瞭空，提高頁面加載速度例如：需要在網(wǎng)頁中展示8張小圖片? 8張小圖片分別發(fā)送 → 發(fā)送8次? 合成一張精靈圖發(fā)送 → 發(fā)送1次

2 步驟

1.創(chuàng)建一個盒子

2.通過PxCook量取小圖片大小，將小圖片的寬高設(shè)置給盒子

3.將精靈圖設(shè)置為盒子的背景圖片

4.通過PxCook測量小圖片左上角坐標(biāo)疗我，分別取負(fù)值設(shè)置給盒子的background-position：x y

2 背景圖片大小

作用：設(shè)置背景圖片的大小咆畏，語法：background-size：寬度 高度；一個值則代表等比例

取值：

2.1 background連寫拓展

完整連寫：

注意點(diǎn)：? background-size和background連寫同時設(shè)置時吴裤，需要注意覆蓋問題解決：

1.要么單獨(dú)的樣式寫連寫的下面

2.要么單獨(dú)的樣式寫在連寫的里面

3 文字陰影

作用：給文字添加陰影效果旧找，吸引用戶注意屬性名：text-shadow取值：

拓展：? 陰影可以疊加設(shè)置，每組陰影取值之間以逗號隔開

4 盒子陰影

作用：給盒子添加陰影效果麦牺，吸引用戶注意钮蛛，體現(xiàn)頁面的制作細(xì)節(jié)屬性名：box-shadow

取值：

5 過渡

作用：讓元素的樣式慢慢的變化，常配合hover使用剖膳，增強(qiáng)網(wǎng)頁交互體驗(yàn)屬性名：transition常見取值：

注意點(diǎn)：

1.過渡需要：默認(rèn)狀態(tài) 和 hover狀態(tài)樣式不同魏颓，才能有過渡效果

2.transition屬性給需要過渡的元素本身加

3.transition屬性設(shè)置在不同狀態(tài)中，效果不同的① 給默認(rèn)狀態(tài)設(shè)置吱晒，鼠標(biāo)移入移出都有過渡效果② 給hover狀態(tài)設(shè)置甸饱，鼠標(biāo)移入有過渡效果，移出沒有過渡效果

二枕荞、項(xiàng)目的前置認(rèn)知

1 網(wǎng)頁與網(wǎng)站的關(guān)系

在互聯(lián)網(wǎng)中柜候，網(wǎng)站類似于是一本書搞动，網(wǎng)頁就是這本書的每一頁? 比如：淘寶、京東渣刷、黑馬程序員等就是一個網(wǎng)站鹦肿，類似于是一本書? 這些網(wǎng)站中的每一個網(wǎng)頁，如：主頁辅柴、登錄頁面箩溃、商品頁面就是每一個單獨(dú)的頁面，類似于每一頁紙? 多個同主題網(wǎng)頁整合在一起碌嘀，就稱之為網(wǎng)站涣旨。

1.1 網(wǎng)頁與網(wǎng)站的概念

網(wǎng)頁：網(wǎng)站中的每一“頁” 。例如：淘寶的主頁股冗、淘寶的登錄頁霹陡、淘寶的商品頁等。網(wǎng)站：提供特定服務(wù)的一組網(wǎng)頁集合止状。例如：百度烹棉、淘寶、京東怯疤、黑馬程序員等浆洗；

2 DOCTYPE文檔說明

3 SEO簡介

SEO（Search Engine Optimization）：搜索引擎優(yōu)化作用：讓網(wǎng)站在搜索引擎上的排名靠前提升SEO的常見方法：

1.競價排名

2.將網(wǎng)頁制作成html后綴

3.標(biāo)簽語義化（在合適的地方使用合適的標(biāo)簽）

4.……

3.1（拓展補(bǔ)充）有語義的布局標(biāo)簽

場景：在HTML5新版本中，推出了一些有語義的布局標(biāo)簽集峦，可以增強(qiáng)網(wǎng)頁的語義化

4 ico圖標(biāo)

場景：顯示在標(biāo)簽頁標(biāo)題左側(cè)的小圖標(biāo)伏社，習(xí)慣使用.ico格式的圖標(biāo)常見代碼：

5 版心

場景：把頁面的主體內(nèi)容約束在網(wǎng)頁中間作用：讓不同大小的屏幕都能看到頁面的主體內(nèi)容代碼：

注意點(diǎn)：? 版心類名常用：container、wrapper塔淤、w 等

6（擴(kuò)展補(bǔ)充）CSS書寫順序

衡量程序員的能力摘昌，除了要看實(shí)現(xiàn)業(yè)務(wù)需求的能力，還要看平時書寫代碼的規(guī)范（專業(yè)性）不同的CSS書寫順序會影響瀏覽器的渲染性能凯沪，推薦前端工程師使用專業(yè)的書寫順序習(xí)慣注意點(diǎn)：? 開發(fā)中推薦多用類 + 后代第焰，但不是層級越多越好买优，一個選擇器中的類選擇器的個數(shù)推薦 不要超過 3 個

注意：

1.line-hight：1妨马；可以清除標(biāo)題標(biāo)簽和段落標(biāo)簽的默認(rèn)行高

2.textarea和input去除外部輪廓線使用outline：none；

3.textarea防止拖動使用 resize：none

4.文字溢出以省略號顯示

5.懸停時讓li往上移動杀赢，用相對定位給top負(fù)值烘跺，給過渡時，自身top值也要設(shè)置為0才有過渡效果