HTML

1.網(wǎng)頁組成

網(wǎng)頁是由HTML（文字，圖片，輸入框，按鈕，視頻，音頻。。。）組成的

2.網(wǎng)頁規(guī)范（W3C）

• 結(jié)構(gòu)標(biāo)準：制作網(wǎng)頁必須按照HTML的標(biāo)準結(jié)構(gòu)去寫網(wǎng)頁（用于對網(wǎng)頁元素進行整理和分類）
• 表現(xiàn)標(biāo)準：用來美化網(wǎng)頁css
• 行為標(biāo)準：用來實現(xiàn)網(wǎng)頁中的用戶的一些動作處理 Javascript

3.主流瀏覽器（有自己的內(nèi)核）

IE瀏覽器、火狐瀏覽器（Firefox）、谷歌瀏覽器（Chrome）、Safari瀏覽器、歐朋瀏覽器（Opera）

內(nèi)核（渲染引擎）

• 渲染引擎（瀏覽器內(nèi)核）：瀏覽器中專門對代碼進行解析渲染的部分
• 瀏覽器出品的公司不同，內(nèi)在的渲染引擎也是不同的。

注意點：

• 渲染引擎不同，導(dǎo)致解析相同代碼時的速度、性能、效果也不同的
• 谷歌瀏覽器的渲染引擎速度快、性能高、效果好，所以更吸引用戶的喜愛（*）

4.為什么要遵循WEB標(biāo)準

因為不同瀏覽器渲染引擎不同，解析的效果會存在差異（渲染或者排版的模塊就有些許差異）

導(dǎo)致用戶在不同的瀏覽器看到同一個頁面時不同的效果

三個構(gòu)成：

• 結(jié)構(gòu)（HTML），頁面元素和內(nèi)容
• 表現(xiàn)（CSS），網(wǎng)頁元素的外觀和位置等頁面樣式（如：顏色、大小等）
• 行為（Javascript），網(wǎng)頁模型的定義與頁面交互
• Web標(biāo)準要求頁面實現(xiàn)：結(jié)構(gòu)、表現(xiàn)、行為三層分離

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

主要通過HTML標(biāo)簽對網(wǎng)頁中的文本、圖片、音頻、視頻等內(nèi)容進行描述。

• HTML骨架結(jié)構(gòu)由哪些標(biāo)簽組成？
  • html標(biāo)簽：網(wǎng)頁的整體
  • head標(biāo)簽：網(wǎng)頁的頭部
  • body標(biāo)簽：網(wǎng)頁的身體（主體）
  • title標(biāo)簽：網(wǎng)頁的標(biāo)題

6.DOCTYPE的作用

聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。

<!DOCTYPE> 標(biāo)簽位于文檔的最前面，用于向瀏覽器說明當(dāng)前文檔使用哪種 HTML 或 XHTML 標(biāo)準規(guī)范，必需在開頭處使用<!DOCTYPE>標(biāo)簽為所有的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能按指定的文檔類型進行解析。
注意： ?一些老網(wǎng)站可能用的還是老版本的文檔類型比如 XHTML之類的，HTML5的文檔類型兼容很好(向下兼容的原則)。

document.compatMode：

• BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。

• CSS1Compat：標(biāo)準模式，瀏覽器使用W3C的標(biāo)準解析渲染頁面。

這個屬性會被瀏覽器識別并使用，但是如果你的頁面沒有DOCTYPE的聲明，那么compatMode默認就是BackCompat。

7.常見的標(biāo)簽

1.標(biāo)題標(biāo)簽

場景：在新聞和文章的頁面中，都離不開標(biāo)題，用來突出顯示文章主題。

• ????文字都有加粗
• 文字都有變大，并且從h1 → h6文字逐漸減小
• 獨占一行

注意點：h1標(biāo)簽對于網(wǎng)頁尤為重要，開發(fā)中有特定的使用場景，如：新聞的標(biāo)題、網(wǎng)頁的logo部分

2.段落標(biāo)簽

用來表示文章段落或者一段文本。

• 代碼：<p></p>
• 語義：段落
• 特點：
  • 段落之間存在間隙
  • 獨占一行

3.換行標(biāo)簽

在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后自動換行。如果希望某段文本強制換行顯示，就需要使用換行標(biāo)簽。

• 場景：讓文字強制換行顯示
• 代碼：<br>
• 語義：換行
• 特點：
  • 單標(biāo)簽
  • 讓文字強制換行

4.水平線標(biāo)簽

• 場景：分割不同主題內(nèi)容的水平線
• 代碼：<hr>
• 語義：主題的分割轉(zhuǎn)換
• 特點：
  • 單標(biāo)簽
  • 在頁面中顯示一條水平線

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

場景：需要讓文字加粗、下劃線、傾斜、刪除線等效果。

設(shè)置文字顏色或者設(shè)置文字大小: <font></font>1. 改變文字顏色需要添加color屬性 <font color="red">我是紅顏色的文字</font> 2. 改變文字大小需要添加size屬性 <font color="orange" size="7">我是紅顏色的文字</font>設(shè)置文字是否加粗: <strong> </strong> 或者 <b> </b> 設(shè)置文字斜體顯示: <em></em> 或者 <i> </i> 設(shè)置文字刪除線效果: <del></del> 或者 <s></s> 設(shè)置文字下劃線效果: <ins></ins> 或者 <u></u>

?6.標(biāo)簽語義化

語義：突出重要性的強調(diào)語境.

• 實際項目開發(fā)中選擇標(biāo)簽的原則：標(biāo)簽語義化
  • 即：根據(jù)語義選擇對應(yīng)正確的標(biāo)簽
  • 如：需要寫標(biāo)題，就使用h系列標(biāo)簽
  • 如：需要寫段落，就使用p標(biāo)簽
  • ……
• 好處：
  • 對人：好理解，好記憶
  • 對機器：有利于機器解析，對搜索引擎（SEO）有幫助

7.div span標(biāo)簽(*)

div span 是沒有語義的 是我們網(wǎng)頁布局主要的2個盒子

div 就是 division 的縮寫 分割， 分區(qū)的意思 其實有很多div 來組合網(wǎng)頁。

span, 跨度，跨距；范圍

8.媒體標(biāo)簽（img標(biāo)簽）

屬性名：src，屬性值：目標(biāo)圖片的路徑，注意點：當(dāng)前網(wǎng)頁和目標(biāo)圖片在同一個文件夾中，路徑直接寫目標(biāo)圖片的名字即可（包括后綴名）。

屬性名：alt，屬性值：替換文本，當(dāng)圖片加載失敗時，才顯示alt的文本，當(dāng)圖片加載成功時，不會顯示alt的文本

屬性名：title，?屬性值：提示文本，當(dāng)鼠標(biāo)懸停時，才顯示的文本，注意點：title屬性不僅僅可以用于圖片標(biāo)簽，還可以用于其他標(biāo)簽

屬性名：width和height，屬性值：寬度和高度（數(shù)字）

注意點：如果只設(shè)置width或height中的一個，另一個沒設(shè)置的會自動等比例縮放（此時圖片不會變形），如果同時設(shè)置了width和height兩個，若設(shè)置不當(dāng)此時圖片可能會變形

圖片標(biāo)簽: <img> 屬性: src:設(shè)置要顯示的圖片路徑 <img src="1.jpg">.width: 設(shè)置標(biāo)簽寬度.height: 設(shè)置標(biāo)簽高度.title: 鼠標(biāo)懸停到圖片上的文字提示.alt: 當(dāng)圖片無法正常顯示時候的文字提示.

• 屬性注意點：
• 標(biāo)簽的屬性寫在開始標(biāo)簽內(nèi)部
• 標(biāo)簽上可以同時存在多個屬性
• 屬性之間以空格隔開
• 標(biāo)簽名與屬性之間必須以空格隔開
• 屬性之間沒有順序之分

9.路徑（*）

絕對路徑：指目錄下的絕對位置，可直接到達目標(biāo)位置，通常從盤符開始的路徑

• 例如：
  • 盤符開頭：D:\images\1.jpg
  • 完整的網(wǎng)絡(luò)地址：www.baidu.com/img/1.jpg

相對路徑：當(dāng)前文件：當(dāng)前的html網(wǎng)頁，目標(biāo)文件：要找到的圖片。相對路徑：從當(dāng)前文件開始出發(fā)找目標(biāo)文件的過程

絕對路徑:1. 如果路徑中包含具體的磁盤目錄: d:/img/1.jpg2. 如果路徑中具有具體的網(wǎng)址: www.baidu.com/img/1.jpg相對路徑: 必須在同一個根目錄下.1. 如果當(dāng)前頁面和被訪問的資源在同一個文件夾中,路徑=直接設(shè)置文件名稱2. 如果當(dāng)前頁面在被訪問資源的上一級目錄中, 路徑=文件所在的文件夾名稱/文件名3. 如果當(dāng)前頁面在被訪問資源的下一級目錄中,路徑=../文件名稱

10.超鏈接（*）

本質(zhì): 就是用來實現(xiàn)頁面跳轉(zhuǎn)。<a ?href="目標(biāo)頁面路徑"></a>

• 屬性:target:設(shè)置目標(biāo)頁面打開方式(默認在當(dāng)前頁面中打開_self | _blank 新窗口中打開)
• 如果希望當(dāng)前頁面中所有超鏈接跳轉(zhuǎn)頁面的時候,都在新窗口中打開,那么只需要在head標(biāo)簽中設(shè)置 base標(biāo)簽,給base標(biāo)簽設(shè)置target屬性即可.

錨鏈接

本質(zhì): 在當(dāng)前頁面中跳轉(zhuǎn). 網(wǎng)頁中的返回頂部效果<a href="#"></a>

"#": 返回當(dāng)前頁面開始位置

?8.列表

?無序列表(unordered-list)

<ul><li> 列表項?? ?</li><li> 列表項?? ?</li> </ul>

• ?ul列表必須直接包含的標(biāo)簽是li
• 在li標(biāo)簽中可以包含其他任何標(biāo)簽
• 在展示數(shù)據(jù)的時候沒有先后順序的要求

有序列表： (order-list)

<ol><li> </li>? ? ? ? ? </ol>

• 有序列表在展示數(shù)據(jù)的時候是按照一定的順序顯示的
• 有序列表在用法上與無序列表一樣。

自定義列表(defined-list)

<dl><dt> </dt><dd> 列表項 </dd><dd> 列表項 </dd></dl>

• ? 一般在網(wǎng)頁的結(jié)尾處會使用該列表

CSS

1.HTML的局限性

只關(guān)注內(nèi)容的語義。比如 <h1> 表明這是一個大標(biāo)題，<p> 表明這是一個段落，<img> 表明這兒有一個圖片，<a> 表示此處有鏈接。雖然 HTML 可以做簡單的樣式，但是帶來的是無盡的臃腫和繁瑣。

2.CSS 層疊樣式表 ( Cascading Style Sheets )

CSS 樣式表或級聯(lián)樣式表。

• 也是一種標(biāo)記語言 （css的學(xué)習(xí)其實就是學(xué)一堆的屬性）
• 主要用于設(shè)置 HTML 頁面中的文本內(nèi)容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局和外觀顯示樣式。
• CSS 讓我們的網(wǎng)頁更加豐富多彩，布局更加靈活自如。
• 簡單理解：CSS 可以美化 HTML , 讓 HTML 更漂亮， 讓頁面布局更簡單。

HTML 主要做結(jié)構(gòu),顯示元素內(nèi)容；CSS 美化 HTML ,布局網(wǎng)頁。CSS 最大價值: 由 HTML 專注去做結(jié)構(gòu)呈現(xiàn)，樣式交給 CSS，即 結(jié)構(gòu) ( HTML ) 與樣式( CSS ) 相分離。

3.css語法規(guī)范

選擇器以及一條或多條聲明。

• 選擇器是用于指定 CSS 樣式的 HTML 標(biāo)簽，花括號內(nèi)是對該對象設(shè)置的具體樣式
• 屬性和屬性值以“鍵值對”的形式出現(xiàn)
• 屬性是對指定的對象設(shè)置的樣式屬性，例如字體大小、文本顏色等
• 屬性和屬性值之間用英文“:”分開
• 多個“鍵值對”之間用英文“;”進行區(qū)分

4.css的引入方式有哪些？

CSS有3種引入方式：

• 行內(nèi)式：將樣式寫在元素(標(biāo)簽)的 style屬性內(nèi)。（配合javascript使用）-->當(dāng)前標(biāo)簽中

• 行內(nèi)樣式表（內(nèi)聯(lián)樣式表）是在元素標(biāo)簽內(nèi)部的 style 屬性中設(shè)定 CSS 樣式。適合于修改簡單樣式. 語法：<div style="color: red; font-size: 12px;">青春不常在，抓緊談戀愛</div> 1.style 其實就是標(biāo)簽的屬性 在雙引號中間，寫法要符合 CSS 規(guī)范 2.可以控制當(dāng)前的標(biāo)簽設(shè)置樣式 3.由于書寫繁瑣，并且沒有體現(xiàn)出結(jié)構(gòu)與樣式相分離的思想，所以不推薦大量使用，只有對當(dāng)前元素添加簡單樣式的時候，可以考慮使用 4.使用行內(nèi)樣式表設(shè)定 CSS，通常也被稱為行內(nèi)式引入

• 內(nèi)嵌式:將樣式寫在 style元素內(nèi)。（任意位置，通常寫在head標(biāo)簽中）-->當(dāng)前頁面中

• 內(nèi)部樣式表（內(nèi)嵌樣式表）是寫到html頁面內(nèi)部. 是將所有的 CSS 代碼抽取出來，單獨放到一個 <style> 標(biāo)簽中 語法：<style>div {color: red;font-size: 12px;}</style> 1.<style> 標(biāo)簽理論上可以放在 HTML 文檔的任何地方，但一般會放在文檔的<head>標(biāo)簽中 2.通過此種方式，可以方便控制當(dāng)前整個頁面中的元素樣式設(shè)置 3.代碼結(jié)構(gòu)清晰，但是并沒有實現(xiàn)結(jié)構(gòu)與樣式完全分離 4.使用內(nèi)部樣式表設(shè)定 CSS，通常也被稱為嵌入式引入。

• 外鏈式：通過link標(biāo)簽，引入CSS文件內(nèi)的樣式。（多個頁面）-->.css文件中

• 實際開發(fā)都是外部樣式表. 適合于樣式比較多的情況. 核心是:樣式單獨寫到CSS 文件中，之后把CSS文件引入到 HTML 頁面中使用. 引入外部樣式表分為兩步： 1. 新建一個后綴名為 .css 的樣式文件，把所有 CSS 代碼都放入此文件中。 2. 在 HTML 頁面中，使用<link> 標(biāo)簽引入這個文件。 語法：<link rel="stylesheet" href="css文件路徑">

5.link和@ import的區(qū)別是什么？

1.加載資源的限制

link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)，如加載模板等；

@import屬于CSS范疇，只能加載CSS。

2.加載方式

link引用CSS時，在頁面載入時同時加載；（同步加載）

@import需要頁面網(wǎng)頁完全載入以后加載。（異步加載）

3.兼容性

link是XHTML標(biāo)簽，無兼容問題；

@import是在CSS2.1提出的，IE5以下低版本的瀏覽器不支持。

4.改變樣式

link支持使用Javascript控制DOM和改變樣式；（link標(biāo)簽是DOM元素）

@import不支持。（@import是方法）

6.給同一個標(biāo)簽設(shè)置了相同的樣式，瀏覽器如何渲染？

樣式會層疊，寫在最下面的會生效。有單獨和連寫的屬性（復(fù)合屬性）并存時，單寫屬性在前，復(fù)合屬性寫在下面

7.CSS選擇器

選擇元素的一種方式。選擇器(選擇符)就是根據(jù)不同需求把不同的標(biāo)簽選出來這就是選擇器的作用。即選擇標(biāo)簽用的。

基本標(biāo)簽

是由單個選擇器組成的。

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

標(biāo)簽選擇器（元素選擇器）是指用 HTML 標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱分類，為頁面中某一類標(biāo)簽指定統(tǒng)一的 CSS 樣式。

2.類選擇器（ .className）

如果想要差異化選擇不同的標(biāo)簽，單獨選一個或者某幾個標(biāo)簽，可以使用類選擇器。

• 如果想要差異化選擇不同的標(biāo)簽，單獨選一個或者某幾個標(biāo)簽，可以使用類選擇器。 ?
• 類選擇器在 HTML 中以 class 屬性表示，在 CSS 中，類選擇器以一個點“.”號顯示。 ?
• 類選擇器使用“.”（英文點號）進行標(biāo)識，后面緊跟類名（自定義，我們自己命名的）。 ?
• 可以理解為給這個標(biāo)簽起了一個名字，來表示。 ?
• 長名稱或詞組可以使用中橫線來為選擇器命名。 ?
• 不要使用純數(shù)字、中文等命名，盡量使用英文字母來表示。 ?
• 命名要有意義，盡量使別人一眼就知道這個類名的目的。

2.1多類名選擇器

給一個標(biāo)簽指定多個類名，從而達到更多的選擇目的。 這些類名都可以選出這個標(biāo)簽。即一個標(biāo)簽有多個名字.。

<div class="red font">zz</div>

• 在標(biāo)簽class 屬性中寫 多個類名
• 多個類名中間必須用空格分開
• 這個標(biāo)簽就可以分別具有這些類名的樣式

3.id選擇器（#id）（id屬性值唯一）

id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。

注意：id 屬性只能在每個 HTML 文檔中出現(xiàn)一次。

3.1id選擇器和類選擇器的區(qū)別：

• 類選擇器（class）好比人的名字，一個人可以有多個名字，同時一個名字也可以被多個人使用。
• id 選擇器好比人的身份證號碼，全中國是唯一的，不得重復(fù)。
• id 選擇器和類選擇器最大的不同在于使用次數(shù)上。
• 類選擇器在修改樣式中用的最多，id 選擇器一般用于頁面唯一性的元素上，經(jīng)常和 JavaScript 搭配使用。

4.通配符選擇器（*）

通配符選擇器不需要調(diào)用， 自動就給所有的元素使用樣式。

5.并集選擇器

選擇器1，選擇器2（box,main? ? ? ?：選擇class名為box或main的元素）

6.交集選擇器

選擇器1選擇器2 （div.box? ? ?：選擇div中所有class值為"box"的元素）

7.偽類選擇器

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

根據(jù)元素在HTML中的結(jié)構(gòu)關(guān)系查找元素，減少對HTML中類的依賴，保持代碼整潔，常用于查找某父級選擇器中的子元素。

E:first-child ：匹配父元素中第一個子元素,并且是E元素

E:last-child ：?匹配父元素中最后一個子元素,并且是E元素

E:nth-child(n) ：匹配父元素中第n個子元素,并且是E元素

E:nth-last-child(n) ：匹配父元素中倒數(shù)n個子元素,并且是E元素

E:first-of-type ：只在父元素的同類型（E）子范圍中的第一個

E:last--of-type ：只在父元素的同類型（E）子范圍中的最后一個

E:nth--of-type(n) ：只在父元素的同類型（E）子范圍中的第n個

nth-child()和nth-of-type()的區(qū)別

E:nth-child:

1.找到父元素下的第n個子元素

2.且這個子元素為E元素（如果第n個如果不是E元素，則找不到）。

E:nth-of-type:

1.找到父元素

2.找到它所有子元素下的所有指定類型（E）子元素的第n個

3.將所有E元素放在同一組，然后在里面找。

n常見公式：

偶：2n，even；奇：2n+1，2n-1，odd；找前5：-n+5；找從5往后：n+5

2.用戶行為偽類

焦點選擇器:focus

選中元素獲取焦點時狀態(tài)，常用于表單控件。

把光標(biāo)點到input里，獲得焦點；把光標(biāo)從input里拿出來，失去焦點。

表單控件獲取焦點時，默認會顯示外部輪廓線。

鏈接偽類選擇器

常用于選中超鏈接的不同狀態(tài)

:link? ? ?：選中未訪問過的狀態(tài)

:hover? ?：選中鼠標(biāo)懸停的狀態(tài)

:active? ? ：選中鼠標(biāo)按下的狀態(tài)

:visited? ? ：選中訪問之后的狀態(tài)

8.偽元素選擇器

1.::first-letter? ：匹配元素的第一個字母。

2.::first-line? ：匹配包含此偽元素的元素的第一行。

3.特別偽元素選擇器

一般頁面中的非主體內(nèi)容。（偽元素：行內(nèi)）

::before：在父元素內(nèi)容的最前添加一個偽元素

::after：在父元素內(nèi)容的最后添加一個偽元素

必設(shè)置content屬性才生效，偽元素默認是行內(nèi)元素（寬高不生效）content：在元素之前或之后放置生成的內(nèi)容。可以插入文本、圖像、引號，也可以結(jié)合計數(shù)器，為頁面元素插入編號。

元素與偽元素區(qū)別：

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

偽類：當(dāng)已有元素處于的某個狀態(tài)時，為其添加對應(yīng)的樣式，這個狀態(tài)是根據(jù)用戶行為而動態(tài)變化的。

為了通過選擇器獲取那些不存在與DOM樹中的信息以及獲取不能被常規(guī)CSS選擇器獲取到的信息

偽類是選擇器的一種，它用于選擇處于特定狀態(tài)的元素，比如當(dāng)它們是這一類型的第一個元素時，或者是當(dāng)鼠標(biāo)指針懸浮在元素上面的時候。它們表現(xiàn)得會像是你向你的文檔的某個部分應(yīng)用了一個類一樣，幫你在你的標(biāo)記文本中減少多余的類，讓你的代碼更靈活、更易于維護。

偽元素：用于創(chuàng)建一些不在文檔樹中的元素，并為其添加樣式。

由CSS模擬出的標(biāo)簽效果,是文檔某個部分的表現(xiàn)（::before , ::after , ::first-letter , ::first-line , ::selecton ）

偽元素以類似方式表現(xiàn)，不過表現(xiàn)得是像你往標(biāo)記文本中加入全新的 HTML 元素一樣，而不是向現(xiàn)有的元素上應(yīng)用類。

偽類與偽元素的區(qū)別

是否創(chuàng)建了新的元素，（是否創(chuàng)建一個文檔樹之外的元素）即是否需要添加元素才能達到效果，如果不需要->偽類,需要->偽元素。

偽類：假類，添加類來達到效果

//1.想要給第一項添加樣式，！！可以在為第一個添加一個類 class="pink"！！ .pink {color: pink;} <ul><li class="pink">one</li><li>two</li> </ul>//2.不用添加類的方法，通過給第一個的:first-child偽類來為其添加樣式。這個時候，被修飾的元素依然處于文檔樹中。 li:first-child {color: pink;} <ul><li>one</li><li>two</li> </ul>

偽元素：假元素，添加元素才能達到效果

//1.給第一個字母添加樣式，給第一個字母中包裹一個元素，！！并設(shè)置該span元素的樣式！！ .pink {color: pink;}<ul><li><span class="pink">o</span> ne</li> </ul>//2.不創(chuàng)建一個元素，通過設(shè)置的:first-letter偽元素來為其添加樣式。li:first-letter {color: pink;}<ul><li>one</li></ul>

偽類基于普通DOM元素?產(chǎn)?的不同狀態(tài)，是DOM元素的某?特征。

偽元素能夠創(chuàng)建在DOM樹中不存在的元素，并且這個元素是能夠訪問到的。
?? ?
?偽類與偽元素的相同點：

偽類和偽元素都是?來表示?檔樹以外的"元素"。偽類和偽元素都不出現(xiàn)在源?件和DOM樹中。也就是說在html源?件中是看不到偽類和偽元素的。?

在CSS3規(guī)范中，用于區(qū)分偽元素和偽類，偽類用單冒號":"，偽元素用雙冒號"::"。

偽類和偽元素 - 學(xué)習(xí) Web 開發(fā) | MDN
偽類和偽元素的區(qū)別 · 王增輝的工作筆記 · 看云

9.屬性選擇器

通過元素上HTML選擇元素，常用于選擇input標(biāo)簽。

E[attr] 選擇具有attr屬性的E元素

E[attr="val"] 選擇具有attr屬性且屬性值為val的E元素(?input[type = "text"]，button[disabled="true"])

E[attr^="val"] 選擇具有attr屬性且屬性值以val開頭的E元素(li[class^="box"])

E[attr$="val"] 選擇具有attr屬性且屬性值以val結(jié)尾的E元素(li[class$="box"])

E[attr*="val"] 選擇具有attr屬性且屬性值中任意位置包含val的E元素(li[class*="box"])

E[attr~="val"]選擇具有attr的屬性且該元素的值中包含val單詞（li[class~="a"]）

即要包含屬性值“val”?，存在多個屬性值時，其中一個屬性值為“val”。

[title~=value]{}<img src="tutu.jpg" title="one value" />

常用在多屬性值當(dāng)中，在一列中的好幾個值，是用空格隔開的。

E[attr|="val"]選擇具有attr的屬性且屬性值具有val或者以val-開頭E元素

CSS選擇器（5）——屬性選擇器

[attr|=val] - 選擇指定值開頭 - css3屬性選擇器

10.關(guān)系選擇器

1.后代選擇器：

選擇器1? ?選擇器2（div p? ? ? ?：選中div中的所有p元素）

2.子代選擇器（只選兒子）

選擇器1 > 選擇器2（div>p? ? ? ：選擇div中的所有子代p元素）

3.鄰接兄弟選擇器

選擇器1 +?選擇器2

選擇器中的兩個元素有同一個父元素，而且第二個元素必須緊跟第一個元素。

eg.<h1>和<p>之間插入其他的某個元素，例如<h2>，段落不再與選擇器匹配。

4.通用兄弟選擇器

選擇器1 ~?選擇器2

選擇器中的兩個元素有同一個父親，但第二個元素不必緊跟第一個元素。

eg.選中了所有的?<h1>之后的<p>元素，雖然中間還有個?<div>，但是其后的<p>還是被選中了。

8.字體相關(guān)屬性

1.字體大小font-size

• px（像素）大小是我們網(wǎng)頁的最常用的單位
• 谷歌瀏覽器默認的文字大小為16px
• 不同瀏覽器可能默認顯示的字號大小不一致，我們盡量給一個明確值大小，不要默認大小
• 可以給 body 指定整個頁面文字的大小

2.字體粗細font-weight

屬性值normal：不加粗的（默認值）；bold：加粗的；100-900（數(shù)字后面不跟單位）：400normal；700bold。

• 讓加粗標(biāo)簽（比如 h 和 strong 等) 不加粗，或者其他標(biāo)簽加粗
• 實際開發(fā)時，我們更喜歡用數(shù)字表示粗細

3.字體樣式font-style

normal：顯示標(biāo)準的字體樣式（默認值）；italic：斜體

4.字體font-family

實際工作中按照團隊約定來寫字體

font-family：具體字體1,具體字體2,具體字體3,具體字體4,...,字體系列

5.字體綜合寫法 font

body { font: font-style font-weight font-size/line-height font-family; }

必須按上面語法格式中的順序書寫，不能更換順序，并且各個屬性間以空格隔開，不需要設(shè)置的屬性可以省略（取默認值），但必須保留 font-size 和 font-family 屬性，否則 font 屬性將不起作用

6.字體顏色color

開發(fā)中最常用的是十六進制

7.文本對齊text-align

用于設(shè)置元素內(nèi)文本內(nèi)容的水平對齊方式。

div { text-align: center; }left：左對齊（默認） right：右對齊 center：居中對齊 text-align : center 能讓哪些元素水平居中？

• 文本
• span標(biāo)簽、a標(biāo)簽
• input標(biāo)簽、img標(biāo)簽

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

8.修飾文本text-decoration

div { text-decoration：underline；}none：沒有裝飾線（默認） underline：下劃線（a鏈接自帶下劃線） overline：上劃線 line-through：刪除線 開發(fā)中會使用 text-decoration : none ; 清除a標(biāo)簽?zāi)J的下劃線

9.文本縮進

div { text-indent：20px； } div {text-indent：2em； } /*em 是一個相對單位，就是當(dāng)前元素（font-size) 1 個文字的大小, 如果當(dāng)前元素沒有設(shè)置大小，則會按照父元素的 1 個文字大小。*/

10.行高line-height

用于設(shè)置行間的距離（行高）。可以控制文字行與行之間的距離。

行高的文本分為 上間距 文本高度 下間距 = 行間距

• ?讓單行文本垂直居中可以設(shè)置 line-height : 文字父元素高度
• ?網(wǎng)頁精準布局時，會設(shè)置 line-height : 1 可以取消上下間距

行高與font連寫的注意點： 如果同時設(shè)置了行高和font連寫，注意覆蓋問題 font : style weight size/line-height family ;

11.標(biāo)簽水平居中方法總結(jié) margin : 0 auto

如果需要讓div、p、h（大盒子）水平居中？ 可以通過margin : 0 auto ; 實現(xiàn) 注意點： 1. 如果需要讓 div、p、h（大盒子） 水平居中，直接給 當(dāng)前元素本身 設(shè)置即可 2. margin：0 auto 一般針對于固定寬度的盒子，如果大盒子沒有設(shè)置寬度，此時會默認占滿父元素的寬度

9.居中

<div class="box"><div class="main">box </div></div>

1.垂直水平居中

已知寬高

/* 1.絕對定位+上下左右+margin : margin: auto;（垂直水平居中）*/.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);position: relative;}.main {width: 200px;height: 200px;background-color: pink;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;/* 文字居中，目前不管里面文字，只要pink居中即可 */text-align: center;line-height: 200px;}/* 2.元素設(shè)置寬高；margin為元素:-(寬高一半); */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);position: relative;}.main {width: 200px;height: 200px;background-color: pink;position: absolute;top: 50%;left: 50%; /* 缺點：子盒子寬度變化后，需要重新改代碼，高度同理 *//* 元素往上移到自身高度的一半。 */margin-top: -100px;margin-left: -100px;/* 文字居中 */text-align: center;line-height: 200px;}/* 3. position absolute + calc */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);position: relative;}.main {width: 200px;height: 200px;background-color: pink;position: absolute;/* calc函數(shù)計算子級應(yīng)當(dāng)距離父級頂部的距離 */top: calc(50% - 100px);left: calc(50% - 100px);/* 文字居中 */text-align: center;line-height: 200px;}

CSS calc() 函數(shù) | 菜鳥教程

未知寬高

/* 1.子絕父相 */ .box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);position: relative;} /*優(yōu)點：表示沿著X軸負方向（往左）始終移動自己寬度的一半，子盒子寬度變化不需要更改代碼，高度同理 */img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}/* 2.Flex居中 */.box {display: flex;/* 子元素水平居中 */justify-content: center;/* 子元素垂直居中 */align-items: center;}/* 3.grid布局 */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);display: grid;justify-items: center;align-items: center;}/* 4.table-cell */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);display: table-cell;text-align: center;vertical-align: middle;}.main {display: inline-block;}/* 5.margin+tranform */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);position: relative;}.main {position: absolute;margin: 50% 50%;transform: translate(-50%, -50%);}/* 6.margin+flex */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);display: flex;}.main {margin: auto;}

2.水平居中

/* 1.margin + text-align*/.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);}.main {width: 200px;height: 200px;background-color: pink;/* margin: 0 auto; */margin: auto;/* 2.文字水平居中 */text-align: center;}/* 2.子絕父相 */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);position: relative;}.main {position: absolute;left: 50%;transform: translateX(-50%)}/* 3.flex */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);display: flex;justify-content: center;}/* 4.table-cell */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);display: table-cell;text-align: center;}/* 5.fit-content */.main {width: fit-content;margin: 0 auto;background-color: pink;}

3.垂直居中

/* 1.行高line-height */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);line-height: 400px;}/* 2.子絕父相 */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);position: relative;}.main {position: absolute;top: 50%;transform: translateY(-50%);background-color: pink;}/* 3.flex */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);display: flex;align-items: center;}/* 4.table-cell */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);display: table-cell;vertical-align: middle;}

1，書寫出你所知道的html標(biāo)簽至少15個(h1到h6只能算1個)2，列出圖片標(biāo)簽的至少3個標(biāo)簽屬性，并說明其作用3，如何使用a標(biāo)簽在新窗口中打開頁面，寫出關(guān)鍵代碼(把兩種方式寫出來)4，分別寫出當(dāng)前路徑、下一級路徑、上一級路徑所對應(yīng)的符號5，至少寫出3個特殊字符，例如: ÷ 表示 ÷號6，p標(biāo)簽身上擁有red和fz40兩個，請寫出p同時擁有這兩個類的正確格式7，寫出css的基礎(chǔ)選擇器(4種)8，至少寫出6個和字體相關(guān)的css屬性9，請由高到低寫出 id選擇器，行內(nèi)樣式，類選擇器，!Important，通配符選擇器，標(biāo)簽選擇器， 這些選擇器的權(quán)重排序10，寫出Css實體化三個屬性11，寫出標(biāo)簽的3種顯示模式及其特點12，寫出ul去除默認樣式小圓點的代碼13，分別寫出以下四個屬性是什么意思，并寫出他們的復(fù)合屬性background-color:red; background-image:url(images/logo.png); background-repeat:no-repeat; background-position:center center;14，一個盒子寬度和高度都是300px, 邊框是border:1px solid #000; 內(nèi)邊距是padding:10px 20px 30px，請寫出盒子的真正占位是 多少*多少 ，寫出計算過程和結(jié)果。水平方向 300+2+20*2 = 342px豎直方向 300+2+10+30 = 342px? ? 1，已知給盒子添加內(nèi)邊距會撐大盒子的占位，請寫出內(nèi)邊距撐大盒子占位的兩種解決方法2，簡單描述下外邊距合并和外邊距塌陷，并說明如何解決3，閱讀以下代碼，寫出a標(biāo)簽字體顏色是什么顏色，為什么？<style> div{color:red; } </style><div><a href="#">這是a標(biāo)簽</a> </div>4，請寫出只修改邊框顏色的屬性5，請閱讀以下代碼，說明文字能夠居中？為什么？<style> span{text-align:center; } </style> <span>這是span</span>6，請閱讀以下代碼，請寫出立刻讓圖片居中于div的代碼<div><img src="01.jpg" /> </div>7，請寫出浮動的常規(guī)用法，以及同級盒子怎么用浮動？8，請寫出浮動對父盒子造成的影響9，請圓角屬性正圓和膠囊型的寫法10，寫出標(biāo)簽的3種顯示模式及其特點11，寫出ul去除默認樣式小圓點的代碼12，請圓角屬性左上角20px的圓角，左下角40px的圓角，右上角50px的圓角，右下角60px的圓角的代碼13，請寫出背景顏色黑色半透明的css屬性；14，分別寫出固定定位、絕對定位、相對定位的特點，及設(shè)置方向詞屬性時候的參考位置。15，一個固定定位的盒子，寬度300px高度200px，請寫出讓它居中于窗口寬度的寫法。16，請寫出擴大點選區(qū)域的標(biāo)簽及其用法17，請寫出禁止文本域標(biāo)簽可拖拽改變大小的的css代碼18，請寫出禁止表單元素聚焦后出現(xiàn)黑色外邊線的css代碼19，請寫出單選按鈕默認選中時候的標(biāo)簽屬性和值20，請寫出下拉選框默認選中時候的標(biāo)簽屬性和值21，請寫出兩種偽元素的書寫格式及其必要屬性22，請至少寫出清除浮動的四種方法?

7.CSS特性

1.繼承性（inherited）

可繼承屬性(文字控制屬性都可，與尺寸相關(guān)的樣式通常不能繼承)

color，font-size , font-weight, font-family, text-indent ,text-align ,line-height等

應(yīng)用場景：

ul設(shè)list-style:none;

body設(shè)font-size,統(tǒng)一不同瀏覽器默認文字大小。

繼承失敗：瀏覽器默認樣式覆蓋

a的color，h的font-size

2.層疊性：

同一標(biāo)簽不同樣式，疊加，共同作用在標(biāo)簽上；

同一標(biāo)簽相同樣式，覆蓋，寫在最后的樣式生效。

注：樣式?jīng)_突時，只有當(dāng)選擇器優(yōu)先級相同時，菜鳥通過層疊性判斷。

3.優(yōu)先級

就近原則（離代碼越近，優(yōu)先級越高）。
選擇范圍越小，優(yōu)先級越高。

!important>內(nèi)聯(lián)（行內(nèi)）樣式 > id?選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標(biāo)簽選擇器 = 偽元素選擇器>通配符選擇器>繼承>瀏覽器默認屬性

注意：！importont井非選擇器，而是針對選擇器內(nèi)的單一樣式設(shè)置的。當(dāng)然，不同選擇器內(nèi)應(yīng)用 ！important的權(quán)重也是不一樣的，例如，在id選擇器內(nèi)的！important關(guān)鍵字權(quán)重要高于類選擇器內(nèi)的 ！important關(guān)鍵字權(quán)重，即下面所說的選擇器權(quán)重組合。

權(quán)重疊加計算（每一級之間不存在進位）

（0，0，0，0）（行內(nèi)，id，類，標(biāo)簽）（口訣：行內(nèi)的類標(biāo)簽）

權(quán)重計算步驟

1.繼承：是否能直接選中標(biāo)簽，不能直接選中，則是繼承，優(yōu)先級最小

2.權(quán)重公式，判斷誰權(quán)重最高。

8.css盒模型

margin、padding、border、content

content：盒子的內(nèi)容，顯示文本圖像

border：邊框，圍繞在內(nèi)邊框和內(nèi)容外的邊框；邊框線

border會撐大盒子，此時：盒子寬度=左邊框+內(nèi)容寬度+右邊框

padding：內(nèi)邊距，清除內(nèi)容周圍區(qū)域，透明；內(nèi)容和盒子邊緣之間

padding會撐開盒子，此時：盒子寬度=左邊框+左padding+內(nèi)容寬度+右padding+右邊框

傳統(tǒng)盒子模型寬度計算：

盒子寬度=width+border+padding

不會撐開盒子的情況（塊級元素）：

如果子盒子無設(shè)置寬度，子盒子寬度=父盒子的寬度，此時設(shè)置padding，border，不會撐大子盒子

解決方法：

1.手動內(nèi)減

缺點:計算量大

2.自動內(nèi)減

設(shè)置屬性box-sizing:border-box;

優(yōu)點:瀏覽器會自動計算多余大小，自動在內(nèi)容中減去

box-sizing：

屬性定義如何計算一個元素的總寬度和總高度，主要設(shè)置是否需要加上內(nèi)邊距(padding)和邊框等。

語法為box-sizing：content-box/border-box/inherit

content-box：標(biāo)準盒子模型：?width?與?height?只包括內(nèi)容的寬和高，不包括邊框（border），內(nèi)邊距（padding），外邊距（margin）。設(shè)置 border、padding 會增加元素 width與 height 的尺寸。（width/height改變）邊框和內(nèi)邊距都會被增加到最后繪制出來的元素寬度（width）中。

width=內(nèi)容寬度

border-box：?width?和?height?屬性包括內(nèi)容，內(nèi)邊距和邊框，但不包括外邊距。（內(nèi)容寬度改變），元素內(nèi)邊距和邊框都將在已設(shè)定的寬度內(nèi)。

width = border + padding + 內(nèi)容寬度

inherit：繼承父元素的box-sizing

CSS 盒子模型 | 菜鳥教程

box-sizing - CSS（層疊樣式表） | MDN

margin：外邊距，清除邊框外區(qū)域，透明；兩個盒子之間

-left(水平方向)：當(dāng)前盒子右移；-right（水平方向）:右邊盒子右移

-top(垂直方向)：當(dāng)前盒子下移；-bottom（垂直方向）：下面盒子下移

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

*{margin:0;padding:0; }

外邊距折疊現(xiàn)象（合并）

水平布局盒子，左右margin正常，盒子間距離為左右margin之和

垂直布局的塊級元素：上下margin會合并，盒子間距離為margin的最大值。

解決方法：

只給其中一個盒子設(shè)置margin

外邊距折疊現(xiàn)象（塌陷）

嵌套的塊級元素，子元素margin-top會作用在父元素上，導(dǎo)致父元素一起往下移動。

解決方法：

1.父設(shè)置border-top/padding? ? ?-> 分隔父子的margin-top

2.父設(shè)置overflow:hidden;

3.轉(zhuǎn)換成行內(nèi)塊元素display:inline-block;

4.設(shè)置浮動

行內(nèi)元素的margin，padding無效

1.水平方向布局有效

2.垂直方向無效，可用line-height

9.元素顯示模式

1.塊級元素（可獨塊）block

獨占一行；寬度：父元素寬度（默認）；高度：由內(nèi)容撐開（默認）；可設(shè)置寬高

hx（x=1~6），div , p , ul li , dl dt dd , form , header ,? nav ,? footer

2.行內(nèi)元素（不可多行）inline

一行顯多個，不換行；寬度由內(nèi)容撐開；不可設(shè)寬高；（水平方向）padding和margin可以設(shè)置

a ， span ，b ， u ， i ， s ， strong ， ins ， em ，del

3.行內(nèi)塊元素（可多行內(nèi)塊）inline-block

一行多個（中間存在間隙）；可設(shè)寬高

input ， textarea? ， button? ，select

10.display的屬性值及其作用

none:是指元素不會顯示，已脫離文檔流。

block:默認寬度為父元素寬度，可設(shè)置寬高，換行顯示。? ?

table:元素作為塊級表格顯示。換行顯示。

inline:默認寬度為內(nèi)容寬度，不可設(shè)置寬高，不換行。

inline-table:元素作為行內(nèi)表格顯示。不換行。

inline- block:是指默認寬度為內(nèi)容寬度，可以設(shè)置寬高，不換行。

list-item:像塊類型元素一樣顯示，并添加樣式列表標(biāo)記。

table-cell:元素作為表格單元格顯示。

inherit:從父元素繼承 display屬性的值。

12.傳統(tǒng)網(wǎng)頁布局的三種方式

1.標(biāo)準流

2.浮動

3.定位

13.標(biāo)準流

瀏覽器在渲染顯示網(wǎng)頁內(nèi)容時，默認采用的一套排版規(guī)則，規(guī)定了應(yīng)該以何種方式排列元素

常見規(guī)則：

1. 塊級元素：從上到下，垂直布局，獨占一行（縱向排列）。

2. 行內(nèi)/行內(nèi)塊元素：按照順序，從左到右排列，水平布局，空間不夠自動折行。

14.浮動

很多布局效果，標(biāo)準流無法完成，此時就可以利用浮動完成布局。

因為浮動可以改變元素標(biāo)簽?zāi)J的排列方式。

1.浮動最典型應(yīng)用：

1.可以讓多個塊級元素一行內(nèi)排列顯示（橫行排列）。

2.解決行內(nèi)塊問題（標(biāo)簽換行書寫，會產(chǎn)生一個空格的距離）

讓垂直布局的盒子變成水平布局！！！

2.浮動特點

1.脫離標(biāo)準流，在標(biāo)準流中不占位置

• 脫離標(biāo)準流的控制，移動到指定位置

2.浮動高于標(biāo)準流半個級別，可覆蓋標(biāo)準流中的元素

• 浮動的盒子不再保留原先的位置，其他盒子會占據(jù)他原先的位置，而出現(xiàn)兩個盒子層疊的效果（浮動盒子懸浮在其他盒子表面）。

3.浮動找浮動，下一個在上一個后面左右浮動

• 如果多個盒子都設(shè)置的浮動，則他們會按照屬性值一行內(nèi)顯示并且頂端對齊排列。
• 浮動元素相互貼靠在一起，沒有縫隙，如果父級元素寬度裝不下浮動盒子，多出的盒子會另起一行對齊。

4.浮動具有行內(nèi)塊特性

• 添加浮動后的標(biāo)簽，都具有行內(nèi)塊元素特點。
• 一行可多個，可設(shè)置寬高。

注：浮動不可通過以下方式，讓盒子水平居中

text-align:center;margin:0 auto;

3.清除浮動

影響：

如果子元素浮動了，此時子元素不可撐開標(biāo)準流的塊級父元素；因為子元素浮動后脫標(biāo)，不占位置，需要父級由高度，從而不影響其他網(wǎng)頁元素的布局。

父子級做標(biāo)簽，子級浮動，父級無高度，后面的標(biāo)準流盒子受影響，會往上移，到父級位置。

清除浮動的本質(zhì)

• 清除浮動元素造成的影響
• 如果父盒子本身有高度，則不需要清除浮動
• 清除浮動之后，父級就會根據(jù)浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標(biāo)準流。

清除浮動方法

1.直接設(shè)置父高度

• 優(yōu)點：簡便
• 缺點：有些布局不可固定父級高度

2.額外標(biāo)簽法（清除左右兩側(cè)浮動的影響）

• 父內(nèi)容的最后添加一個塊級元素（空標(biāo)簽）；給添加的塊級元素設(shè)置clear: both；
• 優(yōu)點：通俗易懂，書寫方便
• 缺點：添加額外的標(biāo)簽，讓頁面HTML結(jié)構(gòu)變復(fù)雜。

3.單偽元素消除法

• 用偽元素（行內(nèi)變成塊）代替額外標(biāo)簽，給父級添加元素clearfix
• 優(yōu)點：直接給標(biāo)簽加類
• 缺點：需要注意低版本瀏覽器

.clearfix:after{content: "";display: block;clear: both; /* 在網(wǎng)頁中看不見偽元素 */ /* IE7、8 */height: 0;visibility: hidden; } .clearfix{*zoom: 1; /* IE6、7 */ }

4.雙偽元素消除法

• 給父級添加元素clearfix，解決浮動和外邊距塌陷問題（父子級都是塊，子級加margin會影響父級位置）。
• 優(yōu)缺點同上

/* 讓元素按table樣式渲染，添加一個表格樣式 */ .clearfix:befor, .clearfix:after{content: "";display: table; }/* 真正清除浮動的標(biāo)簽 */ .clearfix:after{clear: both; } .clearfix:{*zoom: 1; /* IE6、7專有 */ }

5.給父元素設(shè)置overflow屬性

• 屬性值可以設(shè)置為hidden、auto或者scroll
• 優(yōu)點：代碼簡潔，書寫方便
• 缺點：無法顯示溢出部分

CSS傳統(tǒng)網(wǎng)頁布局之標(biāo)準流、浮動（float） 及 清除浮動方法 - 灰信網(wǎng)（軟件開發(fā)博客聚合）

15.塊格式化上下文（Block Formatting Context）：BFC

是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的區(qū)域，也是浮動元素與其他元素的交互限定區(qū)域。

創(chuàng)建BFC方法： ? ?
?1.根元素 （HTML標(biāo)簽）? ??
?2.浮動元素：float的值不為none? ? （浮動元素 float ＝ left | right | inherit）
?3.overflow的值除了visible? （auto、scroll或hidden）
?4.塊級容器：display的值為: inline-block | flex | inline-flex | table-cell |?table-caption? | inline-table | grid | inline-grid
?5.定位元素:position的值為:fixed | absolute

BFC特點： ? ?
?1.內(nèi)部的塊級元素會在垂直方向上一個接一個的排列； ?

?2.內(nèi)部的塊級元素垂直方向上的距離由margin決定。位于同一BFC下的相鄰塊級子元素，會上下margin重疊（垂直方向）； 位于不同BFC下的相鄰元素之間，不會發(fā)生margin重疊，而是兩者之和； ? ?

?4.BFC可以包含浮動元素，默認包裹內(nèi)部子元素（標(biāo)準流，浮動），計算BFC的高度時，浮動子元素也參與計算；->可以清除浮動； ? ?

?5.BFC是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素；（是一個獨立的布局（盒子），盒子里面的子元素不會影響外面的元素）

?6.BFC的區(qū)域不會與浮動（float）的元素區(qū)域重疊，不會與浮動盒子產(chǎn)生交集，而是緊貼浮動邊緣。

用途： ? ?

1.不被浮動元素覆蓋?

自適應(yīng)兩欄布局：左邊固定寬度，右邊不設(shè)寬（寬度自適應(yīng)，隨瀏覽器窗口大小的變化而變化）

<div class="contain"><div class="column">1</div><div class="column">2</div></div> .column:nth-child(1) {float: left;width: 100px;height: 100px;background-color: rgb(127, 85, 211);}.column:last-child {overflow: hidden;/*創(chuàng)建bfc*/height: 100px;background-color: rgb(90, 134, 253);}

三欄布局：左右兩邊固定寬度，中間不設(shè)寬（寬度自適應(yīng)，隨瀏覽器的大小變化而變化）。

<div class="contain"><div class="column">1</div><div class="column">2</div><div class="column">3</div></div> /* 三個一樣寬度的盒子 */ .column {width: 31%;height: 100px;background-color: rgb(77, 73, 213);float: left;margin: 0 1%;}.column:last-child {float: none;/*創(chuàng)建bfc*/overflow: hidden;}/* 左右固定，中間自適應(yīng) */.column:nth-child(-n+2) {float: left;width: 100px;height: 100px;background-color: rgb(127, 85, 211);}.column:nth-child(2) {float: right;}.column:last-child {overflow: hidden;/*創(chuàng)建bfc*/height: 100px;background-color: rgb(90, 134, 253);}

防止字體環(huán)繞：浮動的盒子會遮蓋下面的盒子（下面盒子里的文字是不被遮蓋），文字環(huán)繞浮動的盒子。（一個盒子浮動，另一個不浮動，導(dǎo)致不浮動盒子在浮動盒子的下方，覆蓋一部分內(nèi)容（除了文字不被覆蓋））。

<div class="contain"><div class="column"></div><div class="column">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div> .contain {width: 200px;}.column:nth-child(1) {float: left;width: 100px;height: 100px;background-color: rgb(127, 85, 211);}.column:last-child {height: 150px;background-color: rgb(90, 134, 253);}

創(chuàng)建BFC后

.column:last-child {/*創(chuàng)建bfc*/overflow: hidden;}

?2.清除元素內(nèi)部浮動

?父元素設(shè)置為BFC，可以清除子元素的浮動（清除設(shè)置浮動后給別的元素帶來的影響）

?左右子元素都浮動時（且子元素都設(shè)置了高度）。但是父元素的高度為0，

.column:nth-child(1) {float: left;width: 100px;height: 100px;background-color: rgb(127, 85, 211);}.column:last-child {float: left;width: 100px;height: 100px;background-color: rgb(90, 134, 253);}

?通過給父元素設(shè)置為BFC，可以清除子元素的浮動帶來的影響

.contain {/*創(chuàng)建bfc*/overflow: hidden;}

?3.解決外邊距折疊問題

同一BFC的塊級元素之間發(fā)生外邊距折疊，可以通過創(chuàng)建一個新的BFC我們可以防止外邊距折疊。

<div class="contain"><div class="column">1</div><div class="column">2</div> </div> /* 2個div標(biāo)簽都是屬于同一個BFC */ .contain {/*創(chuàng)建bfc*/overflow: hidden;background-color: pink;}.column {width: 100px;height: 100px;background-color: rgb(127, 85, 211);margin: 10px 0;}

兩個兄弟元素之間的邊距應(yīng)該是來兩個元素的邊距之和（20px），但它實際上為10px。（外邊距折疊）

?創(chuàng)建一個新的BFC

<div class="contain"><div class="column">1</div><div class="new"><div class="column">2</div></div></div> .new {overflow: hidden;}

理解CSS中BFC_CSS, BFC 教程_W3cplus

CSS中的BFC是什么？怎么用？_webchang的博客-CSDN博客_bfc css

第二階段

1.定位

可以讓元素自由擺動，在網(wǎng)頁任意位置，一般用于盒子之間的層疊（定位后元素層級高，可以重疊在層級低的盒子上），也可以讓盒子始終固定在屏幕中的某一位置。

浮動布局雖然靈活，但是卻無法對元素進行精準定位。

定位用于定義元素以哪種方式進行定位，并不能確定元素的具體位置；還需要通過邊偏移屬性top,bottom，left或right來精確定位元素的位置。（其偏移量是相對于父元素的）

1.定位方式（left/right/top/bottom，離哪邊近用哪個）：

static（靜態(tài)定位）=標(biāo)準流：
默認位置，不可用方位屬性進行移動（top，right，bottom，left和z-index屬性不可用）。

相對的定位位置：元素出現(xiàn)在正常的文檔流中。

relative（相對定位）：
元素的位置相對于自己之前的位置移動，在頁面中占位置（未脫標(biāo)）。

相對的定位位置：相對于自己所在文檔流中的位置進行定位。

absolute（絕對定位）：
相對于非靜態(tài)定位的父元素，進行定位移動。在頁面中不占位置（已脫標(biāo)）

相對的定位位置：父級已定位，以父級為參照物進行定位；父級未定位，以瀏覽器窗口為參照進行定位。

相對于誰移動：祖先元素中無定位，相對于瀏覽器移動。祖先元素中有定位，相對于最近，有定位的祖先元素進行定位。

子絕父相：

• 子元素相對于父元素進行自由移動，
• 優(yōu)點：父元素時相對定位，則對網(wǎng)頁布局影響最小。
• 如果父已絕了，此時直接絕子；如果更改父，可能會影響之前寫好的布局。

?fixed（固定定位）：
將元素從頁面流中移除，并將其放置在相對于視口的指定位置，并且在滾動時不會移動。在頁面中不占位置（已脫標(biāo)）

相對的定位位置：相對于瀏覽器進行定位移動。

sticky（粘性定位）：
?relative與 fixed的結(jié)合。(吸頂效果)

• 以瀏覽器的可視窗口為參照點移動元素（固定定位）

• 粘性定位占有原先的位置（相對定位）

• 必須添加 top 、left、right、bottom 其中一個才有效

• sticky元素僅在其父元素內(nèi)生效，父元素的高度不能低于sticky元素的高度

• 父元素為overflow:hidden時，由于容器內(nèi)無法滾動

如果頁面滾動未超過目標(biāo)區(qū)域，表現(xiàn)為 relative；如果頁面滾動超出目標(biāo)區(qū)域，表現(xiàn)為fixed,固定到適當(dāng)位置。

2.請說明 position:absolute和float屬性的異同。

共同點:

對內(nèi)聯(lián)元素設(shè)置float和 absolute屬性，可以讓元素脫離文檔流，并且可以設(shè)置其寬高。

不同點

float：

仍可占據(jù)位置，該元素浮動在另外一個有文字內(nèi)容的元素上時，文字內(nèi)容并不會被浮動的元素覆蓋，而是環(huán)繞在周圍。（使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內(nèi)的文本依然會為這個元素讓出位置，環(huán)繞在周圍）

absolute：

會覆蓋文檔流中的其他元素（遮蓋現(xiàn)象）。

2.層級問題

設(shè)置元素的堆疊順序。層級高的元素總是會處于層級低的元素上面。

標(biāo)準流<浮動<定位? ?；相對=絕對=固定? ? ?；修改定位元素的層級，需配合定位才生效

z-index:

• auto——(默認)堆疊順序與父元素相等。
• number——設(shè)置元素的堆疊順序（數(shù)字越大，層級越高）
• inherit——從父元素繼承 z-index 屬性的值

設(shè)置z-index: 0;z-index: auto，在同一層級內(nèi)沒有高低之分，文檔流中，后出現(xiàn)的會覆蓋先出現(xiàn)的。

注：z-index:0會創(chuàng)建層疊上下文，z-index:auto不會創(chuàng)建層疊上下文（在層疊上下文的層次結(jié)構(gòu)中，沒有創(chuàng)建層疊上下文的元素同其父級處于一個層疊上下文。）。

層疊上下文：

• 是HTML中一個三維的概念。表示元素在z軸上的堆疊順序（元素的層疊上下文、層疊等級共同決定）。

?層疊上下文(stacking context)，是HTML中一個三維的概念。在CSS2.1規(guī)范中，每個盒模型的位置是三維的，分別是平面畫布上的X軸，Y軸以及表示層疊的Z軸。一般情況下，元素在頁面上沿X軸Y軸平鋪，我們察覺不到它們在Z軸上的層疊關(guān)系。而一旦元素發(fā)生堆疊，這時就能發(fā)現(xiàn)某個元素可能覆蓋了另一個元素或者被另一個元素覆蓋。

?通元素設(shè)置position屬性為非static值并設(shè)置z-index屬性為具體數(shù)值，產(chǎn)生層疊上下文。

創(chuàng)建一個新的層疊上下文（元素具備以下任何一個條件）：

• 文檔根元素（<html>）
• position:absolute/relative且z-index不為auto的元素
• position:flex/sticky的元素（sticky適配所有移動設(shè)備上的瀏覽器，但老的桌面瀏覽器不支持）
• display：flex|grid容器的子元素且z-index值不為auto
• 元素的opacity屬性值不為1
• mix-blend-mode屬性值不為normal
• 以下任意屬性值不為none的元素：transform；filter；clip-path；mask
• 元素的isolation屬性值為isolate
• will-change值設(shè)定了任一屬性而該屬性在 non-initial 值時會創(chuàng)建層疊上下文的元素

層疊等級：

• 在同一個層疊上下文中，它描述定義的是該層疊上下文中的層疊上下文元素在Z軸上的上下順序。
• 在其他普通元素中，它描述定義的是這些普通元素在Z軸上的上下順序。

層疊順序：

從低到高排列：

background/border邊框和背景：當(dāng)前層疊上下文的邊框和背景
z-index<0：z-index為負值的“內(nèi)部元素”
block塊級水平盒子：普通文檔流下的塊盒子（block-levelbox）
float浮動盒子：非定位的浮動元素
inline/inline-block水平盒子：普通文檔流下的行內(nèi)盒子
z-index:0/z-index:auto：z-index:auto不會創(chuàng)建層疊上下文
z-index>0：x-index為正值的“內(nèi)部元素”

判斷層疊順序：

1、首先先看要比較的兩個元素是否處于同一個層疊上下文中： ? ? ?

1.1如果是，誰的層疊等級大，誰在上面

1.2如果兩個元素不在統(tǒng)一層疊上下文中，請先比較他們所處的層疊上下文的層疊等級。

2、當(dāng)兩個元素層疊等級相同、層疊順序相同時，在DOM結(jié)構(gòu)中后面的元素層疊等級在前面元素之上。

徹底搞懂CSS層疊上下文、層疊等級、層疊順序、z-index_IT新時代的博客-CSDN博客_層疊上下文

css中z?index:(0和z?index:,auto的區(qū)別)_久久派

3.基線（base line）

基線并不是漢字文字的下端沿，而是英文字母“x”的下端沿；行內(nèi)含有圖片和文字，在瀏覽器渲染出來后，文字和圖片在垂直方向并不是沿中線居中，而是沿基線對齊。

垂直對齊：vertical-align（解決行內(nèi)/行內(nèi)塊垂直對齊問題）

可以解決：

文本框，表單按鈕無法對齊問題；input，img無法對齊問題；div中的文本框，無法貼頂問題；div不設(shè)高度，由img撐開，此時img下會存在額外間隙問題；使用line-height讓img垂直居中問題。

不推薦使用行內(nèi)塊讓div一行顯示，因為可能會出現(xiàn)垂直對齊問題，推薦優(yōu)先用浮動完成。

4.border-radius

畫正圓：盒子必須是正方形；設(shè)置邊框圓角為盒子寬度的一半

border-radius:50%

畫膠囊按鈕：盒子要求是長方形，設(shè)置邊框圓角為盒子高度的一半

border-radius：2/height

5.文本溢出處理

1.溢出屬性

overflow盒子內(nèi)部部分所超過盒子范圍的區(qū)域，控制內(nèi)容溢出部分的顯示效果。

• visible；（默認）溢出部分可見。??
• hidden；溢出部分隱藏。??
• scroll；溢出部分滾動條顯示。??
• auto；溢出部分瀏覽器自動處理（超出顯示，不超出不顯示）

2.空白屬性

white-space：用來社遏制如何處理元素內(nèi)部的空白

• normal：默認值，空白會被瀏覽器忽略
• nowwrap：文本不會換行，文本會在同一行上繼續(xù)，直到遇到標(biāo)簽為止
• pre：空白會被瀏覽器保留，其行為方式類似HTML中的pre標(biāo)簽；
• pre-wrap：保留空白序列，但是保留換行符
• inherit：規(guī)定應(yīng)該從父元素繼承white-space屬性值；（ie瀏覽器不支持此屬性）?

3.省略號屬性

text-overflow：文本溢出時是否顯示省略標(biāo)記

• clip：不顯示省略號（...），剪切超出部分；
• ellipsis：顯示省略符號代替超出部分；

單行文本溢出

.one{/* 規(guī)定寬度范圍 */width: 100px;/* 溢出部分隱藏 */overflow: hidden;/* 顯示省略符號 */text-overflow: ellipsis;/* 文字不換行 */white-space: nowrap;// }

多行文本溢出

.more{/* 規(guī)定寬度范圍 */width: 100px;/* 溢出部分隱藏 */overflow: hidden;/* 顯示省略符號 */text-overflow: ellipsis;/* 必須結(jié)合的屬性，將對象作為彈性伸縮盒子模型顯示 */display: -webkit-box;/* 控制文本的行數(shù)，需要顯示幾行就寫幾行 */-webkit-line-clamp:4;/* 必須結(jié)合的屬性，設(shè)置或檢索伸縮盒對象的子元素的排列方式 */-webkit-box-orient:vertical; }

6.元素本身隱藏

讓某些元素本身在屏幕中不可見。

常用屬性：

visibility:hidden;? ?占位置，隱藏元素本身（文檔流中仍保留原來的空間）。

display:none;? 不占位置，隱藏元素本身（文檔流中不再給它分配空間，它各邊的元素會合攏，即脫離文檔流）

display完成元素的顯示隱藏切換：

display:none;(隱藏)

display:block;(顯示)

rgba()和 opacity都能實現(xiàn)透明效果，但它們最大的不同是 opacity作用于元素，并且可以設(shè)置元素內(nèi)所有內(nèi)容的透明度；而 rgba()只作用于元素的顏色或其背景色（設(shè)置rgba透明的元素的子元素不會繼承透明效果）。

DOM元素不顯示在瀏覽器可視范圍內(nèi)？

最基本的方式如下。

設(shè)置 display屬性為none，或者設(shè)置 visibility屬性為 hidden技巧性的方式如下。

設(shè)置寬高為0，透明度為0，設(shè)置z- index位置為-1000。

59、說說 display:none和 visibility:hidden的區(qū)別。

display:none隱藏對應(yīng)的元素，在文檔布局中不再給它分配空間，它各邊的元素會合攏，就當(dāng)它從來都不存在。

visibility:hidden隱藏對應(yīng)的元素，但是在文檔布局中仍保留原來的空間。

1.把元素放在了屏幕看不到的位置

{
?? ?position:absolute;
?? ?top:-999px;
?? ?left:-999px;
}
?

2.display:none（元素消失且不占據(jù)位置）
3.visibility:hidden（元素消失但是占據(jù)位置）
4.opacity:0（元素透明）
5.transform:rotate(90deg)，將二維圖像旋轉(zhuǎn)90度呈現(xiàn)出消失的樣子。

7 display:none與visibility：hidden的區(qū)別？

• display：none 不顯示對應(yīng)的元素，在文檔布局中不再分配空間（回流+重繪）
• visibility：hidden 隱藏對應(yīng)元素，在文檔布局中仍保留原來的空間（重繪）

元素整體透明度，讓某元素整體（包括內(nèi)容）一起變透明

opcity:0-1(0:完全透明；1:完全不透明)

邊框合并：相鄰表格邊框合并，細線邊框效果，border-collapse:collapse;

7.用CSS畫三角形技巧

利用盒子邊框完成

步驟：

設(shè)置一個盒子；設(shè)置四周不同顏色的邊框；將盒子寬高設(shè)置為0，僅保留邊框；得到四個三角形，選其中一個，其余3個三角形（邊框）設(shè)置顏色：透明。

8.精靈圖標(biāo)簽

多張小圖合并成一張大圖，減少服務(wù)器發(fā)送次數(shù)，減輕服務(wù)器的壓力，提高頁面加載速度

CSS Sprite其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“ background- image"“ background- repeat”“ background- position”的組合進行背景定位， background- position可以用數(shù)字精確地定位出背景圖片的位置。

注意：在高級瀏覽器中，可以基于圖片的bose64編碼存儲，將圖片與其他類型的文件打包。

9.背景圖片大小

background-size:

數(shù)字+px：簡單方便

百分比：相對于當(dāng)前盒子自身的寬高百分比

contain：包含背景圖片等比例縮放，直到不會超過盒子的最大范圍。如果圖的寬/高與盒子的尺寸相同，另一個方向縮放，導(dǎo)致盒子可能留白

cover：覆蓋背景圖片等比例縮放，直到剛好填滿整個盒子無空白。如果圖的寬/高與盒子的尺寸相同，導(dǎo)致圖片顯示不全

10.陰影

文字陰影：

text-shadow：

• h-shadow：必須寫，允許負值（水平偏移量）
• v-shadow：必須寫，允許負值（垂直偏移量）
• blur：可選（模糊度）
• color：可選（陰影顏色）

盒子陰影：

box-shadow：

• h-shadow：必須寫，允許負值（水平偏移量）
• v-shadow：必須寫，允許負值（垂直偏移量）
• blur：可選（模糊度）
• color：可選（陰影顏色）
• spread：可選（陰影擴大）
• inset（陰影改為內(nèi)陰影）->外陰影不能改（默認值）

11.過渡

讓元素樣式慢慢變化，常配合hover使用，增強網(wǎng)頁交互體驗

transition：

all(所有能過渡的都的過渡)/具體屬性名(width:只有width才有過渡)? ? ? ? ? 時長(數(shù)字+s(秒))

注意：

過渡默認狀態(tài)與hover狀態(tài)不同，才可以；transition加在需要過渡的本身元素上；

不同狀態(tài)效果不同：給默認狀態(tài)設(shè)置，鼠標(biāo)移入移出都有過渡效果；給hover狀態(tài)設(shè)置，鼠標(biāo)移入移出有，移出沒有效果。

12.SEO（搜索引擎優(yōu)化）

（讓網(wǎng)站在搜索引擎上的排名靠前）為了提升網(wǎng)站在搜索引擎中的權(quán)重，增加對搜索引擎的友好度，使得用戶在訪問網(wǎng)站時能排在前面。

提升方法：

競價排名；將網(wǎng)頁制作成HTML后綴；標(biāo)簽語義化（合適的地方使用合適的標(biāo)簽）

三大標(biāo)簽：

title：網(wǎng)頁標(biāo)題標(biāo)簽；description：網(wǎng)頁描述標(biāo)簽；keywords：網(wǎng)頁關(guān)鍵詞標(biāo)簽。

網(wǎng)頁代碼優(yōu)化

• 合理的title、description、keywords：title值強調(diào)重點；description頁面內(nèi)容高度概括，不可過分堆砌關(guān)鍵詞；keywords列舉出幾個頁面重要關(guān)鍵詞，不可過分堆砌。
• 語義化書寫HTML代碼，符合W3C規(guī)范：語義化代碼讓搜索引擎容易理解網(wǎng)頁，一目了然。
• 超鏈接設(shè)置鏈接：頁內(nèi)鏈接，要加上“title”屬性加以說明，讓訪客和“蜘蛛”了解鏈接的用途。
• img應(yīng)該使用alt屬性進行說明：當(dāng)網(wǎng)絡(luò)速度很慢，或者圖片地址失效，圖片無法正常顯示時時，alt可以讓用戶知道當(dāng)前位置圖片的作用。同時應(yīng)當(dāng)為圖片設(shè)置恰當(dāng)?shù)膶捀?#xff0c;提高頁面加載速度。或者使用占位圖進行懶加載操作。
• 重要內(nèi)容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，保證重要內(nèi)容一定會被抓取。
• 重要內(nèi)容不用js輸出：因為蜘蛛不會讀取js的內(nèi)容，所以重要內(nèi)容必須放在HTML中。
• 少用iframe框架：搜索引擎不會抓取iframe中的內(nèi)容
• 不斷精簡代碼，降低相同代碼的重復(fù)次數(shù)，刪除累贅代碼。
• 加粗，強調(diào)標(biāo)簽 : 需要強調(diào)時使用。

SEO是什么？前端如何進行SEO優(yōu)化_萬物之戀的博客-CSDN博客_前端seo

網(wǎng)站性能優(yōu)化（如何對網(wǎng)站的文件和資源進行優(yōu)化）

• 減少 http請求:

在瀏覽器與服務(wù)器進行通信時，主要是通過HTTP。瀏覽器需要與服務(wù)器進行三次握手，每次握手需要花費大量的時間。而且不同的瀏覽器對資源文件的并發(fā)請求數(shù)量存在限制（不同瀏覽器允許的并發(fā)數(shù)不同）。一旦http的請求次數(shù)到達限制，資源的請求就存在等待狀態(tài)，會導(dǎo)致網(wǎng)頁的很長的時間內(nèi)無法正常展示。因此減少http的請求數(shù)量可以很大程度上對網(wǎng)站性能進行優(yōu)化。(網(wǎng)頁的HTTP請求越多，加載就越慢)

2.CSS sprite （使用精靈圖）
將多張圖片合并成一張。可以通過CSS的background屬性來展現(xiàn)圖片不同區(qū)域不同的內(nèi)容。這種方式同時還能減少圖片總字節(jié)數(shù)。
3.合并CSS和JS文件
打包工具：gulp，grunt，webpack等。可以通過這些工具在發(fā)布前將多個CSS或者多個JS合并成一個文件，也能減少HTTP請求。(將所有腳本合并到一個腳本中)
4.采用 layzload（懶加載）
可以控制網(wǎng)頁上非初始展示的內(nèi)容部分在一開始無需加載，不發(fā)送請求，等到用戶真正操作，真正需要的時候立即加載出內(nèi)容，這樣就控制了網(wǎng)頁資源一次性請求的數(shù)量。

5.使用sessionStorage API和localStorage API將數(shù)據(jù)存儲到瀏覽器中。

6.減少重定向
盡量避免使?重定向，當(dāng)頁?發(fā)?了重定向，就會延遲整個HTML?檔的傳輸。在HTML?檔到達之前，頁?中不會呈現(xiàn)任何東西，也沒有任何組件會被下載，降低了?戶體驗。
如果?定要使?重定向的話，如http重定向到https，要使?301永久重定向，?不是302臨時重定向，因為如果使?302則每?次訪問http都會重定向到https頁?，?永久重定向在第?次從http重定向到https之后，每次訪問http，會直接返回https的頁?。

7.Base64
將圖?的內(nèi)容以Base64格式內(nèi)嵌到HTML中，可以減少http請求數(shù)量，但是編碼之后的???圖??了。

8.精簡和優(yōu)化css和js

從HTML、JavaScript和CSS中刪除不必要的、不需要加載的字符，如空白字符、換行字符、注釋和塊分隔符。加快加載時間，因為它減少了必須從服務(wù)器請求的代碼量。

• 控制資源文件加載優(yōu)先級：

瀏覽器在加載HTML內(nèi)容時，是將HTML內(nèi)容從上至下依次解析，解析到link 或者script 標(biāo)簽就會加載href或者src對應(yīng)鏈接內(nèi)容。為了第一時間將頁面展現(xiàn)給用戶，就需要將CSS提前加載，不要受 JS加載的影響。

• 盡量將 CSS，JS分離出HTML

使用外鏈進行加載（結(jié)構(gòu)，表現(xiàn)，行為層的分離），保證網(wǎng)頁代碼的整潔，也利于維護。

• 利用瀏覽器緩存

瀏覽器緩存是將網(wǎng)絡(luò)資源存儲在本地，等待下次請求該資源時，如果資源已經(jīng)存在就不需要到服務(wù)器進行重新請求，直接在本地讀取調(diào)用。

• 減少重排（Reflow）

原理：重排是DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器會重新計算元素的幾何屬性，會導(dǎo)致渲染樹中受到影響的部分失效，瀏覽器會驗證DOM樹上所有其它節(jié)點的 visibility屬性，這也是Reflow低效的原因。如果Reflow過于頻繁，CPU的使用率就會急劇上升。
減少Reflow的重要操作，就是在通過JS操作DOM樣式時，盡量采用增減class類名的方式，而不是直接通過style操作樣式。

• 減少DOM操作
• 圖片圖標(biāo)使用iconfont替換
• 不使用CSS表達式，會影響效率

• 使用內(nèi)容分發(fā)網(wǎng)絡(luò) (CDN)

內(nèi)容交付網(wǎng)絡(luò)是一組分布在不同地理位置的web服務(wù)器，它們根據(jù)終端用戶的位置向其提供web內(nèi)容。

當(dāng)您將網(wǎng)站托管在單個服務(wù)器上時，所有用戶請求都被發(fā)送到相同的硬件。由于這個原因，處理每個請求所需的時間增加了。最重要的是，當(dāng)用戶在物理上遠離服務(wù)器時，加載時間會增加。

使用CDN，用戶請求被重定向到最近的服務(wù)器。因此，內(nèi)容可以更快地傳遞給用戶，網(wǎng)站運行速度也會更快。這是一種相當(dāng)昂貴但非常有效的優(yōu)化加載時間的方法。

使用CDN網(wǎng)絡(luò)緩存，加快用戶訪問速度，減輕服務(wù)器壓力

• 啟用GZIP壓縮，加快瀏覽速度，搜索引擎的蜘蛛抓取信息量也會增大

前端性能優(yōu)化的七種方法 - 百度文庫

網(wǎng)站前端性能優(yōu)化終極指南_程序員石磊的博客-CSDN博客

14.

了解重繪和重排，怎么減少重繪和重排
repaint:就是當(dāng)各種盒子屬性(大小，顏色。。。)都確定下來后，瀏覽器便把這些元素都按照各自的特性繪制一遍，于是頁面的內(nèi)容出現(xiàn)了的過程。
reflow:當(dāng)渲染樹中的一部分(或全部)因為元素的規(guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建, 這就稱為回流(reflow)。每個頁面至少需要一次回流，就是在頁面第一次加載的時候。
解決：在制作中考慮瀏覽器的性能，減少重排能夠節(jié)省瀏覽器對其子元素及父類元素的重新渲染；避免過分的重繪也能節(jié)省瀏覽器性能；優(yōu)化動畫，使用3D啟用GPU硬件加速；慎重選擇高消耗的樣式，如box-shadow、border-radius、transform、css filters等。
?

1、重繪

重繪是一個元素外觀的改變所觸發(fā)的瀏覽器行為（例如改變visibility，outline，background等屬性），瀏覽器會根據(jù)元素的新屬性重新繪制，使元素呈現(xiàn)新的外觀。

2、重排

重排時更明顯的一種改變，可以理解為渲染樹需要重新計算。常見的觸發(fā)重排的操作：

- DOM元素的幾何屬性變化
- DOM樹的結(jié)構(gòu)變化（例如節(jié)點的增減、移動）
- 獲取某些屬性（例如offsetTop，offsetLeft，offsetHeight，offsetWidth，clientWidth，clientHeight等）
- 改變元素的一些樣式（例如調(diào)整瀏覽器窗口大小）

3、兩者的區(qū)別

- 重繪不會帶來重新布局，并不一定伴隨著重排。
- 在實踐中，應(yīng)該盡量減少重排次數(shù)和縮小重排的影響范圍。有以下幾種方法：
- [ ] 將多次改變樣式屬性的操作合并成一次操作
- [ ] 將需要多次重排的元素，position屬性設(shè)為absolute或fixed，使其脫離文檔流，這樣它的變化就不會影響到其他元素
- [ ] 在內(nèi)存中多次操作節(jié)點，完成后再添加到文檔中去
- [ ] 如果要對一個元素進行復(fù)雜的操作，可以將其display屬性設(shè)置為none使其隱藏，待操作完成后再顯示
- [ ] 在需要經(jīng)常獲取那些引起瀏覽器重排的屬性值時，要緩存到變量

15.初始化樣式

場景：一般項目開始前，首先會去除掉瀏覽器默認樣式，設(shè)置為當(dāng)前項目需要的初始化樣式

原因：

• 瀏覽器差異 不同瀏覽器對有些標(biāo)簽的默認值是不同的，如果沒對css初始化會出現(xiàn)瀏覽器之間的頁面顯示差異，為了防止不同瀏覽器中標(biāo)簽?zāi)J樣式不同所帶來影響，統(tǒng)一不同瀏覽器的默認顯示效果，需要初始化樣式。
• 提高編碼質(zhì)量，減少重復(fù)代碼的出現(xiàn)。
• 瀏覽器的兼容性問題，可以通過初始化代碼來解決。

1.靜態(tài)布局：

傳統(tǒng)Web布局設(shè)計。網(wǎng)頁最外層容器(outer)有固定的大小,所有的內(nèi)容以該容器為標(biāo)準,超出寬高的部分用滾動條(overflow:scroll)來實現(xiàn)滾動查閱。 ? ? ?
?? ?優(yōu)點：無瀏覽器兼容性問題，布局簡單。 ? ? ?
?? ?缺點：但是移動端不可以使用pc端的頁面,兩個頁面的布局不一致,移動端需要自己另外設(shè)計一個布局并使用不同域名呈現(xiàn)。
?? ?

3.彈性布局：

在定義伸縮項目大小時伸縮容器會預(yù)留一些可用空間，讓你可以調(diào)節(jié)伸縮項目的相對大小和位置。

彈性布局是CSS3引入的強大的布局方式，彈性盒模型：display：flex； ? ??
?? ?優(yōu)點：簡單、方便、快速 移動端友好? ??
?? ?缺點：CSS3新特性,ie8以下不兼容。

2.流式布局：

流式布局也叫百分比布局。隨著屏幕的改變，頁面的布局沒有發(fā)生大的變化，可以進行適配調(diào)整，這個正好與自適應(yīng)布局相補。 ? ??
?? ?優(yōu)點：元素的寬高用百分比做單位，元素寬高按屏幕分辨率調(diào)整，布局不發(fā)生變化。 ? ??
?? ?缺點：屏幕尺度跨度過大的情況下，頁面不能正常顯示。

?? ?

4.響應(yīng)式布局：

采用自適應(yīng)布局和流式布局的綜合方式，為不同屏幕分辨率范圍創(chuàng)建流式布局。利用媒體查詢可以檢測到屏幕的尺寸(主要檢測寬度)，并設(shè)置不同的CSS樣式，就可以實現(xiàn)響應(yīng)式的布局。一套代碼適應(yīng)pc和移動端，設(shè)置好幾個尺寸分別的樣式，根據(jù)頁面的寬度來改變樣式

7.常見的瀏覽器兼容
1.圖片默認有間距，解決：float為img布局
2.不同瀏覽器的標(biāo)簽?zāi)J外補丁margin和內(nèi)補丁padding不同，
解決：*通配符*{margin：0；padding：0}
3.li空白間距，解決：在li中的a標(biāo)簽添加寬度或高度
4.快標(biāo)簽屬性float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大，后面一塊會被頂?shù)较乱恍?#xff0c;解決：在float標(biāo)簽樣式中添加display：inline，將其轉(zhuǎn)化為行內(nèi)屬性

?

總結(jié)

以上是生活随笔為你收集整理的CSS基本知识总结（HTML+CSS）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。