HTML和CSS重難點(diǎn)知識點(diǎn)有哪些

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

創(chuàng)新互聯(lián)專注于市中網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供市中營銷型網(wǎng)站建設(shè),市中網(wǎng)站制作、市中網(wǎng)頁設(shè)計(jì)、市中網(wǎng)站官網(wǎng)定制、微信小程序服務(wù),打造市中網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供市中網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

html是什么

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

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

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

使用 CSS3 transform

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

使用 display:table-cell 方法

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

2.position 幾個屬性的作用
position 的常見四個屬性值: relative,absolute,fixed,static。一般都要配合 “l(fā)eft”、”top”、”right” 以及 “bottom” 屬性使用。

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

  1. 浮動與清除浮動
    3.1 浮動相關(guān)知識
    float 屬性的取值:

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

浮動的特性:

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

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

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

重疊問題

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

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

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

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

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

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

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

BFC 這個元素的垂直方向的邊距會發(fā)生重疊,垂直方向的距離由 margin 決定,取最大值
BFC 的區(qū)域不會與浮動盒子重疊(清除浮動原理)。
計(jì)算 BFC 的高度時,浮動元素也參與計(jì)算。

哪些元素會生成 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 屬性可以為三個值之一:

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)。絕對單位。像素 px 是相對于顯示器屏幕分辨率而言的,是一個虛擬長度單位,是計(jì)算 機(jī)系統(tǒng)的數(shù)字化圖像長度單位,如果 px 要換算成物理長度,需要指定精度 DPI。
em 是相對長度單位,相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置, 則相對于瀏覽器的默認(rèn)字體尺寸。它會繼承父級元素的字體大小,因此并不是一個固定的值。
rem 是 CSS3 新增的一個相對單位 (root em,根 em),使用 rem 為元素設(shè)定字體大小時,仍然是相對大小, 但相對的只是 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 時,在頁面載入時同時加載;@import 需要頁面網(wǎng)頁完全載入以后加載。
link 是 XHTML 標(biāo)簽,無兼容問題;@import 是在 CSS2.1 提出的,低版本的瀏覽器不支持。
link 支持使用 Javascript 控制 DOM 去改變樣式;而 @import 不支持。

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

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

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

-
流式布局
響應(yīng)式開發(fā)

開發(fā)方式
移動 Web 開發(fā) + PC 開發(fā)
響應(yīng)式開發(fā)

應(yīng)用場景
一般在已經(jīng)有 PC 端網(wǎng)站,開發(fā)移動的的時候只需要單獨(dú)開發(fā)移動端
針對一些新建的網(wǎng)站,現(xiàn)在要求適配移動端,所以就一套頁面兼容各種終端

開發(fā)
正對性強(qiáng),開發(fā)效率高
兼容各種終端,效率低

適配
只適配移動設(shè)備,pad 上體驗(yàn)相對較差
可以適配各種終端

效率
代碼簡潔,加載快
代碼相對復(fù)雜,加載慢

  1. 漸進(jìn)增強(qiáng)和優(yōu)雅降級
    關(guān)鍵的區(qū)別是他們所側(cè)重的內(nèi)容,以及這種不同造成的工作流程的差異

優(yōu)雅降級一開始就構(gòu)建完整的功能,然后再針對低版本瀏覽器進(jìn)行兼容。。
漸進(jìn)增強(qiáng)針對低版本瀏覽器進(jìn)行構(gòu)建頁面,保證最基本的功能,然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。

區(qū)別:

優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始,并試圖減少用戶體驗(yàn)的供給
漸進(jìn)增強(qiáng)則是從一個非常基礎(chǔ)的,能夠起作用的版本開始,并不斷擴(kuò)充,以適應(yīng)未來環(huán)境的需要
降級(功能衰減)意味著往回看;而漸進(jìn)增強(qiáng)則意味著朝前看,同時保證其根基處于安全地帶

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

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

visibility:hidden

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

opacity:0

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

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

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

  1. 簡述一下 src 與 href 的區(qū)別
    href 是指向網(wǎng)絡(luò)資源所在位置,建立和當(dāng)前元素(錨點(diǎn))或當(dāng)前文檔(鏈接)之間的鏈接,用于超鏈接。
    src 是指向外部資源的位置,指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置;在請求 src 資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi),例如 js 腳本,img 圖片和 frame 等元素。當(dāng)瀏覽器解析到該元素時,會暫停其他資源的下載和處理,直到將該資源加載、編譯、執(zhí)行完畢,圖片和框架等元素也如此,類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將 js 腳本放在底部而不是頭部。

  2. 行內(nèi)元素有哪些?塊級元素有哪些? 空 (void) 元素有那些?
    這個問題面試偶爾被問到的時候有點(diǎn)懵逼~~~ 平時沒在意。。。。
    行內(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

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

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

使用 CSS3 transform

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

使用 display:table-cell 方法

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

2.position 幾個屬性的作用
position 的常見四個屬性值: relative,absolute,fixed,static。一般都要配合 “l(fā)eft”、”top”、”right” 以及 “bottom” 屬性使用。

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

  1. 浮動與清除浮動
    3.1 浮動相關(guān)知識
    float 屬性的取值:

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

浮動的特性:

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

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

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

重疊問題

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

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

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

詳細(xì)關(guān)于浮動的知識請參看這篇文章:
http://luopq.com/2015/11/08/CSS-float/

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

BFC 這個元素的垂直方向的邊距會發(fā)生重疊,垂直方向的距離由 margin 決定,取最大值
BFC 的區(qū)域不會與浮動盒子重疊(清除浮動原理)。
計(jì)算 BFC 的高度時,浮動元素也參與計(jì)算。

哪些元素會生成 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 屬性可以為三個值之一:

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)。絕對單位。像素 px 是相對于顯示器屏幕分辨率而言的,是一個虛擬長度單位,是計(jì)算 機(jī)系統(tǒng)的數(shù)字化圖像長度單位,如果 px 要換算成物理長度,需要指定精度 DPI。
em 是相對長度單位,相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置, 則相對于瀏覽器的默認(rèn)字體尺寸。它會繼承父級元素的字體大小,因此并不是一個固定的值。
rem 是 CSS3 新增的一個相對單位 (root em,根 em),使用 rem 為元素設(shè)定字體大小時,仍然是相對大小, 但相對的只是 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 時,在頁面載入時同時加載;@import 需要頁面網(wǎng)頁完全載入以后加載。
link 是 XHTML 標(biāo)簽,無兼容問題;@import 是在 CSS2.1 提出的,低版本的瀏覽器不支持。
link 支持使用 Javascript 控制 DOM 去改變樣式;而 @import 不支持。

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

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

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

-
流式布局
響應(yīng)式開發(fā)

開發(fā)方式
移動 Web 開發(fā) + PC 開發(fā)
響應(yīng)式開發(fā)

應(yīng)用場景
一般在已經(jīng)有 PC 端網(wǎng)站,開發(fā)移動的的時候只需要單獨(dú)開發(fā)移動端
針對一些新建的網(wǎng)站,現(xiàn)在要求適配移動端,所以就一套頁面兼容各種終端

開發(fā)
正對性強(qiáng),開發(fā)效率高
兼容各種終端,效率低

適配
只適配移動設(shè)備,pad 上體驗(yàn)相對較差
可以適配各種終端

效率
代碼簡潔,加載快
代碼相對復(fù)雜,加載慢

  1. 漸進(jìn)增強(qiáng)和優(yōu)雅降級
    關(guān)鍵的區(qū)別是他們所側(cè)重的內(nèi)容,以及這種不同造成的工作流程的差異

優(yōu)雅降級一開始就構(gòu)建完整的功能,然后再針對低版本瀏覽器進(jìn)行兼容。。
漸進(jìn)增強(qiáng)針對低版本瀏覽器進(jìn)行構(gòu)建頁面,保證最基本的功能,然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。

區(qū)別:

優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始,并試圖減少用戶體驗(yàn)的供給
漸進(jìn)增強(qiáng)則是從一個非?;A(chǔ)的,能夠起作用的版本開始,并不斷擴(kuò)充,以適應(yīng)未來環(huán)境的需要
降級(功能衰減)意味著往回看;而漸進(jìn)增強(qiáng)則意味著朝前看,同時保證其根基處于安全地帶

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

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

visibility:hidden

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

opacity:0

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

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

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

  1. 簡述一下 src 與 href 的區(qū)別
    href 是指向網(wǎng)絡(luò)資源所在位置,建立和當(dāng)前元素(錨點(diǎn))或當(dāng)前文檔(鏈接)之間的鏈接,用于超鏈接。
    src 是指向外部資源的位置,指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置;在請求 src 資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi),例如 js 腳本,img 圖片和 frame 等元素。當(dāng)瀏覽器解析到該元素時,會暫停其他資源的下載和處理,直到將該資源加載、編譯、執(zhí)行完畢,圖片和框架等元素也如此,類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將 js 腳本放在底部而不是頭部。

  2. 行內(nèi)元素有哪些?塊級元素有哪些? 空 (void) 元素有那些?
    這個問題面試偶爾被問到的時候有點(diǎn)懵逼~~~ 平時沒在意。。。。
    行內(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重難點(diǎn)知識點(diǎn)有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!

網(wǎng)站標(biāo)題:HTML和CSS重難點(diǎn)知識點(diǎn)有哪些
路徑分享:http://www.muchs.cn/article36/jdocpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計(jì)、商城網(wǎng)站、移動網(wǎng)站建設(shè)、網(wǎng)站制作、響應(yīng)式網(wǎng)站品牌網(wǎng)站設(shè)計(jì)

廣告

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

成都做網(wǎng)站