面試前端時遇到的CSS題目

kycool 發布于2019-08-29 12:18 / 434人閱讀

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

昨天面試了本地的一家公司，面試的Web 前端。題目共有CSS和JS兩部分，
因為我對于CSS不是很熟悉，所以這里就只列出CSS相關的筆試題，僅供學習。

盒模型的組成

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

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

W3C標準模型的內容占據的空間是由width屬性設置的，內容周圍的padding和border值是另外計算的。
但是IE的非標準模型，width是內容、內邊距、邊框的寬度的總和。

block,inline,inline-block的區別

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

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

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

CSS選擇器

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

基本選擇器：

class選擇器

id選擇器

標簽選擇器

通用選擇器(*)

多元素組合選擇器：

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優先級

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

正確的應該是：

瀏覽器缺省設置 < 外部樣式表(src) < 內部樣式表(head內部) < 內聯樣式(HTML內部)

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

還有id,class,標簽選擇器的優先級。

id選擇器 > class選擇器 > 標簽選擇器

另外當且僅當有兩個或者是多個class或者id的時候，誰在前面就誰的優先級高。

這里的div會應用id1的樣式效果

清除浮動的方式

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

分析HTML代碼結構：


    1
    2
    3

清除浮動：

方法一：添加新的元素、應用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的兼容問題
}

如何實現響應式

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

第二步：HTML結構
有一個包括頭部、內容、側邊欄和頁腳的基本頁面布局。頭部有固定的高度180像素，內容容器是600像素而側邊欄是300像素。

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

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

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

BFC的理解

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

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

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

云服務器 GPU云服務器面試題目 python面試題目中級php面試題目 php校招面試題目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111806.html

前端經典文章

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

lowett 2019-08-22 13:58 評論0 收藏0
前端開發-從入門到Offer - 收藏集 - 掘金

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

sf_wangchong 2019-08-20 16:10 評論0 收藏0
前端面試題收集，持續更新中

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

kgbook 2019-08-22 16:49 評論0 收藏0
前端面試題收集，持續更新中

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

2json 2019-08-29 15:12 評論0 收藏0
前端面試題收集，持續更新中

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

adam1q84 2019-08-02 10:17 評論0 收藏0