這篇“CSS的經典面試題有哪些”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“CSS的經典面試題有哪些”文章吧。
標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin 低版本 IE 盒子模型：寬度=內容寬度（content+border+padding）+ margin
用來控制元素的盒子模型的解析模式，默認為 content-boxcontext-box：W3C 的標準盒子模型，設置元素的 height/width 屬性指的是 content 部分的高/寬 border-box：IE傳統盒子模型。設置元素的 height/width 屬性指的是 border + padding + content 部分的高/寬
CSS選擇符：id 選擇器(#myid)、類選擇器(.myclassname)、標簽選擇器(div, h2, p)、相鄰選擇器(h2 + p)、子選擇器（ul > li）、后代選擇器（li a）、通配符選擇器（*）、屬性選擇器（a[rel=”external”]）、偽類選擇器（a:hover, li:nth-child）
可繼承的屬性：font-size, font-family, color
不可繼承的樣式：border, padding, margin, width, height
優先級（就近原則）：!important > [ id > class > tag ]!important 比內聯優先級高
元素選擇符： 1class選擇符： 10id選擇符：100元素標簽：1000 !important 聲明的樣式優先級最高，如果沖突再進行計算。如果優先級相同，則選擇最后出現的樣式。繼承得到的樣式的優先級最低。
p:first-of-type 選擇屬于其父元素的首個元素 p:last-of-type 選擇屬于其父元素的最后元素 p:only-of-type 選擇屬于其父元素唯一的元素 p:only-child 選擇屬于其父元素的唯一子元素 p:nth-child(2) 選擇屬于其父元素的第二個子元素 :enabled :disabled 表單控件的禁用狀態。:checked 單選框或復選框被選中。
div：border: 1px solid red;margin: 0 auto;height: 50px;width: 80px;
浮動元素的上下左右居中：border: 1px solid red;float: left;position: absolute;width: 200px;height: 100px;left: 50%;top: 50%;margin: -50px 0 0 -100px;
絕對定位的左右居中：border: 1px solid black;position: absolute;width: 200px;height: 100px;margin: 0 auto;left: 0;right: 0;
inline（默認）–內聯 none– 隱藏 block– 塊顯示 table –表格顯示 list-item–項目列表 inline-block
static（默認）：按照正常文檔流進行排列；relative（相對定位）：不脫離文檔流，參考自身靜態位置通過 top, bottom, left, right 定位；absolute(絕對定位)：參考距其最近一個不為 static 的父級元素通過 top, bottom, left, right 定位；fixed(固定定位)：所固定的參照對像是可視窗口。
RGBA 和透明度 background-image background-origin(content-box/padding-box/border-box) background-size background-repeatword-wrap（對長的不可分割單詞換行）word-wrap：break-word 文字陰影：text-shadow： 5px 5px 5px #FF0000;（水平陰影，垂直陰影，模糊距離，陰影顏色）font-face 屬性：定義自己的字體圓角（邊框半徑）：border-radius 屬性用于創建圓角邊框圖片：border-image: url(border.png) 30 30 round 盒陰影：box-shadow: 10px 10px 5px #888888媒體查詢：定義兩套css，當瀏覽器的尺寸變化時會采用不同的屬性
該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局、對齊和分配空間。在傳統的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的；而 inline 布局則是在水平方向來排列。彈性盒布局并沒有這樣內在的方向限制，可以由開發人員自由操作。試用場景：彈性布局適合于移動前端開發，在 Android 和 ios 上也完美支持。
首先，需要把元素的寬度、高度設為 0。然后設置邊框樣式。
width: 0;height: 0;border-top: 40px solid transparent;border-left: 40px solid transparent;border-right: 40px solid transparent;border-bottom: 40px solid #ff0000;
第一種真正的品字：三塊高寬是確定的；上面那塊用 margin: 0 auto;居中；下面兩塊用 float 或者 inline-block 不換行；用 margin 調整位置使他們居中。第二種全屏的品字布局:上面的 div 設置成 100%，下面的 div 分別寬 50%，然后使用 float 或者 inline 使其不換行。
不同瀏覽器的標簽默認的 margin 和 padding 不一樣。*{margin:0;padding:0;}IE6 雙邊距 bug：塊屬性標簽 float 后，又有橫行的 margin 情況下，在 IE6 顯示 margin 比設置的大。hack：display:inline; 將其轉化為行內屬性。漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9”這一標記，將IE瀏覽器從所有情況中分離出來。接著，再次使用“+”將 IE8 和 IE7、IE6 分離開來，這樣 IE8 已經獨立識別。
{background-color:#f1ee18;/所有識別/.background-color:#00deff\9; /IE6、7、8識別/+background-color:#a200ff;/IE6、7識別/_background-color:#1e0bd1;/IE6識別/}設置較小高度標簽（一般小于10px），在IE6，IE7中高度超出自己設置高度。hack：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小于你設置的高度。IE下，可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性；Firefox下，只能使用 getAttribute()獲取自定義屬性。解決方法:統一通過getAttribute()獲取自定義屬性。Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。超鏈接訪問過后hover樣式就不出現了，被點擊訪問過的超鏈接樣式不再具有hover和active了。解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：
若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；否則,則由這個祖先元素的 padding box 構成。如果都找不到，則為 initial containing block。
補充：
static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）absolute: 向上找最近的定位為 absolute/relative的元素fixed: 它的 containing block 一律為根元素(html/body)
當一個元素的 visibility 屬性被設置成 collapse 值后，對于一般的元素，它的表現跟 hidden 是一樣的。
chrome中，使用 collapse 值和使用 hidden 沒有區別。firefox，opera和IE，使用 collapse 值和使用 display：none 沒有什么區別。
display：none 不顯示對應的元素，在文檔布局中不再分配空間（回流+重繪）visibility：hidden 隱藏對應元素，在文檔布局中仍保留原來的空間（重繪）
display 屬性規定元素應該生成的框的類型；position 屬性規定元素的定位類型；float 屬性是一種布局方式，定義元素在哪個方向浮動。類似于優先級機制：position：absolute/fixed優先級最高，有他們在時，float 不起作用，display 值需要調整。float 或者absolute 定位的元素，只能是塊元素或表格。
BFC 規定了內部的 Block Box 如何布局。定位方案：內部的 Box 會在垂直方向上一個接一個放置。Box 垂直方向的距離由 margin 決定，屬于同一個 BFC 的兩個相鄰 Box 的 margin 會發生重疊。每個元素的margin box 的左邊，與包含塊 border box 的左邊相接觸。BFC 的區域不會與 float box 重疊。BFC是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。計算 BFC 的高度時，浮動元素也會參與計算。滿足下列條件之一就可觸發 BFC
根元素，即 htmlfloat 的值不為none（默認）overflow 的值不為 visible（默認）display 的值為 inline-block、table-cell、table-captionposition 的值為 absolute 或 fixed
浮動元素碰到包含它的邊框或者浮動元素的邊框停留。由于浮動元素不在文檔流中，所以文檔流的塊框表現得就像浮動框不存在一樣。浮動元素會漂浮在文檔流的塊框上。浮動帶來的問題：
父元素的高度無法被撐開，影響與父元素同級的元素與浮動元素同級的非浮動元素（內聯元素）會跟隨其后若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構。清除浮動的方式：
父級 div 定義 height 最后一個浮動元素后加空div標簽 并添加樣式clear:both。包含浮動元素的父標簽添加樣式 overflow 為 hidden 或 auto。父級 div 定義 zoom
在重合元素外包裹一層容器，并觸發該容器生成一個BFC。例子：
.aside { margin-bottom: 100px; width: 100px; height: 150px; background: #f66; } .main { margin-top: 100px; height: 200px; background: #fcc; } .text{ /*盒子main的外面包一個div，通過改變此div的屬性使兩個盒子分屬于兩個不同的BFC，以此來阻止margin重疊*/ overflow: hidden; //此時已經觸發了BFC屬性。 }
自動變成 display:block
通過媒體查詢可以為不同大小和尺寸的媒體定義不同的 css，適應相應的設備的顯示。
頁面加載自上而下 當然是先加載樣式。寫在 body 標簽后由于瀏覽器以逐行方式對 HTML 文檔進行解析，當解析到寫在尾部的樣式表（外聯或寫在 style 標簽）會導致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在 windows 的 IE 下可能會出現FOUC 現象（即樣式失效導致的頁面閃爍問題）
避免過度約束避免后代選擇符避免鏈式選擇符使用緊湊的語法避免不必要的命名空間避免不必要的重復最好使用表示語義的名字。一個好的類名應該是描述他是什么而不是像什么避免！important，可以選擇其他選擇器盡可能的精簡規則，你可以合并不同類里的重復規則
CSS 選擇器的解析是從右向左解析的。若從左向右的匹配，發現不符合規則，需要進行回溯，會損失很多性能。若從右向左匹配，先找到所有的最右節點，對于每一個節點，向上尋找其父節點直到找到根元素或滿足條件的匹配規則，則結束這個分支的遍歷。兩種匹配規則的性能差別很大，是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點（葉子節點），而從左向右的匹配規則的性能都浪費在了失敗的查找上面。而在 CSS 解析完畢后，需要將解析的結果與 DOM Tree 的內容一起進行分析建立一棵 Render Tree，最終用來進行繪圖。在建立 Render Tree 時（WebKit 中的「Attachment」過程），瀏覽器就要為每個 DOM Tree 中的元素根據 CSS 的解析結果（Style Rules）來確定生成怎樣的 Render Tree。
使用偶數字體。偶數字號相對更容易和 web 設計的其他部分構成比例關系。Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個大小的點陣，而 13、15、17 px時用的是小一號的點。（即每個字占的空間大了 1 px，但點陣沒變），于是略顯稀疏。
何時使用 margin：
需要在 border 外側添加空白空白處不需要背景色上下相連的兩個盒子之間的空白，需要相互抵消時。何時使用 padding：
需要在 border 內側添加空白空白處需要背景顏色上下相連的兩個盒子的空白，希望為兩者之和。兼容性的問題：在IE5 IE6中，為float的盒子指定 margin 時，左側的 margin 可能會變成兩倍的寬度。通過改變 padding 或者指定盒子的 display：inline 解決。
當按百分比設定一個元素的寬度時，它是相對于父容器的寬度計算的，但是，對于一些表示豎向距離的屬性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，當按百分比設定它們時，依據的也是父容器的寬度，而不是高度。
原理：有點類似于輪播，整體的元素一直排列下去，假設有5個需要展示的全屏頁面，那么高度是500%，只是展示100%，剩下的可以通過 transform 進行 y 軸定位，也可以通過 margin-top 實現 overflow：hidden；transition：all 1000ms ease；
響應式網站設計(Responsive Web design)是一個網站能夠兼容多個終端，而不是為每一個終端做一個特定的版本?；驹硎峭ㄟ^媒體查詢檢測不同的設備屏幕尺寸做處理。頁面頭部必須有 meta 聲明的 viewport。
視差滾動（Parallax Scrolling）通過在網頁向下滾動的時候，控制背景的移動速度比前景的移動速度慢來創建出令人驚嘆的3D效果。
CSS3 實現優點：開發時間短、性能和開發效率比較好，缺點是不能兼容到低版本的瀏覽器 jQuery 實現通過控制不同層滾動速度，計算每一層的時間，控制滾動效果。優點：能兼容到各個版本的，效果可控性好缺點：開發起來對制作者要求高插件實現方式例如：parallax-scrolling，兼容性十分好
單冒號(:)用于 CSS3 偽類，雙冒號(::)用于 CSS3 偽元素。::before就是以一個子元素的存在，定義在元素主體內容之前的一個偽元素。并不存在于 dom 之中，只存在在頁面之中。:before 和 :after 這兩個偽元素，是在 CSS2.1里新出現的。起初，偽元素的前綴使用的是單冒號語法，但隨著 Web 的進化，在 CSS3 的規范里，偽元素的語法被修改成使用雙冒號，成為 ::before ::after
行高是指一行文字的高度，具體說是兩行文字間基線的距離。CSS 中起高度作用的是 height 和 line-height，沒有定義 height 屬性，最終其表現作用一定是 line-height。單行文本垂直居中：把 line-height 值設置為 height 一樣大小的值可以實現單行文字的垂直居中，其實也可以把 height 刪除。多行文本垂直居中：需要設置display屬性為 inline-block。
p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是縮放比例
-webkit-font-smoothin g在 window 系統下沒有起作用，但是在 IOS 設備上起作用 -webkit-font-smoothing：antialiased 是最佳的，灰度平滑。
37、 CSS屬性overflow屬性定義溢出元素內容區的內容會如何處理?
參數是 scroll 時候，必會出現滾動條。參數是 auto 時候，子元素內容大于父元素時出現滾動條。參數是 visible 時候，溢出的內容出現在父元素之外。參數是 hidden 時候，溢出隱藏。
多數顯示器默認頻率是 60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms。
行框的排列會受到中間空白（回車空格）等的影響，因為空格也屬于字符,這些空白也會被應用樣式，占據空間，所以會有間隔，把字符大小設為0，就沒有空格了。解決方法：
可以將代碼全部寫在一排浮動 li 中 float：left 在 ul 中用 font-size：0（谷歌不支持）；可以使用 letter-space：-3px
有空格時候會有間隙 解決：移除空格 margin 正值的時候 解決：margin 使用負值使用 font-size 時候 解決：font-size:0、letter-spacing、word-spacing
以上就是關于“CSS的經典面試題有哪些”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
