成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端面試筆記 - css

loonggg / 2477人閱讀

摘要：是頁(yè)面渲染的一部分。一個(gè)就是一個(gè)整體，所有子元素都會(huì)在里面渲染，而不會(huì)影響外面的元素。常見(jiàn)為，根元素，，元素，或者設(shè)置了的元素列舉不同的清除浮動(dòng)的技巧，并指出它們各自適用的使用場(chǎng)景。是一個(gè)把眾多小圖片打包成一個(gè)大圖以減少請(qǐng)求。

CSS 中類 (classes) 和 ID 的區(qū)別。

id唯一，class可以多個(gè)

請(qǐng)問(wèn) "resetting" 和 "normalizing" CSS 之間的區(qū)別？你會(huì)如何選擇，為什么？

restting： 移除網(wǎng)頁(yè)的所有默認(rèn)樣式
normalizing： 修復(fù)跨瀏覽器的一致性，解決不同瀏覽器的顯示問(wèn)題。

請(qǐng)解釋浮動(dòng) (Floats) 及其工作原理。

float包括right,left,none;設(shè)置該屬性，這個(gè)元素會(huì)脫離文檔流直到遇到包裹他的容器或者其他浮動(dòng)元素

描述z-index和疊加上下文是如何形成的。

z-index會(huì)設(shè)置元素在Z軸的位置，按照從高到底堆疊

請(qǐng)描述 BFC(Block Formatting Context) 及其如何工作。

bfc是頁(yè)面渲染的一部分。一個(gè)bfc就是一個(gè)整體，所有子元素都會(huì)在bfc里面渲染，而不會(huì)影響外面的元素。常見(jiàn)bfc為，根元素，float，postion元素，或者設(shè)置了overflow的元素

列舉不同的清除浮動(dòng)的技巧，并指出它們各自適用的使用場(chǎng)景。

clear:both;
設(shè)置bfc
overflow: hidden;
height: auto;

請(qǐng)解釋 CSS sprites，以及你要如何在頁(yè)面或網(wǎng)站中實(shí)現(xiàn)它。

css sprites是一個(gè)把眾多小圖片打包成一個(gè)大圖以減少http請(qǐng)求。
background: url(...) x-axis y-axis;

你最喜歡的圖片替換方法是什么，你如何選擇使用。 你會(huì)如何解決特定瀏覽器的樣式問(wèn)題？ 如何為有功能限制的瀏覽器提供網(wǎng)頁(yè)？ 你會(huì)使用哪些技術(shù)和處理方法？ 有哪些的隱藏內(nèi)容的方法 (如果同時(shí)還要保證屏幕閱讀器可用呢)？ 你用過(guò)柵格系統(tǒng) (grid system) 嗎？如果使用過(guò)，你最喜歡哪種？ 你用過(guò)媒體查詢，或針對(duì)移動(dòng)端的布局/CSS 嗎？

用過(guò)使用媒體查詢截圖特定分辨率的樣式問(wèn)題
media screen (width:){

}

你熟悉 SVG 樣式的書(shū)寫嗎？ 如何優(yōu)化網(wǎng)頁(yè)的打印樣式？ 在書(shū)寫高效 CSS 時(shí)會(huì)有哪些問(wèn)題需要考慮？

優(yōu)先使用類選擇器和ID選擇器
避免使用其他選擇規(guī)則，如tag
避免使用后代選擇器

使用 CSS 預(yù)處理器的優(yōu)缺點(diǎn)有哪些？

可以方便的實(shí)現(xiàn)變量，運(yùn)算，繼承等高級(jí)特性
需要編譯 不能直接使用

請(qǐng)描述你曾經(jīng)使用過(guò)的 CSS 預(yù)處理器的優(yōu)缺點(diǎn)。

scss

如果設(shè)計(jì)中使用了非標(biāo)準(zhǔn)的字體，你該如何去實(shí)現(xiàn)？

使用@font-face，和@import

請(qǐng)解釋瀏覽器是如何判斷元素是否匹配某個(gè) CSS 選擇器？

從右到左讀取，先判斷子類，后判斷父類

請(qǐng)描述偽元素 (pseudo-elements) 及其用途。

在不影響原有html的情況下，加入新的樣式

請(qǐng)解釋你對(duì)盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不同的盒模型來(lái)渲染你的布局。

margin border padding content

box-sizing: border-box; width包括border padding

box-sizing: content-box; width只包括內(nèi)容

請(qǐng)解釋 * { box-sizing: border-box; } 的作用, 并且說(shuō)明使用它有什么好處？

所有元素，不包括偽元素的合模型為border-box

請(qǐng)羅列出你所知道的 display 屬性的全部值

flex inline inline-block block
flex最新的彈性布局
inline 內(nèi)聯(lián)元素
inline-block可以設(shè)置寬高的內(nèi)聯(lián)元素
block 塊元素，獨(dú)占一行

請(qǐng)解釋 inline 和 inline-block 的區(qū)別？

inline設(shè)置寬高，padding margin top bottom都無(wú)效

請(qǐng)解釋 relative、fixed、absolute 和 static 元素的區(qū)別

relatvie相對(duì)自身
fixed相對(duì)屏幕
absolute相對(duì)祖先元素中第一個(gè)不為static的位置
static 默認(rèn)

CSS 中字母 "C" 的意思是疊層 (Cascading)。請(qǐng)問(wèn)在確定樣式的過(guò)程中優(yōu)先級(jí)是如何決定的 (請(qǐng)舉例)？如何有效使用此系統(tǒng)？

ID > class, psuedo-class > element, psudo-element

你在開(kāi)發(fā)或生產(chǎn)環(huán)境中使用過(guò)哪些 CSS 框架？你覺(jué)得應(yīng)該如何改善他們？

BOOTSTRAP

請(qǐng)問(wèn)你有嘗試過(guò) CSS Flexbox 或者 Grid 標(biāo)準(zhǔn)規(guī)格嗎？

FLEX
align-item: 交叉軸排布
justiy-content: 主軸排布
flex: 放大 縮小 自動(dòng);設(shè)置權(quán)重
flex-direction: 設(shè)置方向

為什么響應(yīng)式設(shè)計(jì) (responsive design) 和自適應(yīng)設(shè)計(jì) (adaptive design) 不同？

響應(yīng)式 只有一種布局，根據(jù)屏幕自動(dòng)改變
自適應(yīng) pc，平板，手機(jī)都有各自的布局

你有兼容 retina 屏幕的經(jīng)歷嗎？如果有，在什么地方使用了何種技術(shù)？

媒體查詢
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
...
}

請(qǐng)問(wèn)為何要使用 translate() 而非 absolute positioning，或反之的理由？為什么？

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101232.html

相關(guān)文章

  • 基本方法筆記 - 收藏集 - 掘金

    摘要：探討判斷橫豎屏的最佳實(shí)現(xiàn)前端掘金在移動(dòng)端，判斷橫豎屏的場(chǎng)景并不少見(jiàn)，比如根據(jù)橫豎屏以不同的樣式來(lái)適配，抑或是提醒用戶切換為豎屏以保持良好的用戶體驗(yàn)。 探討判斷橫豎屏的最佳實(shí)現(xiàn) - 前端 - 掘金在移動(dòng)端，判斷橫豎屏的場(chǎng)景并不少見(jiàn)，比如根據(jù)橫豎屏以不同的樣式來(lái)適配，抑或是提醒用戶切換為豎屏以保持良好的用戶體驗(yàn)。 判斷橫豎屏的實(shí)現(xiàn)方法多種多樣，本文就此來(lái)探討下目前有哪些實(shí)現(xiàn)方法以及其中的優(yōu)...

    maochunguang 評(píng)論0 收藏0

  • CSS技巧 - 收藏集 - 掘金

    摘要：筆者作為一位，將工作以來(lái)用到的各種優(yōu)秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識(shí)點(diǎn)大百科全書(shū)前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計(jì)算數(shù)組的極值技巧使你的更加專業(yè)前端掘金一個(gè)幫你提升技巧的收藏集。 CSS 樣式畫(huà)各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經(jīng)常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會(huì)用到。會(huì)持續(xù)更新… 一、...

    Jonathan Shieber 評(píng)論0 收藏0

  • CSS技巧 - 收藏集 - 掘金

    摘要：筆者作為一位，將工作以來(lái)用到的各種優(yōu)秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識(shí)點(diǎn)大百科全書(shū)前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計(jì)算數(shù)組的極值技巧使你的更加專業(yè)前端掘金一個(gè)幫你提升技巧的收藏集。 CSS 樣式畫(huà)各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經(jīng)常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會(huì)用到。會(huì)持續(xù)更新… 一、...

    SHERlocked93 評(píng)論0 收藏0

  • 前端面試筆記 - 性能

    摘要：頁(yè)面中元素的布局是相對(duì)的，因此一個(gè)元素的布局發(fā)生變化，會(huì)聯(lián)動(dòng)地引發(fā)其他元素的布局發(fā)生變化。對(duì)于有位置重疊的元素的頁(yè)面，這個(gè)過(guò)程尤其重要，因?yàn)橐坏﹫D層的合并順序出錯(cuò)，將會(huì)導(dǎo)致元素顯示異常。 What tools would you use to find a performance bug in your code? chrome What are some ways you may i...

    JouyPub 評(píng)論0 收藏0

  • 前端面試筆記 - html

    摘要：為了支持在網(wǎng)絡(luò)標(biāo)準(zhǔn)被廣泛采用前，就已經(jīng)建好的網(wǎng)站，這么做是必要的。在接近標(biāo)準(zhǔn)模式下，只有少數(shù)的怪異行為被實(shí)現(xiàn)。和有什么區(qū)別擁有更加嚴(yán)格的標(biāo)簽檢查元素必須被正確地嵌套。元素必須被關(guān)閉。標(biāo)簽名必須用小寫字母。 doctype(文檔類型) 的作用是什么？ doctype聲明指出閱讀程序應(yīng)該用什么規(guī)則集來(lái)解釋文檔中的標(biāo)記 瀏覽器標(biāo)準(zhǔn)模式 (standards mode) 、幾乎標(biāo)準(zhǔn)模式（alm...

    LoftySoul 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<