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

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

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供港南網(wǎng)站建設、港南做網(wǎng)站、港南網(wǎng)站設計、港南網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、港南企業(yè)網(wǎng)站模板建站服務,10多年港南做網(wǎng)站經(jīng)驗,不只是建網(wǎng)站,更提供有價值的思路和整體網(wǎng)絡服務。

怎么讓一個不定寬高的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。一般都要配合“l(fā)eft”、”top”、”right”以及“bottom”屬性使用。

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

relative:相對定位。相對定位是相對于元素默認的位置的定位,它偏移的top,right,bottom,left的值都以它原來的位置為基準偏移,而不管其他元素會怎么樣。注意relative移動后的元素在原來的位置仍占據(jù)空間。

absolute:絕對定位。設置為absolute的元素,如果它的父容器設置了position屬性,并且position的屬性值為absolute或者relative,那么就會依據(jù)父容器進行偏移。如果其父容器沒有設置position屬性,那么偏移是以body為依據(jù)。注意設置absolute屬性的元素在標準流中不占位置。

fixed:固定定位。位置被設置為fixed的元素,可定位于相對于瀏覽器窗口的指定坐標。不論窗口滾動與否,元素都會留在那個位置。它始終是以body為依據(jù)的。注意設置fixed屬性的元素在標準流中不占位置。

浮動與清除浮動

3.1浮動相關知識

float屬性的取值:

left:元素向左浮動。

right:元素向右浮動。

none:默認值。元素不浮動,并會顯示在其在文本中出現(xiàn)的位置。

浮動的特性:

浮動元素會從普通文檔流中脫離,但浮動元素影響的不僅是自己,它會影響周圍的元素對齊進行環(huán)繞。

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

浮動元素的展示在不同情況下會有不同的規(guī)則:

浮動元素在浮動的時候,其margin不會超過包含塊的padding。PS:如果想要元素超出,可以設置margin屬性

如果兩個元素一個向左浮動,一個向右浮動,左浮動元素的marginRight不會和右浮動元素的marginLeft相鄰。

如果有多個浮動元素,浮動元素會按順序排下來而不會發(fā)生重疊的現(xiàn)象。

如果有多個浮動元素,后面的元素高度不會超過前面的元素,并且不會超過包含塊。

如果有非浮動元素和浮動元素同時存在,并且非浮動元素在前,則浮動元素不會高于非浮動元素

浮動元素會盡可能地向頂端對齊、向左或向右對齊

重疊問題

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

塊級元素與浮動元素發(fā)生重疊時,邊框和背景會顯示在浮動元素之下,內(nèi)容會顯示在浮動元素之上

clear屬性

clear屬性:確保當前元素的左右兩側不會有浮動元素。clear只對元素本身的布局起作用。

取值:left、right、both

3.2父元素高度塌陷問題

為什么要清除浮動,父元素高度塌陷

解決父元素高度塌陷問題:一個塊級元素如果沒有設置height,其height是由子元素撐開的。對子元素使用了浮動之后,子元素會脫離標準文檔流,也就是說,父級元素中沒有內(nèi)容可以撐開其高度,這樣父級元素的height就會被忽略,這就是所謂的高度塌陷。

3.3清除浮動的方法

方法1:給父級p定義高度

原理:給父級p定義固定高度(height),能解決父級p無法獲取高度得問題。

優(yōu)點:代碼簡潔

缺點:高度被固定死了,是適合內(nèi)容固定不變的模塊。(不推薦使用)

方法二:使用空元素,如

(.clear{clear:both})

原理:添加一對空的p標簽,利用css的clear:both屬性清除浮動,讓父級p能夠獲取高度。

優(yōu)點:瀏覽器支持好

缺點:多出了很多空的p標簽,如果頁面中浮動模塊多的話,就會出現(xiàn)很多的空置p了,這樣感覺視乎不是太令人滿意。(不推薦使用)

方法三:讓父級p也一并浮起來

這樣做可以初步解決當前的浮動問題。但是也讓父級浮動起來了,又會產(chǎn)生新的浮動問題。不推薦使用

方法四:父級p定義display:table

原理:將p屬性強制變成表格

優(yōu)點:不解

缺點:會產(chǎn)生新的未知問題。(不推薦使用)

方法五:父元素設置overflow:hidden、auto;

原理:這個方法的關鍵在于觸發(fā)了BFC。在IE6中還需要觸發(fā)hasLayout(zoom:1)

優(yōu)點:代碼簡介,不存在結構和語義化問題

缺點:無法顯示需要溢出的元素(亦不太推薦使用)

方法六:父級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浮動問題

優(yōu)點:結構和語義化完全正確,代碼量也適中,可重復利用率(建議定義公共類)

缺點:代碼不是非常簡潔(極力推薦使用)

經(jīng)益求精寫法

.clearfix:after{

content:”\200B”;

display:block;

height:0;

clear:both;

}

.clearfix{*zoom:1;}照顧IE6,IE7就可以了

4.BFC相關知識

定義:BFC(Blockformattingcontext)直譯為“塊級格式化上下文”。它是一個獨立的渲染區(qū)域,只有Block-levelbox參與,它規(guī)定了內(nèi)部的Block-levelBox如何布局,并且與這個區(qū)域外部毫不相干。

BFC布局規(guī)則

BFC就是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素。反之也如此。

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

BFC的區(qū)域不會與浮動盒子重疊(清除浮動原理)。

計算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,默認值,只計算內(nèi)容的寬度,border和padding不計算入width之內(nèi)

padding-box,padding計算入寬度內(nèi)

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

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

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

em是相對長度單位,相對于當前對象內(nèi)文本的字體尺寸。如當前對行內(nèi)文本的字體尺寸未被人為設置,則相對于瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小,因此并不是一個固定的值。

rem是CSS3新增的一個相對單位(rootem,根em),使用rem為元素設定字體大小時,仍然是相對大小,但相對的只是HTML根元素。

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

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

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

link是XHTML標簽,除了加載CSS外,還可以定義RSS等其他事務;@import屬于CSS范疇,只能加載CSS。

link引用CSS時,在頁面載入時同時加載;@import需要頁面網(wǎng)頁完全載入以后加載。

link是XHTML標簽,無兼容問題;@import是在CSS2.1提出的,低版本的瀏覽器不支持。

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

流式布局與響應式布局的區(qū)別

流式布局

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

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

響應式開發(fā)

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

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

小屏設備768px-992px

中等屏幕992px-1200px

寬屏設備1200px以上

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

區(qū)別

-

流式布局

響應式開發(fā)

開發(fā)方式

移動Web開發(fā)+PC開發(fā)

響應式開發(fā)

應用場景

一般在已經(jīng)有PC端網(wǎng)站,開發(fā)移動的的時候只需要單獨開發(fā)移動端

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

開發(fā)

正對性強,開發(fā)效率高

兼容各種終端,效率低

適配

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

可以適配各種終端

效率

代碼簡潔,加載快

代碼相對復雜,加載慢

漸進增強和優(yōu)雅降級

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

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

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

區(qū)別:

優(yōu)雅降級是從復雜的現(xiàn)狀開始,并試圖減少用戶體驗的供給

漸進增強則是從一個非?;A的,能夠起作用的版本開始,并不斷擴充,以適應未來環(huán)境的需要

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

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

display:none

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

不會觸發(fā)其點擊事件

visibility:hidden

和display:none的區(qū)別在于,元素在頁面消失后,其占據(jù)的空間依舊會保留著,所以它只會導致瀏覽器重繪而不會重排。

無法觸發(fā)其點擊事件

適用于那些元素隱藏后不希望頁面布局會發(fā)生變化的場景

opacity:0

將元素的透明度設置為0后,在我們用戶眼中,元素也是隱藏的,這算是一種隱藏元素的方法。

和visibility:hidden的一個共同點是元素隱藏后依舊占據(jù)著空間,但我們都知道,設置透明度為0后,元素只是隱身了,它依舊存在頁面中。

可以觸發(fā)點擊事件

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

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

如果元素設置了border,padding等屬性不為0,很顯然,頁面上還是能看到這個元素的,觸發(fā)元素的點擊事件完全沒有問題。如果全部屬性都設置為0,很顯然,這個元素相當于消失了,即無法觸發(fā)點擊事件。

這種方式既不實用,也可能存在著著一些問題。但平時我們用到的一些頁面效果可能就是采用這種方式來完成的,比如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設置成盡量小的負數(shù)

簡述一下src與href的區(qū)別

href是指向網(wǎng)絡資源所在位置,建立和當前元素(錨點)或當前文檔(鏈接)之間的鏈接,用于超鏈接。

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

行內(nèi)元素有哪些?塊級元素有哪些?空(void)元素有那些?

這個問題面試偶爾被問到的時候有點懵逼~~~平時沒在意。。。。

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

塊級元素:p、ul、li、dl、dt、dd、p、h2-h7、blockquote

空元素:即系沒有內(nèi)容的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。一般都要配合“l(fā)eft”、”top”、”right”以及“bottom”屬性使用。

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

relative:相對定位。相對定位是相對于元素默認的位置的定位,它偏移的top,right,bottom,left的值都以它原來的位置為基準偏移,而不管其他元素會怎么樣。注意relative移動后的元素在原來的位置仍占據(jù)空間。

absolute:絕對定位。設置為absolute的元素,如果它的父容器設置了position屬性,并且position的屬性值為absolute或者relative,那么就會依據(jù)父容器進行偏移。如果其父容器沒有設置position屬性,那么偏移是以body為依據(jù)。注意設置absolute屬性的元素在標準流中不占位置。

fixed:固定定位。位置被設置為fixed的元素,可定位于相對于瀏覽器窗口的指定坐標。不論窗口滾動與否,元素都會留在那個位置。它始終是以body為依據(jù)的。注意設置fixed屬性的元素在標準流中不占位置。

浮動與清除浮動

3.1浮動相關知識

float屬性的取值:

left:元素向左浮動。

right:元素向右浮動。

none:默認值。元素不浮動,并會顯示在其在文本中出現(xiàn)的位置。

浮動的特性:

浮動元素會從普通文檔流中脫離,但浮動元素影響的不僅是自己,它會影響周圍的元素對齊進行環(huán)繞。

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

浮動元素的展示在不同情況下會有不同的規(guī)則:

浮動元素在浮動的時候,其margin不會超過包含塊的padding。PS:如果想要元素超出,可以設置margin屬性

如果兩個元素一個向左浮動,一個向右浮動,左浮動元素的marginRight不會和右浮動元素的marginLeft相鄰。

如果有多個浮動元素,浮動元素會按順序排下來而不會發(fā)生重疊的現(xiàn)象。

如果有多個浮動元素,后面的元素高度不會超過前面的元素,并且不會超過包含塊。

如果有非浮動元素和浮動元素同時存在,并且非浮動元素在前,則浮動元素不會高于非浮動元素

浮動元素會盡可能地向頂端對齊、向左或向右對齊

重疊問題

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

塊級元素與浮動元素發(fā)生重疊時,邊框和背景會顯示在浮動元素之下,內(nèi)容會顯示在浮動元素之上

clear屬性

clear屬性:確保當前元素的左右兩側不會有浮動元素。clear只對元素本身的布局起作用。

取值:left、right、both

3.2父元素高度塌陷問題

為什么要清除浮動,父元素高度塌陷

解決父元素高度塌陷問題:一個塊級元素如果沒有設置height,其height是由子元素撐開的。對子元素使用了浮動之后,子元素會脫離標準文檔流,也就是說,父級元素中沒有內(nèi)容可以撐開其高度,這樣父級元素的height就會被忽略,這就是所謂的高度塌陷。

3.3清除浮動的方法

方法1:給父級p定義高度

原理:給父級p定義固定高度(height),能解決父級p無法獲取高度得問題。

優(yōu)點:代碼簡潔

缺點:高度被固定死了,是適合內(nèi)容固定不變的模塊。(不推薦使用)

方法二:使用空元素,如

(.clear{clear:both})

原理:添加一對空的p標簽,利用css的clear:both屬性清除浮動,讓父級p能夠獲取高度。

優(yōu)點:瀏覽器支持好

缺點:多出了很多空的p標簽,如果頁面中浮動模塊多的話,就會出現(xiàn)很多的空置p了,這樣感覺視乎不是太令人滿意。(不推薦使用)

方法三:讓父級p也一并浮起來

這樣做可以初步解決當前的浮動問題。但是也讓父級浮動起來了,又會產(chǎn)生新的浮動問題。不推薦使用

方法四:父級p定義display:table

原理:將p屬性強制變成表格

優(yōu)點:不解

缺點:會產(chǎn)生新的未知問題。(不推薦使用)

方法五:父元素設置overflow:hidden、auto;

原理:這個方法的關鍵在于觸發(fā)了BFC。在IE6中還需要觸發(fā)hasLayout(zoom:1)

優(yōu)點:代碼簡介,不存在結構和語義化問題

缺點:無法顯示需要溢出的元素(亦不太推薦使用)

方法六:父級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浮動問題

優(yōu)點:結構和語義化完全正確,代碼量也適中,可重復利用率(建議定義公共類)

缺點:代碼不是非常簡潔(極力推薦使用)

經(jīng)益求精寫法

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

BFC布局規(guī)則

BFC就是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素。反之也如此。

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

BFC的區(qū)域不會與浮動盒子重疊(清除浮動原理)。

計算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,默認值,只計算內(nèi)容的寬度,border和padding不計算入width之內(nèi)

padding-box,padding計算入寬度內(nèi)

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

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

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

em是相對長度單位,相對于當前對象內(nèi)文本的字體尺寸。如當前對行內(nèi)文本的字體尺寸未被人為設置,則相對于瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小,因此并不是一個固定的值。

rem是CSS3新增的一個相對單位(rootem,根em),使用rem為元素設定字體大小時,仍然是相對大小,但相對的只是HTML根元素。

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

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

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

link是XHTML標簽,除了加載CSS外,還可以定義RSS等其他事務;@import屬于CSS范疇,只能加載CSS。

link引用CSS時,在頁面載入時同時加載;@import需要頁面網(wǎng)頁完全載入以后加載。

link是XHTML標簽,無兼容問題;@import是在CSS2.1提出的,低版本的瀏覽器不支持。

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

流式布局與響應式布局的區(qū)別

流式布局

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

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

響應式開發(fā)

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

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

小屏設備768px-992px

中等屏幕992px-1200px

寬屏設備1200px以上

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

區(qū)別

-

流式布局

響應式開發(fā)

開發(fā)方式

移動Web開發(fā)+PC開發(fā)

響應式開發(fā)

應用場景

一般在已經(jīng)有PC端網(wǎng)站,開發(fā)移動的的時候只需要單獨開發(fā)移動端

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

開發(fā)

正對性強,開發(fā)效率高

兼容各種終端,效率低

適配

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

可以適配各種終端

效率

代碼簡潔,加載快

代碼相對復雜,加載慢

漸進增強和優(yōu)雅降級

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

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

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

區(qū)別:

優(yōu)雅降級是從復雜的現(xiàn)狀開始,并試圖減少用戶體驗的供給

漸進增強則是從一個非?;A的,能夠起作用的版本開始,并不斷擴充,以適應未來環(huán)境的需要

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

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

display:none

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

不會觸發(fā)其點擊事件

visibility:hidden

和display:none的區(qū)別在于,元素在頁面消失后,其占據(jù)的空間依舊會保留著,所以它只會導致瀏覽器重繪而不會重排。

無法觸發(fā)其點擊事件

適用于那些元素隱藏后不希望頁面布局會發(fā)生變化的場景

opacity:0

將元素的透明度設置為0后,在我們用戶眼中,元素也是隱藏的,這算是一種隱藏元素的方法。

和visibility:hidden的一個共同點是元素隱藏后依舊占據(jù)著空間,但我們都知道,設置透明度為0后,元素只是隱身了,它依舊存在頁面中。

可以觸發(fā)點擊事件

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

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

如果元素設置了border,padding等屬性不為0,很顯然,頁面上還是能看到這個元素的,觸發(fā)元素的點擊事件完全沒有問題。如果全部屬性都設置為0,很顯然,這個元素相當于消失了,即無法觸發(fā)點擊事件。

這種方式既不實用,也可能存在著著一些問題。但平時我們用到的一些頁面效果可能就是采用這種方式來完成的,比如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設置成盡量小的負數(shù)

簡述一下src與href的區(qū)別

href是指向網(wǎng)絡資源所在位置,建立和當前元素(錨點)或當前文檔(鏈接)之間的鏈接,用于超鏈接。

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

行內(nèi)元素有哪些?塊級元素有哪些?空(void)元素有那些?

這個問題面試偶爾被問到的時候有點懵逼~~~平時沒在意。。。。

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

塊級元素:p、ul、li、dl、dt、dd、p、h2-h7、blockquote

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

到此,關于“HTML和CSS的重難點知識點有哪些”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續(xù)學習更多相關知識,請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

網(wǎng)頁名稱:HTML和CSS的重難點知識點有哪些
URL分享:http://muchs.cn/article14/gphsde.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供商城網(wǎng)站、電子商務、小程序開發(fā)、網(wǎng)站建設企業(yè)網(wǎng)站制作、全網(wǎng)營銷推廣

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)

手機網(wǎng)站建設