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

這篇文章主要介紹“HTML和CSS的重難點知識點有哪些”，在日常操作中，相信很多人在HTML和CSS的重難點知識點有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”HTML和CSS的重難點知識點有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　怎么讓一個不定寬高的p，垂直水平居中?

　　使用Flex

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

　　使用CSS3transform

　　父盒子設置: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屬性的元素在標準流中不占位置。

　　浮動與清除浮動

　　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(Blockformattingcontext)直譯為“塊級格式化上下文”。它是一個獨立的渲染區域，只有Block-levelbox參與，它規定了內部的Block-levelBox如何布局，并且與這個區域外部毫不相干。

　　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新增的一個相對單位(rootem，根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不支持。

　　流式布局與響應式布局的區別

　　流式布局

　　使用非固定像素來定義網頁內容，也就是百分比布局，通過盒子的寬度設置成百分比來根據屏幕的寬度來進

　　行伸縮，不受固定像素的限制，內容向兩側填充。

　　響應式開發

　　利用CSS3中的MediaQuery(媒介查詢)，通過查詢screen的寬度來指定某個寬度區間的網頁布局。

　　超小屏幕(移動設備)768px以下

　　小屏設備768px-992px

　　中等屏幕992px-1200px

　　寬屏設備1200px以上

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

　　區別

　　-

　　流式布局

　　響應式開發

　　開發方式

　　移動Web開發+PC開發

　　響應式開發

　　應用場景

　　一般在已經有PC端網站，開發移動的的時候只需要單獨開發移動端

　　針對一些新建的網站，現在要求適配移動端，所以就一套頁面兼容各種終端

　　開發

　　正對性強，開發效率高

　　兼容各種終端，效率低

　　適配

　　只適配移動設備，pad上體驗相對較差

　　可以適配各種終端

　　效率

　　代碼簡潔，加載快

　　代碼相對復雜，加載慢

　　漸進增強和優雅降級

　　關鍵的區別是他們所側重的內容，以及這種不同造成的工作流程的差異

　　優雅降級一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。。

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

　　區別：

　　優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給

　　漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要

　　降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶

　　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設置成盡量小的負數

　　簡述一下src與href的區別

　　href是指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用于超鏈接。

　　src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。

　　行內元素有哪些？塊級元素有哪些？空(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

　　怎么讓一個不定寬高的p，垂直水平居中?

　　使用Flex

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

　　使用CSS3transform

　　父盒子設置: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屬性的元素在標準流中不占位置。

　　浮動與清除浮動

　　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(Blockformattingcontext)直譯為“塊級格式化上下文”。它是一個獨立的渲染區域，只有Block-levelbox參與，它規定了內部的Block-levelBox如何布局，并且與這個區域外部毫不相干。

　　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新增的一個相對單位(rootem，根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不支持。

　　流式布局與響應式布局的區別

　　流式布局

　　使用非固定像素來定義網頁內容，也就是百分比布局，通過盒子的寬度設置成百分比來根據屏幕的寬度來進

　　行伸縮，不受固定像素的限制，內容向兩側填充。

　　響應式開發

　　利用CSS3中的MediaQuery(媒介查詢)，通過查詢screen的寬度來指定某個寬度區間的網頁布局。

　　超小屏幕(移動設備)768px以下

　　小屏設備768px-992px

　　中等屏幕992px-1200px

　　寬屏設備1200px以上

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

　　區別

　　-

　　流式布局

　　響應式開發

　　開發方式

　　移動Web開發+PC開發

　　響應式開發

　　應用場景

　　一般在已經有PC端網站，開發移動的的時候只需要單獨開發移動端

　　針對一些新建的網站，現在要求適配移動端，所以就一套頁面兼容各種終端

　　開發

　　正對性強，開發效率高

　　兼容各種終端，效率低

　　適配

　　只適配移動設備，pad上體驗相對較差

　　可以適配各種終端

　　效率

　　代碼簡潔，加載快

　　代碼相對復雜，加載慢

　　漸進增強和優雅降級

　　關鍵的區別是他們所側重的內容，以及這種不同造成的工作流程的差異

　　優雅降級一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。。

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

　　區別：

　　優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給

　　漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要

　　降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶

　　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設置成盡量小的負數

　　簡述一下src與href的區別

　　href是指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用于超鏈接。

　　src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。

　　行內元素有哪些？塊級元素有哪些？空(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的重難點知識點有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！