HTML和CSS的重難點(diǎn)問(wèn)題有哪些

這篇“HTML和CSS的重難點(diǎn)問(wèn)題有哪些”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“HTML和CSS的重難點(diǎn)問(wèn)題有哪些”文章吧。

　　1.怎么讓一個(gè)不定寬高的 DIV，垂直水平居中?

　　使用Flex

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

　　使用 CSS3 transform

　　父盒子設(shè)置:position:relative

　　Div 設(shè)置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;

　　使用 display:table-cell 方法

　　父盒子設(shè)置:display:table-cell; text-align:center;vertical-align:middle;

　　Div 設(shè)置: display:inline-block;vertical-align:middle;

　　2.position 幾個(gè)屬性的作用

　　position 的常見(jiàn)四個(gè)屬性值: relative，absolute，fixed，static。一般都要配合"left"、"top"、"right" 以及 "bottom" 屬性使用。

　　static:默認(rèn)位置。在一般情況下，我們不需要特別的去聲明它，但有時(shí)候遇到繼承的情況，我們不愿意見(jiàn)到元素所繼承的屬性影響本身，從而可以用Position:static取消繼承，即還原元素定位的默認(rèn)值。設(shè)置為 static 的元素，它始終會(huì)處于頁(yè)面流給予的位置(static 元素會(huì)忽略任何 top、 bottom、left 或 right 聲明)。一般不常用。

　　relative:相對(duì)定位。相對(duì)定位是相對(duì)于元素默認(rèn)的位置的定位，它偏移的 top，right，bottom，left 的值都以它原來(lái)的位置為基準(zhǔn)偏移，而不管其他元素會(huì)怎么 樣。注意 relative 移動(dòng)后的元素在原來(lái)的位置仍占據(jù)空間。

　　absolute:絕對(duì)定位。設(shè)置為 absolute 的元素，如果它的 父容器設(shè)置了 position 屬性，并且 position 的屬性值為 absolute 或者 relative，那么就會(huì)依據(jù)父容器進(jìn)行偏移。如果其父容器沒(méi)有設(shè)置 position 屬性，那么偏移是以 body 為依據(jù)。注意設(shè)置 absolute 屬性的元素在標(biāo)準(zhǔn)流中不占位置。

　　fixed:固定定位。位置被設(shè)置為 fixed 的元素，可定位于相對(duì)于瀏覽器窗口的指定坐標(biāo)。不論窗口滾動(dòng)與否，元素都會(huì)留在那個(gè)位置。它始終是以 body 為依據(jù)的。 注意設(shè)置 fixed 屬性的元素在標(biāo)準(zhǔn)流中不占位置。

　　3.浮動(dòng)與清除浮動(dòng)

　　float屬性的取值：

　　left：元素向左浮動(dòng)。

　　right：元素向右浮動(dòng)。

　　none：默認(rèn)值。元素不浮動(dòng)，并會(huì)顯示在其在文本中出現(xiàn)的位置。

　　浮動(dòng)的特性：

　　浮動(dòng)元素會(huì)從普通文檔流中脫離，但浮動(dòng)元素影響的不僅是自己，它會(huì)影響周?chē)脑貙?duì)齊進(jìn)行環(huán)繞。

　　不管一個(gè)元素是行內(nèi)元素還是塊級(jí)元素，如果被設(shè)置了浮動(dòng)，那浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，可以設(shè)置它的width和height，因此float常常用于制作橫向配列的菜單，可以設(shè)置大小并且橫向排列。

　　浮動(dòng)元素的展示在不同情況下會(huì)有不同的規(guī)則：

　　浮動(dòng)元素在浮動(dòng)的時(shí)候，其margin不會(huì)超過(guò)包含塊的padding。PS：如果想要元素超出，可以設(shè)置margin屬性

　　如果兩個(gè)元素一個(gè)向左浮動(dòng)，一個(gè)向右浮動(dòng)，左浮動(dòng)元素的marginRight不會(huì)和右浮動(dòng)元素的marginLeft相鄰。

　　如果有多個(gè)浮動(dòng)元素，浮動(dòng)元素會(huì)按順序排下來(lái)而不會(huì)發(fā)生重疊的現(xiàn)象。

　　如果有多個(gè)浮動(dòng)元素，后面的元素高度不會(huì)超過(guò)前面的元素，并且不會(huì)超過(guò)包含塊。

　　如果有非浮動(dòng)元素和浮動(dòng)元素同時(shí)存在，并且非浮動(dòng)元素在前，則浮動(dòng)元素不會(huì)高于非浮動(dòng)元素

　　浮動(dòng)元素會(huì)盡可能地向頂端對(duì)齊、向左或向右對(duì)

　　重疊問(wèn)題

　　行內(nèi)元素與浮動(dòng)元素發(fā)生重疊，其邊框，背景和內(nèi)容都會(huì)顯示在浮動(dòng)元素之上

　　塊級(jí)元素與浮動(dòng)元素發(fā)生重疊時(shí)，邊框和背景會(huì)顯示在浮動(dòng)元素之下，內(nèi)容會(huì)顯示在浮動(dòng)元素之上

　　clear屬性

　　clear屬性：確保當(dāng)前元素的左右兩側(cè)不會(huì)有浮動(dòng)元素。clear只對(duì)元素本身的布局起作用。

　　取值：left、right、both

　　為什么要清除浮動(dòng)，父元素高度塌陷

　　解決父元素高度塌陷問(wèn)題：一個(gè)塊級(jí)元素如果沒(méi)有設(shè)置height，其height是由子元素?fù)伍_(kāi)的。對(duì)子元素使用了浮動(dòng)之后，子元素會(huì)脫離標(biāo)準(zhǔn)文檔流，也就是說(shuō)，父級(jí)元素中沒(méi)有內(nèi)容可以撐開(kāi)其高度，這樣父級(jí)元素的height就會(huì)被忽略，這就是所謂的高度塌陷。

　　方法1：給父級(jí)div定義 高度

　　原理：給父級(jí)DIV定義固定高度（height），能解決父級(jí)DIV 無(wú)法獲取高度得問(wèn)題。

　　優(yōu)點(diǎn)：代碼簡(jiǎn)潔

　　缺點(diǎn)：高度被固定死了，是適合內(nèi)容固定不變的模塊。（不推薦使用）

　　方法二：使用空元素，如

　　(.clear)

　　原理：添加一對(duì)空的DIV標(biāo)簽，利用css的clear:both屬性清除浮動(dòng)，讓父級(jí)DIV能夠獲取高度。

　　優(yōu)點(diǎn)：瀏覽器支持好

　　缺點(diǎn)：多出了很多空的DIV標(biāo)簽，如果頁(yè)面中浮動(dòng)模塊多的話(huà)，就會(huì)出現(xiàn)很多的空置DIV了，這樣感覺(jué)視乎不是太令人滿(mǎn)意。（不推薦使用）

　　方法三：讓父級(jí)div 也一并浮起來(lái)

　　這樣做可以初步解決當(dāng)前的浮動(dòng)問(wèn)題。但是也讓父級(jí)浮動(dòng)起來(lái)了，又會(huì)產(chǎn)生新的浮動(dòng)問(wèn)題。 不推薦使用

　　方法四：父級(jí)div定義 display:table

　　原理：將div屬性強(qiáng)制變成表格

　　優(yōu)點(diǎn)：不解

　　缺點(diǎn)：會(huì)產(chǎn)生新的未知問(wèn)題。（不推薦使用）

　　方法五：父元素設(shè)置 overflow：hidden、auto；

　　原理：這個(gè)方法的關(guān)鍵在于觸發(fā)了BFC。在IE6中還需要觸發(fā) hasLayout（zoom：1）

　　優(yōu)點(diǎn)：代碼簡(jiǎn)介，不存在結(jié)構(gòu)和語(yǔ)義化問(wèn)題

　　缺點(diǎn)：無(wú)法顯示需要溢出的元素（亦不太推薦使用）

　　方法六：父級(jí)div定義 偽類(lèi):after 和 zoom

　　原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點(diǎn)類(lèi)似，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動(dòng)問(wèn)題

　　優(yōu)點(diǎn)：結(jié)構(gòu)和語(yǔ)義化完全正確,代碼量也適中，可重復(fù)利用率（建議定義公共類(lèi)）

　　缺點(diǎn)：代碼不是非常簡(jiǎn)潔（極力推薦使用）

　　經(jīng)益求精寫(xiě)法

　　4.BFC相關(guān)知識(shí)

　　定義：BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有 Block-level box 參 與， 它規(guī)定了內(nèi)部的 Block-level Box 如何布局，并且與這個(gè)區(qū)域外部毫不相干。

　　BFC布局規(guī)則

　　BFC 就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。

　　BFC這個(gè)元素的垂直方向的邊距會(huì)發(fā)生重疊，垂直方向的距離由margin決定，取最大值

　　BFC 的區(qū)域不會(huì)與浮動(dòng)盒子重疊（清除浮動(dòng)原理）。

　　計(jì)算 BFC 的高度時(shí)，浮動(dòng)元素也參與計(jì)算。

　　哪些元素會(huì)生成 BFC

　　根元素

　　float 屬性不為 none

　　position 為 absolute 或 fixed

　　display 為 inline-block， table-cell， table-caption， flex， inline-flex

　　overflow 不為 visible

　　5.box-sizing是什么

　　設(shè)置CSS盒模型為標(biāo)準(zhǔn)模型或IE模型。標(biāo)準(zhǔn)模型的寬度只包括content，二IE模型包括border和padding

　　box-sizing屬性可以為三個(gè)值之一：

　　content-box，默認(rèn)值，只計(jì)算內(nèi)容的寬度，border和padding不計(jì)算入width之內(nèi)

　　padding-box，padding計(jì)算入寬度內(nèi)

　　border-box，border和padding計(jì)算入寬度之內(nèi)

　　6.px，em，rem 的區(qū)別

　　px 像素(Pixel)。絕對(duì)單位。像素 px 是相對(duì)于顯示器屏幕分辨率而言的，是一個(gè)虛擬長(zhǎng)度單位，是計(jì)算 機(jī)系統(tǒng)的數(shù)字化圖像長(zhǎng)度單位，如果 px 要換算成物理長(zhǎng)度，需要指定精度 DPI。

　　em 是相對(duì)長(zhǎng)度單位，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置， 則相對(duì)于瀏覽器的默認(rèn)字體尺寸。它會(huì)繼承父級(jí)元素的字體大小，因此并不是一個(gè)固定的值。

　　rem 是 CSS3 新增的一個(gè)相對(duì)單位(root em，根 em)，使用 rem 為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小， 但相對(duì)的只是 HTML 根元素。

　　7.CSS 引入的方式有哪些? link 和@import 的區(qū)別是?

　　有四種：內(nèi)聯(lián)(元素上的style屬性)、內(nèi)嵌(style標(biāo)簽)、外鏈(link)、導(dǎo)入(@import)

　　link和@import的區(qū)別：

　　link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。

　　link引用CSS時(shí)，在頁(yè)面載入時(shí)同時(shí)加載；@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載。

　　link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

　　link支持使用Javascript控制DOM去改變樣式；而@import不支持。

　　8.流式布局與響應(yīng)式布局的區(qū)別

　　流式布局

　　使用非固定像素來(lái)定義網(wǎng)頁(yè)內(nèi)容，也就是百分比布局，通過(guò)盒子的寬度設(shè)置成百分比來(lái)根據(jù)屏幕的寬度來(lái)進(jìn)

　　行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充。

　　響應(yīng)式開(kāi)發(fā)

　　利用CSS3 中的 Media Query(媒介查詢(xún))，通過(guò)查詢(xún) screen 的寬度來(lái)指定某個(gè)寬度區(qū)間的網(wǎng)頁(yè)布局。

　　超小屏幕(移動(dòng)設(shè)備) 768px 以下

　　小屏設(shè)備 768px-992px

　　中等屏幕 992px-1200px

　　寬屏設(shè)備 1200px 以上

　　由于響應(yīng)式開(kāi)發(fā)顯得繁瑣些，一般使用第三方響應(yīng)式框架來(lái)完成，比如 bootstrap 來(lái)完成一部分工作，當(dāng)然也 可以自己寫(xiě)響應(yīng)式。

　　區(qū)別

　　流式布局

　　響應(yīng)式開(kāi)發(fā)

　　開(kāi)發(fā)方式

　　移動(dòng)Web開(kāi)發(fā)+PC開(kāi)發(fā)

　　響應(yīng)式開(kāi)發(fā)

　　應(yīng)用場(chǎng)景

　　一般在已經(jīng)有PC端網(wǎng)站，開(kāi)發(fā)移動(dòng)的的時(shí)候只需要單獨(dú)開(kāi)發(fā)移動(dòng)端

　　針對(duì)一些新建的網(wǎng)站，現(xiàn)在要求適配移動(dòng)端，所以就一套頁(yè)面兼容各種終端

　　開(kāi)發(fā)

　　正對(duì)性強(qiáng)，開(kāi)發(fā)效率高

　　兼容各種終端，效率低

　　適配

　　只適配移動(dòng)設(shè)備，pad上體驗(yàn)相對(duì)較差

　　可以適配各種終端

　　效率

　　代碼簡(jiǎn)潔，加載快

　　代碼相對(duì)復(fù)雜，加載慢

　　9.漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

　　關(guān)鍵的區(qū)別是他們所側(cè)重的內(nèi)容，以及這種不同造成的工作流程的差異

　　優(yōu)雅降級(jí)一開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。。

　　漸進(jìn)增強(qiáng)針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶(hù)體驗(yàn)。

　　區(qū)別：

　　優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開(kāi)始，并試圖減少用戶(hù)體驗(yàn)的供給

　　漸進(jìn)增強(qiáng)則是從一個(gè)非?；A(chǔ)的，能夠起作用的版本開(kāi)始，并不斷擴(kuò)充，以適應(yīng)未來(lái)環(huán)境的需要

　　降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶

　　10.CSS隱藏元素的幾種方式及區(qū)別

　　display:none

　　元素在頁(yè)面上將徹底消失，元素本來(lái)占有的空間就會(huì)被其他元素占有，也就是說(shuō)它會(huì)導(dǎo)致瀏覽器的重排和重繪。

　　不會(huì)觸發(fā)其點(diǎn)擊事件

　　visibility:hidden

　　和display:none的區(qū)別在于，元素在頁(yè)面消失后，其占據(jù)的空間依舊會(huì)保留著，所以它只會(huì)導(dǎo)致瀏覽器重繪而不會(huì)重排。無(wú)法觸發(fā)其點(diǎn)擊事件,適用于那些元素隱藏后不希望頁(yè)面布局會(huì)發(fā)生變化的場(chǎng)景

　　opacity:0

　　將元素的透明度設(shè)置為0后，在我們用戶(hù)眼中，元素也是隱藏的，這算是一種隱藏元素的方法。和visibility:hidden的一個(gè)共同點(diǎn)是元素隱藏后依舊占據(jù)著空間，但我們都知道，設(shè)置透明度為0后，元素只是隱身了，它依舊存在頁(yè)面中?？梢杂|發(fā)點(diǎn)擊事件

　　設(shè)置height，width等盒模型屬性為0

　　簡(jiǎn)單說(shuō)就是將元素的margin，border，padding，height和width等影響元素盒模型的屬性設(shè)置成0，如果元素內(nèi)有子元素或內(nèi)容，還應(yīng)該設(shè)置其overflow:hidden來(lái)隱藏其子元素，這算是一種奇技淫巧。

　　如果元素設(shè)置了border，padding等屬性不為0，很顯然，頁(yè)面上還是能看到這個(gè)元素的，觸發(fā)元素的點(diǎn)擊事件完全沒(méi)有問(wèn)題。如果全部屬性都設(shè)置為0，很顯然，這個(gè)元素相當(dāng)于消失了，即無(wú)法觸發(fā)點(diǎn)擊事件。

　　這種方式既不實(shí)用，也可能存在著著一些問(wèn)題。但平時(shí)我們用到的一些頁(yè)面效果可能就是采用這種方式來(lái)完成的，比如jquery的slideUp動(dòng)畫(huà)，它就是設(shè)置元素的overflow:hidden后，接著通過(guò)定時(shí)器，不斷地設(shè)置元素的height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom為0，從而達(dá)到slideUp的效果。

　　其他腦洞方法

　　設(shè)置元素的position與left，top，bottom，right等，將元素移出至屏幕外

　　設(shè)置元素的position與z-index，將z-index設(shè)置成盡量小的負(fù)數(shù)

　　href是指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接，用于超鏈接。

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

　　行內(nèi)元素：a、b、span、img、input、strong、select、label、em、button、textarea

　　塊級(jí)元素：div、ul、li、dl、dt、dd、p、h2-h7、blockquote

　　空元素：即系沒(méi)有內(nèi)容的HTML元素，例如：br、meta、hr、link、input、img

以上就是關(guān)于“HTML和CSS的重難點(diǎn)問(wèn)題有哪些”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。