HTML

1.網頁組成

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

2.網頁規范（W3C）

• 結構標準：制作網頁必須按照HTML的標準結構去寫網頁（用于對網頁元素進行整理和分類）
• 表現標準：用來美化網頁css
• 行為標準：用來實現網頁中的用戶的一些動作處理 Javascript

3.主流瀏覽器（有自己的內核）

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

內核（渲染引擎）

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

注意點：

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

4.為什么要遵循WEB標準

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

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

三個構成：

• 結構（HTML），頁面元素和內容
• 表現（CSS），網頁元素的外觀和位置等頁面樣式（如：顏色、大小等）
• 行為（Javascript），網頁模型的定義與頁面交互
• Web標準要求頁面實現：結構、表現、行為三層分離

5.HTML（Hyper Text Markup Language）超文本標記語言

主要通過HTML標簽對網頁中的文本、圖片、音頻、視頻等內容進行描述。

• HTML骨架結構由哪些標簽組成？
  • html標簽：網頁的整體
  • head標簽：網頁的頭部
  • body標簽：網頁的身體（主體）
  • title標簽：網頁的標題

6.DOCTYPE的作用

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

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

document.compatMode：

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

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

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

7.常見的標簽

1.標題標簽

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

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

注意點：h1標簽對于網頁尤為重要，開發中有特定的使用場景，如：新聞的標題、網頁的logo部分

2.段落標簽

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

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

3.換行標簽

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

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

4.水平線標簽

• 場景：分割不同主題內容的水平線
• 代碼：<hr>
• 語義：主題的分割轉換
• 特點：
  • 單標簽
  • 在頁面中顯示一條水平線

5.文本格式化標簽

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

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

?6.標簽語義化

語義：突出重要性的強調語境.

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

7.div span標簽(*)

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

div 就是 division 的縮寫 分割， 分區的意思 其實有很多div 來組合網頁。

span, 跨度，跨距；范圍

8.媒體標簽（img標簽）

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

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

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

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

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

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

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

9.路徑（*）

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

• 例如：
  • 盤符開頭：D:\images\1.jpg
  • 完整的網絡地址：www.baidu.com/img/1.jpg

相對路徑：當前文件：當前的html網頁，目標文件：要找到的圖片。相對路徑：從當前文件開始出發找目標文件的過程

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

10.超鏈接（*）

本質: 就是用來實現頁面跳轉。<a ?href="目標頁面路徑"></a>

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

錨鏈接

本質: 在當前頁面中跳轉. 網頁中的返回頂部效果<a href="#"></a>

"#": 返回當前頁面開始位置

?8.列表

?無序列表(unordered-list)

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

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

有序列表： (order-list)

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

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

自定義列表(defined-list)

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

• ? 一般在網頁的結尾處會使用該列表

CSS

1.HTML的局限性

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

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

CSS 樣式表或級聯樣式表。

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

HTML 主要做結構,顯示元素內容；CSS 美化 HTML ,布局網頁。CSS 最大價值: 由 HTML 專注去做結構呈現，樣式交給 CSS，即 結構 ( HTML ) 與樣式( CSS ) 相分離。

3.css語法規范

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

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

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

CSS有3種引入方式：

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

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

• 內嵌式:將樣式寫在 style元素內。（任意位置，通常寫在head標簽中）-->當前頁面中

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

• 外鏈式：通過link標簽，引入CSS文件內的樣式。（多個頁面）-->.css文件中

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

5.link和@ import的區別是什么？

1.加載資源的限制

link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務，如加載模板等；

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

2.加載方式

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

@import需要頁面網頁完全載入以后加載。（異步加載）

3.兼容性

link是XHTML標簽，無兼容問題；

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

4.改變樣式

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

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

6.給同一個標簽設置了相同的樣式，瀏覽器如何渲染？

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

7.CSS選擇器

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

基本標簽

是由單個選擇器組成的。

1.標簽選擇器（div）

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

2.類選擇器（ .className）

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

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

2.1多類名選擇器

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

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

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

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

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。

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

3.1id選擇器和類選擇器的區別：

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

4.通配符選擇器（*）

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

5.并集選擇器

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

6.交集選擇器

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

7.偽類選擇器

1.結構偽類選擇器

根據元素在HTML中的結構關系查找元素，減少對HTML中類的依賴，保持代碼整潔，常用于查找某父級選擇器中的子元素。

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

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

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

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

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

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

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

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

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

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

把光標點到input里，獲得焦點；把光標從input里拿出來，失去焦點。

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

鏈接偽類選擇器

常用于選中超鏈接的不同狀態

:link? ? ?：選中未訪問過的狀態

:hover? ?：選中鼠標懸停的狀態

:active? ? ：選中鼠標按下的狀態

:visited? ? ：選中訪問之后的狀態

8.偽元素選擇器

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

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

3.特別偽元素選擇器

一般頁面中的非主體內容。（偽元素：行內）

::before：在父元素內容的最前添加一個偽元素

::after：在父元素內容的最后添加一個偽元素

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

元素與偽元素區別：

元素：HTML設置的標簽

偽類：當已有元素處于的某個狀態時，為其添加對應的樣式，這個狀態是根據用戶行為而動態變化的。

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

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

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

由CSS模擬出的標簽效果,是文檔某個部分的表現（::before , ::after , ::first-letter , ::first-line , ::selecton ）

偽元素以類似方式表現，不過表現得是像你往標記文本中加入全新的 HTML 元素一樣，而不是向現有的元素上應用類。

偽類與偽元素的區別

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

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

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

偽類基于普通DOM元素?產?的不同狀態，是DOM元素的某?特征。

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

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

在CSS3規范中，用于區分偽元素和偽類，偽類用單冒號":"，偽元素用雙冒號"::"。

偽類和偽元素 - 學習 Web 開發 | MDN
偽類和偽元素的區別 · 王增輝的工作筆記 · 看云

9.屬性選擇器

通過元素上HTML選擇元素，常用于選擇input標簽。

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結尾的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" />

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

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

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

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

10.關系選擇器

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.字體相關屬性

1.字體大小font-size

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

2.字體粗細font-weight

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

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

3.字體樣式font-style

normal：顯示標準的字體樣式（默認值）；italic：斜體

4.字體font-family

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

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

5.字體綜合寫法 font

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

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

6.字體顏色color

開發中最常用的是十六進制

7.文本對齊text-align

用于設置元素內文本內容的水平對齊方式。

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

• 文本
• span標簽、a標簽
• input標簽、img標簽

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

8.修飾文本text-decoration

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

9.文本縮進

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

10.行高line-height

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

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

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

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

11.標簽水平居中方法總結 margin : 0 auto

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

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.元素設置寬高；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函數計算子級應當距離父級頂部的距離 */top: calc(50% - 100px);left: calc(50% - 100px);/* 文字居中 */text-align: center;line-height: 200px;}

CSS calc() 函數 | 菜鳥教程

未知寬高

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

7.CSS特性

1.繼承性（inherited）

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

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

應用場景：

ul設list-style:none;

body設font-size,統一不同瀏覽器默認文字大小。

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

a的color，h的font-size

2.層疊性：

同一標簽不同樣式，疊加，共同作用在標簽上；

同一標簽相同樣式，覆蓋，寫在最后的樣式生效。

注：樣式沖突時，只有當選擇器優先級相同時，菜鳥通過層疊性判斷。

3.優先級

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

!important>內聯（行內）樣式 > id?選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標簽選擇器 = 偽元素選擇器>通配符選擇器>繼承>瀏覽器默認屬性

注意：！importont井非選擇器，而是針對選擇器內的單一樣式設置的。當然，不同選擇器內應用 ！important的權重也是不一樣的，例如，在id選擇器內的！important關鍵字權重要高于類選擇器內的 ！important關鍵字權重，即下面所說的選擇器權重組合。

權重疊加計算（每一級之間不存在進位）

（0，0，0，0）（行內，id，類，標簽）（口訣：行內的類標簽）

權重計算步驟

1.繼承：是否能直接選中標簽，不能直接選中，則是繼承，優先級最小

2.權重公式，判斷誰權重最高。

8.css盒模型

margin、padding、border、content

content：盒子的內容，顯示文本圖像

border：邊框，圍繞在內邊框和內容外的邊框；邊框線

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

padding：內邊距，清除內容周圍區域，透明；內容和盒子邊緣之間

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

傳統盒子模型寬度計算：

盒子寬度=width+border+padding

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

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

解決方法：

1.手動內減

缺點:計算量大

2.自動內減

設置屬性box-sizing:border-box;

優點:瀏覽器會自動計算多余大小，自動在內容中減去

box-sizing：

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

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

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

width=內容寬度

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

width = border + padding + 內容寬度

inherit：繼承父元素的box-sizing

CSS 盒子模型 | 菜鳥教程

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

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

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

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

清除默認內外邊距

*{margin:0;padding:0; }

外邊距折疊現象（合并）

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

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

解決方法：

只給其中一個盒子設置margin

外邊距折疊現象（塌陷）

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

解決方法：

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

2.父設置overflow:hidden;

3.轉換成行內塊元素display:inline-block;

4.設置浮動

行內元素的margin，padding無效

1.水平方向布局有效

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

9.元素顯示模式

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

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

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

2.行內元素（不可多行）inline

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

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

3.行內塊元素（可多行內塊）inline-block

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

input ， textarea? ， button? ，select

10.display的屬性值及其作用

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

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

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

inline:默認寬度為內容寬度，不可設置寬高，不換行。

inline-table:元素作為行內表格顯示。不換行。

inline- block:是指默認寬度為內容寬度，可以設置寬高，不換行。

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

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

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

12.傳統網頁布局的三種方式

1.標準流

2.浮動

3.定位

13.標準流

瀏覽器在渲染顯示網頁內容時，默認采用的一套排版規則，規定了應該以何種方式排列元素

常見規則：

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

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

14.浮動

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

因為浮動可以改變元素標簽默認的排列方式。

1.浮動最典型應用：

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

2.解決行內塊問題（標簽換行書寫，會產生一個空格的距離）

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

2.浮動特點

1.脫離標準流，在標準流中不占位置

• 脫離標準流的控制，移動到指定位置

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

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

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

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

4.浮動具有行內塊特性

• 添加浮動后的標簽，都具有行內塊元素特點。
• 一行可多個，可設置寬高。

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

text-align:center;margin:0 auto;

3.清除浮動

影響：

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

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

清除浮動的本質

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

清除浮動方法

1.直接設置父高度

• 優點：簡便
• 缺點：有些布局不可固定父級高度

2.額外標簽法（清除左右兩側浮動的影響）

• 父內容的最后添加一個塊級元素（空標簽）；給添加的塊級元素設置clear: both；
• 優點：通俗易懂，書寫方便
• 缺點：添加額外的標簽，讓頁面HTML結構變復雜。

3.單偽元素消除法

• 用偽元素（行內變成塊）代替額外標簽，給父級添加元素clearfix
• 優點：直接給標簽加類
• 缺點：需要注意低版本瀏覽器

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

4.雙偽元素消除法

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

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

5.給父元素設置overflow屬性

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

CSS傳統網頁布局之標準流、浮動（float） 及 清除浮動方法 - 灰信網（軟件開發博客聚合）

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

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

創建BFC方法： ? ?
?1.根元素 （HTML標簽）? ??
?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.內部的塊級元素會在垂直方向上一個接一個的排列； ?

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

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

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

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

用途： ? ?

1.不被浮動元素覆蓋?

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

<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;/*創建bfc*/height: 100px;background-color: rgb(90, 134, 253);}

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

<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;/*創建bfc*/overflow: hidden;}/* 左右固定，中間自適應 */.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;/*創建bfc*/height: 100px;background-color: rgb(90, 134, 253);}

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

<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);}

創建BFC后

.column:last-child {/*創建bfc*/overflow: hidden;}

?2.清除元素內部浮動

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

?左右子元素都浮動時（且子元素都設置了高度）。但是父元素的高度為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);}

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

.contain {/*創建bfc*/overflow: hidden;}

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

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

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

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

?創建一個新的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.定位

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

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

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

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

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

相對的定位位置：元素出現在正常的文檔流中。

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

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

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

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

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

子絕父相：

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

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

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

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

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

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

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

• sticky元素僅在其父元素內生效，父元素的高度不能低于sticky元素的高度

• 父元素為overflow:hidden時，由于容器內無法滾動

如果頁面滾動未超過目標區域，表現為 relative；如果頁面滾動超出目標區域，表現為fixed,固定到適當位置。

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

共同點:

對內聯元素設置float和 absolute屬性，可以讓元素脫離文檔流，并且可以設置其寬高。

不同點

float：

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

absolute：

會覆蓋文檔流中的其他元素（遮蓋現象）。

2.層級問題

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

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

z-index:

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

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

注：z-index:0會創建層疊上下文，z-index:auto不會創建層疊上下文（在層疊上下文的層次結構中，沒有創建層疊上下文的元素同其父級處于一個層疊上下文。）。

層疊上下文：

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

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

?通元素設置position屬性為非static值并設置z-index屬性為具體數值，產生層疊上下文。

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

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

層疊等級：

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

層疊順序：

從低到高排列：

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

判斷層疊順序：

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

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

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

2、當兩個元素層疊等級相同、層疊順序相同時，在DOM結構中后面的元素層疊等級在前面元素之上。

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

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

3.基線（base line）

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

垂直對齊：vertical-align（解決行內/行內塊垂直對齊問題）

可以解決：

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

不推薦使用行內塊讓div一行顯示，因為可能會出現垂直對齊問題，推薦優先用浮動完成。

4.border-radius

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

border-radius:50%

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

border-radius：2/height

5.文本溢出處理

1.溢出屬性

overflow盒子內部部分所超過盒子范圍的區域，控制內容溢出部分的顯示效果。

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

2.空白屬性

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

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

3.省略號屬性

text-overflow：文本溢出時是否顯示省略標記

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

單行文本溢出

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

多行文本溢出

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

6.元素本身隱藏

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

常用屬性：

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

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

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

display:none;(隱藏)

display:block;(顯示)

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

DOM元素不顯示在瀏覽器可視范圍內？

最基本的方式如下。

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

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

59、說說 display:none和 visibility:hidden的區別。

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

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

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

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

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

7 display:none與visibility：hidden的區別？

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

元素整體透明度，讓某元素整體（包括內容）一起變透明

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

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

7.用CSS畫三角形技巧

利用盒子邊框完成

步驟：

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

8.精靈圖標簽

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

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

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

9.背景圖片大小

background-size:

數字+px：簡單方便

百分比：相對于當前盒子自身的寬高百分比

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

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

10.陰影

文字陰影：

text-shadow：

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

盒子陰影：

box-shadow：

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

11.過渡

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

transition：

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

注意：

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

不同狀態效果不同：給默認狀態設置，鼠標移入移出都有過渡效果；給hover狀態設置，鼠標移入移出有，移出沒有效果。

12.SEO（搜索引擎優化）

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

提升方法：

競價排名；將網頁制作成HTML后綴；標簽語義化（合適的地方使用合適的標簽）

三大標簽：

title：網頁標題標簽；description：網頁描述標簽；keywords：網頁關鍵詞標簽。

網頁代碼優化

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

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

網站性能優化（如何對網站的文件和資源進行優化）

• 減少 http請求:

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

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

5.使用sessionStorage API和localStorage API將數據存儲到瀏覽器中。

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

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

8.精簡和優化css和js

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

• 控制資源文件加載優先級：

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

• 盡量將 CSS，JS分離出HTML

使用外鏈進行加載（結構，表現，行為層的分離），保證網頁代碼的整潔，也利于維護。

• 利用瀏覽器緩存

瀏覽器緩存是將網絡資源存儲在本地，等待下次請求該資源時，如果資源已經存在就不需要到服務器進行重新請求，直接在本地讀取調用。

• 減少重排（Reflow）

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

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

• 使用內容分發網絡 (CDN)

內容交付網絡是一組分布在不同地理位置的web服務器，它們根據終端用戶的位置向其提供web內容。

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

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

使用CDN網絡緩存，加快用戶訪問速度，減輕服務器壓力

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

前端性能優化的七種方法 - 百度文庫

網站前端性能優化終極指南_程序員石磊的博客-CSDN博客

14.

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

1、重繪

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

2、重排

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

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

3、兩者的區別

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

15.初始化樣式

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

原因：

• 瀏覽器差異 不同瀏覽器對有些標簽的默認值是不同的，如果沒對css初始化會出現瀏覽器之間的頁面顯示差異，為了防止不同瀏覽器中標簽默認樣式不同所帶來影響，統一不同瀏覽器的默認顯示效果，需要初始化樣式。
• 提高編碼質量，減少重復代碼的出現。
• 瀏覽器的兼容性問題，可以通過初始化代碼來解決。

1.靜態布局：

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

3.彈性布局：

在定義伸縮項目大小時伸縮容器會預留一些可用空間，讓你可以調節伸縮項目的相對大小和位置。

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

2.流式布局：

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

?? ?

4.響應式布局：

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

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

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。