国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

面試前端時遇到的CSS題目

kycool / 442人閱讀

摘要：昨天面試了本地的一家公司，面試的前端。行內(nèi)元素，不可設(shè)置寬高其實正確答案應(yīng)該是設(shè)置無效，單行顯示直到一行排列不下，才會換新一行。頭部有固定的高度像素，內(nèi)容容器是像素而側(cè)邊欄是像素。它根據(jù)條件告訴瀏覽器如何為指定視圖寬度渲染頁面。

昨天面試了本地的一家公司，面試的Web 前端。題目共有CSS和JS兩部分，
因為我對于CSS不是很熟悉，所以這里就只列出CSS相關(guān)的筆試題，僅供學(xué)習(xí)。
盒模型的組成

盒模型通過四個邊界來描述：margin(外邊距)、border(邊框)、padding(填充)、content(內(nèi)容)

是的，這是最基本的，但是我回來查了一下發(fā)現(xiàn)還有IE模型（IE5和IE6盡然還存在？excuse me？）

W3C標(biāo)準(zhǔn)模型的內(nèi)容占據(jù)的空間是由width屬性設(shè)置的，內(nèi)容周圍的padding和border值是另外計算的。
但是IE的非標(biāo)準(zhǔn)模型，width是內(nèi)容、內(nèi)邊距、邊框的寬度的總和。

block,inline,inline-block的區(qū)別

我的答案是：block塊級元素，可設(shè)置寬高，獨占一行，另起一行顯示。可設(shè)置margin和padding屬性。

inline行內(nèi)元素，不可設(shè)置寬高（其實正確答案應(yīng)該是設(shè)置無效），單行顯示（直到一行排列不下，才會換新一行）。設(shè)置水平方向的margin和padding值會產(chǎn)生邊距效果，垂直方向上的margin和padding不會產(chǎn)生邊距效果。

inline-block可設(shè)置寬高，但是仍然是在同一行顯示。

CSS選擇器

我只回答了基本選擇器，回答的太簡單了，哎~~~

基本選擇器：

class選擇器

id選擇器

標(biāo)簽選擇器

通用選擇器(*)

多元素組合選擇器：

E,F 匹配所有E或F元素

E F 匹配所有屬于E元素后代的F元素

E > F 匹配所有E元素的子元素F

E + F 匹配所有緊隨E元素之后的同級元素F

屬性選擇器

E[attr] 匹配所有具有att的E元素

E[att=val] 匹配所有att屬性等于val的E元素

E[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等于val的E元素

E[att|=val] 匹配所有att屬性具有多個連字號分隔的值、其中一個值以val開頭的E元素

太多了。。直接上地址吧：http://www.ruanyifeng.com/blo...

CSS優(yōu)先級

我只回答了就近優(yōu)先的原則，回答的太簡單了(lll￢ω￢)。

正確的應(yīng)該是：

瀏覽器缺省設(shè)置 < 外部樣式表(src) < 內(nèi)部樣式表(head內(nèi)部) < 內(nèi)聯(lián)樣式(HTML內(nèi)部)

但是！但是！但是！內(nèi)部樣式表和外部樣式表的優(yōu)先級需要看他們的引入和定義的順序，如果先用內(nèi)部樣式表定義了樣式，然后再引入通過外部樣式表定義的樣式，你們外部樣式表的樣式將會覆蓋內(nèi)部樣式表定義的樣式，反之亦是一樣。

還有id,class,標(biāo)簽選擇器的優(yōu)先級。

id選擇器 > class選擇器 > 標(biāo)簽選擇器

另外當(dāng)且僅當(dāng)有兩個或者是多個class或者id的時候，誰在前面就誰的優(yōu)先級高。

這里的div會應(yīng)用id1的樣式效果
清除浮動的方式

浮動：一般是一個盒子里使用了CSS float浮動屬性，導(dǎo)致父級對象盒子不能被撐開，這樣CSS float浮動就產(chǎn)生了。

分析HTML代碼結(jié)構(gòu)：


    
1

    
2

    
3

清除浮動：

方法一：添加新的元素、應(yīng)用clear:both


    
1

    
2

    
3

    


.clear {
  clear:both;
  height: 0;
  line-height: 0;
  font-size: 0;
}

方法二：父級div定義overflow:auto


  div*3

  
.clearfix {
  overflow: auto;
  zoom: 1; //這句是處理IE的兼容問題
}
如何實現(xiàn)響應(yīng)式

第一步：Meta標(biāo)簽
大多數(shù)移動瀏覽器將HTML頁面放大為寬的視圖（viewport）以符合屏幕分辨率。你可以使用視圖的meta標(biāo)簽來進(jìn)行重置。

第二步：HTML結(jié)構(gòu)
有一個包括頭部、內(nèi)容、側(cè)邊欄和頁腳的基本頁面布局。頭部有固定的高度180像素，內(nèi)容容器是600像素而側(cè)邊欄是300像素。

第三步：媒介查詢-Media Queries
CSS3 Media Query-媒介查詢是響應(yīng)式設(shè)計的核心。它根據(jù)條件告訴瀏覽器如何為指定視圖寬度渲染頁面。

@media screen and (max-width: 700px) {
  //樣式
}

@media screen and (max-width: 480px) {
  //樣式
}
BFC的理解

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

BFC 的一些用處（如清浮動，防止 margin 重疊等）

具體的可以參考文章http://www.cnblogs.com/dojo-l...

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111806.html

相關(guān)文章

  • 前端經(jīng)典文章

    摘要：上周末看這篇文章時，偶有靈光，所以，分享出來給大家一起看看前端面試四月二十家前端面試題分享請各位讀者添加一下作者的微信公眾號，以后有新的文章，將在微信公眾號直接推送給各位，非常感謝。 前端切圖神器 avocode 有了這個神器，切圖再也腰不酸，腿不疼了。 這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機(jī)制，如果讀完本文還不懂，...

    lowett 評論0 收藏0

  • 前端開發(fā)-從入門到Offer - 收藏集 - 掘金

    摘要：一些知識點有哪些方法方法前端從入門菜鳥到實踐老司機(jī)所需要的資料與指南合集前端掘金前端從入門菜鳥到實踐老司機(jī)所需要的資料與指南合集歸屬于筆者的前端入門與最佳實踐。 工欲善其事必先利其器-前端實習(xí)簡歷篇 - 掘金 有幸認(rèn)識很多在大廠工作的學(xué)長，在春招正式開始前為我提供很多內(nèi)部推薦的機(jī)會，非常感謝他們對我的幫助。現(xiàn)在就要去北京了，對第一份正式的實習(xí)工作也充滿期待，也希望把自己遇到的一些問題和...

    sf_wangchong 評論0 收藏0

  • 前端面試題收集，持續(xù)更新中

    摘要：對于所訪問的每個元素，函數(shù)應(yīng)該將該元素傳遞給所提供的回調(diào)函數(shù)。 HTML 在線閱讀Github地址 題目列表 HTML HTML和XHTML的區(qū)別 Html的語義化 Doctype的文檔類型 cookie、sessionSttorage、localStory區(qū)別 HTML全局屬性(global attribute)有哪些？ 常見的瀏覽器內(nèi)核有哪些？ 介紹一下你對瀏覽器內(nèi)核的理解？...

    kgbook 評論0 收藏0

  • 前端面試題收集，持續(xù)更新中

    摘要：對于所訪問的每個元素，函數(shù)應(yīng)該將該元素傳遞給所提供的回調(diào)函數(shù)。 HTML 在線閱讀Github地址 題目列表 HTML HTML和XHTML的區(qū)別 Html的語義化 Doctype的文檔類型 cookie、sessionSttorage、localStory區(qū)別 HTML全局屬性(global attribute)有哪些？ 常見的瀏覽器內(nèi)核有哪些？ 介紹一下你對瀏覽器內(nèi)核的理解？...

    2json 評論0 收藏0

  • 前端面試題收集，持續(xù)更新中

    摘要：對于所訪問的每個元素，函數(shù)應(yīng)該將該元素傳遞給所提供的回調(diào)函數(shù)。 HTML 在線閱讀Github地址 題目列表 HTML HTML和XHTML的區(qū)別 Html的語義化 Doctype的文檔類型 cookie、sessionSttorage、localStory區(qū)別 HTML全局屬性(global attribute)有哪些？ 常見的瀏覽器內(nèi)核有哪些？ 介紹一下你對瀏覽器內(nèi)核的理解？...

    adam1q84 評論0 收藏0

發(fā)表評論

0條評論

kycool

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<