HTML和CSS重難點知識點有哪些

這篇“HTML和CSS重難點知識點有哪些”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“HTML和CSS重難點知識點有哪些”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。

html是什么

html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優雅的前端網頁。

1. 怎么讓一個不定寬高的 p，垂直水平居中?
   使用 Flex

只需要在父盒子設置：display: flex; justify-content: center;align-items: center;

使用 CSS3 transform

父盒子設置: position:relative
p 設置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;

使用 display:table-cell 方法

父盒子設置: display:table-cell; text-align:center;vertical-align:middle;
p 設置: display:inline-block;vertical-align:middle;

2.position 幾個屬性的作用
position 的常見四個屬性值: relative，absolute，fixed，static。一般都要配合 “left”、”top”、”right” 以及 “bottom” 屬性使用。

static: 默認位置。在一般情況下，我們不需要特別的去聲明它，但有時候遇到繼承的情況，我們不愿意見到元素所繼承的屬性影響本身，從而可以用 Position:static 取消繼承，即還原元素定位的默認值。設置為 static 的元素，它始終會處于頁面流給予的位置 (static 元素會忽略任何 top、 bottom、left 或 right 聲明)。一般不常用。
relative: 相對定位。相對定位是相對于元素默認的位置的定位，它偏移的 top，right，bottom，left 的值都以它原來的位置為基準偏移，而不管其他元素會怎么 樣。注意 relative 移動后的元素在原來的位置仍占據空間。
absolute: 絕對定位。設置為 absolute 的元素，如果它的 父容器設置了 position 屬性，并且 position 的屬性值為 absolute 或者 relative，那么就會依據父容器進行偏移。如果其父容器沒有設置 position 屬性，那么偏移是以 body 為依據。注意設置 absolute 屬性的元素在標準流中不占位置。
fixed: 固定定位。位置被設置為 fixed 的元素，可定位于相對于瀏覽器窗口的指定坐標。不論窗口滾動與否，元素都會留在那個位置。它始終是以 body 為依據的。 注意設置 fixed 屬性的元素在標準流中不占位置。

1. 浮動與清除浮動
   3.1 浮動相關知識
   float 屬性的取值：

left：元素向左浮動。
right：元素向右浮動。
none：默認值。元素不浮動，并會顯示在其在文本中出現的位置。

浮動的特性：

浮動元素會從普通文檔流中脫離，但浮動元素影響的不僅是自己，它會影響周圍的元素對齊進行環繞。
不管一個元素是行內元素還是塊級元素，如果被設置了浮動，那浮動元素會生成一個塊級框，可以設置它的 width 和 height，因此 float 常常用于制作橫向配列的菜單，可以設置大小并且橫向排列。

浮動元素的展示在不同情況下會有不同的規則：

浮動元素在浮動的時候，其 margin 不會超過包含塊的 padding。PS：如果想要元素超出，可以設置 margin 屬性
如果兩個元素一個向左浮動，一個向右浮動，左浮動元素的 marginRight 不會和右浮動元素的 marginLeft 相鄰。
如果有多個浮動元素，浮動元素會按順序排下來而不會發生重疊的現象。
如果有多個浮動元素，后面的元素高度不會超過前面的元素，并且不會超過包含塊。
如果有非浮動元素和浮動元素同時存在，并且非浮動元素在前，則浮動元素不會高于非浮動元素
浮動元素會盡可能地向頂端對齊、向左或向右對齊

重疊問題

行內元素與浮動元素發生重疊，其邊框，背景和內容都會顯示在浮動元素之上
塊級元素與浮動元素發生重疊時，邊框和背景會顯示在浮動元素之下，內容會顯示在浮動元素之上

clear 屬性
clear 屬性：確保當前元素的左右兩側不會有浮動元素。clear 只對元素本身的布局起作用。
取值：left、right、both
3.2 父元素高度塌陷問題
為什么要清除浮動，父元素高度塌陷
解決父元素高度塌陷問題：一個塊級元素如果沒有設置 height，其 height 是由子元素撐開的。對子元素使用了浮動之后，子元素會脫離標準文檔流，也就是說，父級元素中沒有內容可以撐開其高度，這樣父級元素的 height 就會被忽略，這就是所謂的高度塌陷。
3.3 清除浮動的方法
方法 1：給父級 p 定義 高度
原理：給父級 p 定義固定高度（height），能解決父級 p 無法獲取高度得問題。
優點：代碼簡潔
缺點：高度被固定死了，是適合內容固定不變的模塊。（不推薦使用）
方法二：使用空元素，如

(.clear{clear:both})
原理：添加一對空的 p 標簽，利用 css 的 clear:both 屬性清除浮動，讓父級 p 能夠獲取高度。
優點：瀏覽器支持好
缺點：多出了很多空的 p 標簽，如果頁面中浮動模塊多的話，就會出現很多的空置 p 了，這樣感覺視乎不是太令人滿意。（不推薦使用）
方法三：讓父級 p 也一并浮起來
這樣做可以初步解決當前的浮動問題。但是也讓父級浮動起來了，又會產生新的浮動問題。 不推薦使用
方法四：父級 p 定義 display:table
原理：將 p 屬性強制變成表格
優點：不解
缺點：會產生新的未知問題。（不推薦使用）
方法五：父元素設置 overflow：hidden、auto；
原理：這個方法的關鍵在于觸發了 BFC。在 IE6 中還需要觸發 hasLayout（zoom：1）
優點：代碼簡介，不存在結構和語義化問題
缺點：無法顯示需要溢出的元素（亦不太推薦使用）
方法六：父級 p 定義 偽類: after 和 zoom

.clearfix:after{ 
content:’.’; 
display:block; 
height:0; 
clear:both; 
visibility: hidden; 
}

.clearfix {zoom:1;}
原理：IE8 以上和非 IE 瀏覽器才支持: after，原理和方法 2 有點類似，zoom(IE 轉有屬性) 可解決 ie6,ie7 浮動問題
優點：結構和語義化完全正確, 代碼量也適中，可重復利用率（建議定義公共類）
缺點：代碼不是非常簡潔（極力推薦使用）
經益求精寫法

.clearfix:after { 
content:”\200B”; 
display:block; 
height:0; 
clear:both; 
} 
.clearfix {*zoom:1;} 照顧 IE6，IE7 就可以了

4.BFC 相關知識
定義：BFC(Block formatting context) 直譯為 “塊級格式化上下文”。它是一個獨立的渲染區域，只有 Block-level box 參 與， 它規定了內部的 Block-level Box 如何布局，并且與這個區域外部毫不相干。
BFC 布局規則
BFC 就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

BFC 這個元素的垂直方向的邊距會發生重疊，垂直方向的距離由 margin 決定，取最大值
BFC 的區域不會與浮動盒子重疊（清除浮動原理）。
計算 BFC 的高度時，浮動元素也參與計算。

哪些元素會生成 BFC

根元素
float 屬性不為 none
position 為 absolute 或 fixed
display 為 inline-block， table-cell， table-caption， flex， inline-flex
overflow 不為 visible

5.box-sizing 是什么
設置 CSS 盒模型為標準模型或 IE 模型。標準模型的寬度只包括 content，二 IE 模型包括 border 和 padding
box-sizing 屬性可以為三個值之一：

content-box，默認值，只計算內容的寬度，border 和 padding 不計算入 width 之內
padding-box，padding 計算入寬度內
border-box，border 和 padding 計算入寬度之內

6.px，em，rem 的區別
px 像素 (Pixel)。絕對單位。像素 px 是相對于顯示器屏幕分辨率而言的，是一個虛擬長度單位，是計算 機系統的數字化圖像長度單位，如果 px 要換算成物理長度，需要指定精度 DPI。
em 是相對長度單位，相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置， 則相對于瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小，因此并不是一個固定的值。
rem 是 CSS3 新增的一個相對單位 (root em，根 em)，使用 rem 為元素設定字體大小時，仍然是相對大小， 但相對的只是 HTML 根元素。
7.CSS 引入的方式有哪些? link 和 @import 的區別是?
有四種：內聯 (元素上的 style 屬性)、內嵌 (style 標簽)、外鏈 (link)、導入 (@import)
link 和 @import 的區別：

link 是 XHTML 標簽，除了加載 CSS 外，還可以定義 RSS 等其他事務；@import 屬于 CSS 范疇，只能加載 CSS。
link 引用 CSS 時，在頁面載入時同時加載；@import 需要頁面網頁完全載入以后加載。
link 是 XHTML 標簽，無兼容問題；@import 是在 CSS2.1 提出的，低版本的瀏覽器不支持。
link 支持使用 Javascript 控制 DOM 去改變樣式；而 @import 不支持。

1. 流式布局與響應式布局的區別
   流式布局
   使用非固定像素來定義網頁內容，也就是百分比布局，通過盒子的寬度設置成百分比來根據屏幕的寬度來進
   行伸縮，不受固定像素的限制，內容向兩側填充。
   響應式開發
   利用 CSS3 中的 Media Query(媒介查詢)，通過查詢 screen 的寬度來指定某個寬度區間的網頁布局。

超小屏幕 (移動設備) 768px 以下
小屏設備 768px-992px
中等屏幕 992px-1200px
寬屏設備 1200px 以上

由于響應式開發顯得繁瑣些，一般使用第三方響應式框架來完成，比如 bootstrap 來完成一部分工作，當然也 可以自己寫響應式。
區別

-
流式布局
響應式開發

開發方式
移動 Web 開發 + PC 開發
響應式開發

應用場景
一般在已經有 PC 端網站，開發移動的的時候只需要單獨開發移動端
針對一些新建的網站，現在要求適配移動端，所以就一套頁面兼容各種終端

開發
正對性強，開發效率高
兼容各種終端，效率低

適配
只適配移動設備，pad 上體驗相對較差
可以適配各種終端

效率
代碼簡潔，加載快
代碼相對復雜，加載慢

1. 漸進增強和優雅降級
   關鍵的區別是他們所側重的內容，以及這種不同造成的工作流程的差異

優雅降級一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。。
漸進增強針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

區別：

優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給
漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要
降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶

10.CSS 隱藏元素的幾種方式及區別
display:none

元素在頁面上將徹底消失，元素本來占有的空間就會被其他元素占有，也就是說它會導致瀏覽器的重排和重繪。
不會觸發其點擊事件

visibility:hidden

和 display:none 的區別在于，元素在頁面消失后，其占據的空間依舊會保留著，所以它只會導致瀏覽器重繪而不會重排。
無法觸發其點擊事件
適用于那些元素隱藏后不希望頁面布局會發生變化的場景

opacity:0

將元素的透明度設置為 0 后，在我們用戶眼中，元素也是隱藏的，這算是一種隱藏元素的方法。
和 visibility:hidden 的一個共同點是元素隱藏后依舊占據著空間，但我們都知道，設置透明度為 0 后，元素只是隱身了，它依舊存在頁面中。
可以觸發點擊事件

設置 height，width 等盒模型屬性為 0

簡單說就是將元素的 margin，border，padding，height 和 width 等影響元素盒模型的屬性設置成 0，如果元素內有子元素或內容，還應該設置其 overflow:hidden 來隱藏其子元素，這算是一種奇技淫巧。
如果元素設置了 border，padding 等屬性不為 0，很顯然，頁面上還是能看到這個元素的，觸發元素的點擊事件完全沒有問題。如果全部屬性都設置為 0，很顯然，這個元素相當于消失了，即無法觸發點擊事件。
這種方式既不實用，也可能存在著著一些問題。但平時我們用到的一些頁面效果可能就是采用這種方式來完成的，比如 jquery 的 slideUp 動畫，它就是設置元素的 overflow:hidden 后，接著通過定時器，不斷地設置元素的 height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom 為 0，從而達到 slideUp 的效果。

其他腦洞方法

設置元素的 position 與 left，top，bottom，right 等，將元素移出至屏幕外
設置元素的 position 與 z-index，將 z-index 設置成盡量小的負數

1. 簡述一下 src 與 href 的區別
   href 是指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用于超鏈接。
   src 是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求 src 資源時會將其指向的資源下載并應用到文檔內，例如 js 腳本，img 圖片和 frame 等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將 js 腳本放在底部而不是頭部。

2. 行內元素有哪些？塊級元素有哪些？ 空 (void) 元素有那些？
   這個問題面試偶爾被問到的時候有點懵逼~~~ 平時沒在意。。。。
   行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
   塊級元素：p、ul、li、dl、dt、dd、p、h2-h7、blockquote
   空元素：即系沒有內容的 HTML 元素，例如：br、meta、hr、link、input、img

1. 怎么讓一個不定寬高的 p，垂直水平居中?
   使用 Flex

只需要在父盒子設置：display: flex; justify-content: center;align-items: center;

使用 CSS3 transform

父盒子設置: position:relative
p 設置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;

使用 display:table-cell 方法

父盒子設置: display:table-cell; text-align:center;vertical-align:middle;
p 設置: display:inline-block;vertical-align:middle;

2.position 幾個屬性的作用
position 的常見四個屬性值: relative，absolute，fixed，static。一般都要配合 “left”、”top”、”right” 以及 “bottom” 屬性使用。

static: 默認位置。在一般情況下，我們不需要特別的去聲明它，但有時候遇到繼承的情況，我們不愿意見到元素所繼承的屬性影響本身，從而可以用 Position:static 取消繼承，即還原元素定位的默認值。設置為 static 的元素，它始終會處于頁面流給予的位置 (static 元素會忽略任何 top、 bottom、left 或 right 聲明)。一般不常用。
relative: 相對定位。相對定位是相對于元素默認的位置的定位，它偏移的 top，right，bottom，left 的值都以它原來的位置為基準偏移，而不管其他元素會怎么 樣。注意 relative 移動后的元素在原來的位置仍占據空間。
absolute: 絕對定位。設置為 absolute 的元素，如果它的 父容器設置了 position 屬性，并且 position 的屬性值為 absolute 或者 relative，那么就會依據父容器進行偏移。如果其父容器沒有設置 position 屬性，那么偏移是以 body 為依據。注意設置 absolute 屬性的元素在標準流中不占位置。
fixed: 固定定位。位置被設置為 fixed 的元素，可定位于相對于瀏覽器窗口的指定坐標。不論窗口滾動與否，元素都會留在那個位置。它始終是以 body 為依據的。 注意設置 fixed 屬性的元素在標準流中不占位置。

1. 浮動與清除浮動
   3.1 浮動相關知識
   float 屬性的取值：

left：元素向左浮動。
right：元素向右浮動。
none：默認值。元素不浮動，并會顯示在其在文本中出現的位置。

浮動的特性：

浮動元素會從普通文檔流中脫離，但浮動元素影響的不僅是自己，它會影響周圍的元素對齊進行環繞。
不管一個元素是行內元素還是塊級元素，如果被設置了浮動，那浮動元素會生成一個塊級框，可以設置它的 width 和 height，因此 float 常常用于制作橫向配列的菜單，可以設置大小并且橫向排列。

浮動元素的展示在不同情況下會有不同的規則：

浮動元素在浮動的時候，其 margin 不會超過包含塊的 padding。PS：如果想要元素超出，可以設置 margin 屬性
如果兩個元素一個向左浮動，一個向右浮動，左浮動元素的 marginRight 不會和右浮動元素的 marginLeft 相鄰。
如果有多個浮動元素，浮動元素會按順序排下來而不會發生重疊的現象。
如果有多個浮動元素，后面的元素高度不會超過前面的元素，并且不會超過包含塊。
如果有非浮動元素和浮動元素同時存在，并且非浮動元素在前，則浮動元素不會高于非浮動元素
浮動元素會盡可能地向頂端對齊、向左或向右對齊

重疊問題

行內元素與浮動元素發生重疊，其邊框，背景和內容都會顯示在浮動元素之上
塊級元素與浮動元素發生重疊時，邊框和背景會顯示在浮動元素之下，內容會顯示在浮動元素之上

clear 屬性
clear 屬性：確保當前元素的左右兩側不會有浮動元素。clear 只對元素本身的布局起作用。
取值：left、right、both
3.2 父元素高度塌陷問題
為什么要清除浮動，父元素高度塌陷
解決父元素高度塌陷問題：一個塊級元素如果沒有設置 height，其 height 是由子元素撐開的。對子元素使用了浮動之后，子元素會脫離標準文檔流，也就是說，父級元素中沒有內容可以撐開其高度，這樣父級元素的 height 就會被忽略，這就是所謂的高度塌陷。
3.3 清除浮動的方法
方法 1：給父級 p 定義 高度
原理：給父級 p 定義固定高度（height），能解決父級 p 無法獲取高度得問題。
優點：代碼簡潔
缺點：高度被固定死了，是適合內容固定不變的模塊。（不推薦使用）
方法二：使用空元素，如

(.clear{clear:both})
原理：添加一對空的 p 標簽，利用 css 的 clear:both 屬性清除浮動，讓父級 p 能夠獲取高度。
優點：瀏覽器支持好
缺點：多出了很多空的 p 標簽，如果頁面中浮動模塊多的話，就會出現很多的空置 p 了，這樣感覺視乎不是太令人滿意。（不推薦使用）
方法三：讓父級 p 也一并浮起來
這樣做可以初步解決當前的浮動問題。但是也讓父級浮動起來了，又會產生新的浮動問題。 不推薦使用
方法四：父級 p 定義 display:table
原理：將 p 屬性強制變成表格
優點：不解
缺點：會產生新的未知問題。（不推薦使用）
方法五：父元素設置 overflow：hidden、auto；
原理：這個方法的關鍵在于觸發了 BFC。在 IE6 中還需要觸發 hasLayout（zoom：1）
優點：代碼簡介，不存在結構和語義化問題
缺點：無法顯示需要溢出的元素（亦不太推薦使用）
方法六：父級 p 定義 偽類: after 和 zoom
.clearfix:after{
content:’.’;
display:block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix {zoom:1;}
原理：IE8 以上和非 IE 瀏覽器才支持: after，原理和方法 2 有點類似，zoom(IE 轉有屬性) 可解決 ie6,ie7 浮動問題
優點：結構和語義化完全正確, 代碼量也適中，可重復利用率（建議定義公共類）
缺點：代碼不是非常簡潔（極力推薦使用）
經益求精寫法
.clearfix:after {
content:”\200B”;
display:block;
height:0;
clear:both;
}
.clearfix {*zoom:1;} 照顧 IE6，IE7 就可以了

詳細關于浮動的知識請參看這篇文章：
http://luopq.com/2015/11/08/CSS-float/

4.BFC 相關知識
定義：BFC(Block formatting context) 直譯為 “塊級格式化上下文”。它是一個獨立的渲染區域，只有 Block-level box 參 與， 它規定了內部的 Block-level Box 如何布局，并且與這個區域外部毫不相干。
BFC 布局規則
BFC 就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

BFC 這個元素的垂直方向的邊距會發生重疊，垂直方向的距離由 margin 決定，取最大值
BFC 的區域不會與浮動盒子重疊（清除浮動原理）。
計算 BFC 的高度時，浮動元素也參與計算。

哪些元素會生成 BFC

根元素
float 屬性不為 none
position 為 absolute 或 fixed
display 為 inline-block， table-cell， table-caption， flex， inline-flex
overflow 不為 visible

5.box-sizing 是什么
設置 CSS 盒模型為標準模型或 IE 模型。標準模型的寬度只包括 content，二 IE 模型包括 border 和 padding
box-sizing 屬性可以為三個值之一：

content-box，默認值，只計算內容的寬度，border 和 padding 不計算入 width 之內
padding-box，padding 計算入寬度內
border-box，border 和 padding 計算入寬度之內

6.px，em，rem 的區別
px 像素 (Pixel)。絕對單位。像素 px 是相對于顯示器屏幕分辨率而言的，是一個虛擬長度單位，是計算 機系統的數字化圖像長度單位，如果 px 要換算成物理長度，需要指定精度 DPI。
em 是相對長度單位，相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置， 則相對于瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小，因此并不是一個固定的值。
rem 是 CSS3 新增的一個相對單位 (root em，根 em)，使用 rem 為元素設定字體大小時，仍然是相對大小， 但相對的只是 HTML 根元素。
7.CSS 引入的方式有哪些? link 和 @import 的區別是?
有四種：內聯 (元素上的 style 屬性)、內嵌 (style 標簽)、外鏈 (link)、導入 (@import)
link 和 @import 的區別：

link 是 XHTML 標簽，除了加載 CSS 外，還可以定義 RSS 等其他事務；@import 屬于 CSS 范疇，只能加載 CSS。
link 引用 CSS 時，在頁面載入時同時加載；@import 需要頁面網頁完全載入以后加載。
link 是 XHTML 標簽，無兼容問題；@import 是在 CSS2.1 提出的，低版本的瀏覽器不支持。
link 支持使用 Javascript 控制 DOM 去改變樣式；而 @import 不支持。

1. 流式布局與響應式布局的區別
   流式布局
   使用非固定像素來定義網頁內容，也就是百分比布局，通過盒子的寬度設置成百分比來根據屏幕的寬度來進
   行伸縮，不受固定像素的限制，內容向兩側填充。
   響應式開發
   利用 CSS3 中的 Media Query(媒介查詢)，通過查詢 screen 的寬度來指定某個寬度區間的網頁布局。

超小屏幕 (移動設備) 768px 以下
小屏設備 768px-992px
中等屏幕 992px-1200px
寬屏設備 1200px 以上

由于響應式開發顯得繁瑣些，一般使用第三方響應式框架來完成，比如 bootstrap 來完成一部分工作，當然也 可以自己寫響應式。
區別

-
流式布局
響應式開發

開發方式
移動 Web 開發 + PC 開發
響應式開發

應用場景
一般在已經有 PC 端網站，開發移動的的時候只需要單獨開發移動端
針對一些新建的網站，現在要求適配移動端，所以就一套頁面兼容各種終端

開發
正對性強，開發效率高
兼容各種終端，效率低

適配
只適配移動設備，pad 上體驗相對較差
可以適配各種終端

效率
代碼簡潔，加載快
代碼相對復雜，加載慢

1. 漸進增強和優雅降級
   關鍵的區別是他們所側重的內容，以及這種不同造成的工作流程的差異

優雅降級一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。。
漸進增強針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

區別：

優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給
漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要
降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶

10.CSS 隱藏元素的幾種方式及區別
display:none

元素在頁面上將徹底消失，元素本來占有的空間就會被其他元素占有，也就是說它會導致瀏覽器的重排和重繪。
不會觸發其點擊事件

visibility:hidden

和 display:none 的區別在于，元素在頁面消失后，其占據的空間依舊會保留著，所以它只會導致瀏覽器重繪而不會重排。
無法觸發其點擊事件
適用于那些元素隱藏后不希望頁面布局會發生變化的場景

opacity:0

將元素的透明度設置為 0 后，在我們用戶眼中，元素也是隱藏的，這算是一種隱藏元素的方法。
和 visibility:hidden 的一個共同點是元素隱藏后依舊占據著空間，但我們都知道，設置透明度為 0 后，元素只是隱身了，它依舊存在頁面中。
可以觸發點擊事件

設置 height，width 等盒模型屬性為 0

簡單說就是將元素的 margin，border，padding，height 和 width 等影響元素盒模型的屬性設置成 0，如果元素內有子元素或內容，還應該設置其 overflow:hidden 來隱藏其子元素，這算是一種奇技淫巧。
如果元素設置了 border，padding 等屬性不為 0，很顯然，頁面上還是能看到這個元素的，觸發元素的點擊事件完全沒有問題。如果全部屬性都設置為 0，很顯然，這個元素相當于消失了，即無法觸發點擊事件。
這種方式既不實用，也可能存在著著一些問題。但平時我們用到的一些頁面效果可能就是采用這種方式來完成的，比如 jquery 的 slideUp 動畫，它就是設置元素的 overflow:hidden 后，接著通過定時器，不斷地設置元素的 height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom 為 0，從而達到 slideUp 的效果。

其他腦洞方法

設置元素的 position 與 left，top，bottom，right 等，將元素移出至屏幕外
設置元素的 position 與 z-index，將 z-index 設置成盡量小的負數

1. 簡述一下 src 與 href 的區別
   href 是指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用于超鏈接。
   src 是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求 src 資源時會將其指向的資源下載并應用到文檔內，例如 js 腳本，img 圖片和 frame 等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將 js 腳本放在底部而不是頭部。

2. 行內元素有哪些？塊級元素有哪些？ 空 (void) 元素有那些？
   這個問題面試偶爾被問到的時候有點懵逼~~~ 平時沒在意。。。。
   行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
   塊級元素：p、ul、li、dl、dt、dd、p、h2-h7、blockquote
   空元素：即系沒有內容的 HTML 元素，例如：br、meta、hr、link、input、img

以上是“HTML和CSS重難點知識點有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！