前端面試CSS

light 發布于2019-08-30 15:55 / 2382人閱讀

摘要：需要注意的是通用選擇器子選擇器和相鄰同胞選擇器并不在這四個等級中，所以他們的權值都為。權重值大的選擇器其優先級也高，相同權重的優先級又遵循后定義覆蓋前面定義的情況。導致這一現象的最根本原因在于被設置了的元素會脫離文檔流。

選擇器的權重和優先級

選擇器的類型：

id選擇器(#myid)

類選擇器(.myclassname)

標簽選擇器(div, h1, p)

相鄰選擇器(h1 + p)

子選擇器（ul > li）

后代選擇器（li a）

通配符選擇器（*）

屬性選擇器（a[rel="external"]）

偽類選擇器（a:hover, li:nth-child）

權重分為四級：

代表內聯樣式，如style="xxx"，權值為 1000；
代表 ID 選擇器，如#content，權值為 100；
代表類、偽類和屬性選擇器，如.content、:hover、[attribute]，權值為 10；
代表元素選擇器和偽元素選擇器，如div、p，權值為 1。

需要注意的是：通用選擇器（*）、子選擇器（>）和相鄰同胞選擇器（+）并不在這四個等級中，所以他們的權值都為 0。權重值大的選擇器其優先級也高，相同權重的優先級又遵循后定義覆蓋前面定義的情況。

盒模型

標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin

低版本IE盒子模型：寬度=內容寬度（content+border+padding）+ margin

box-sizing屬性：

content-box：一個標準模式下的盒模型的計算方式

border-box：一個怪異模式下的盒模型的計算方式

div設置了box-sizing:border-box之后，width的寬度是內容 + padding + 邊框的寬度（不包括margin），這樣就比較符合我們的實際要求了。

浮動float

float被設計出來的初衷是用于文字環繞效果，即一個圖片一段文字，圖片float:left之后，文字會環繞圖片.
float 的破壞性 —— float 破壞了父標簽的原本結構，使得父標簽出現了坍塌現象。導致這一現象的最根本原因在于：被設置了 float 的元素會脫離文檔流。其根本原因在于 float 的設計初衷是解決文字環繞圖片的問題。大家要記住 float 的這個影響。

清除浮動

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1; /* 兼容 IE 低版本 */
}

如何實現水平居中

inline元素使用

text-align: center

block元素使用

margin: auto

絕對定位元素可結合left和margin實現，但是必須知道寬度。

.item {
    width: 300px;
    height: 100px;
    position: absolute;
    left: 50%;
    margin: -150px;
}

如何實現垂直居中

inline 元素可設置line-height的值等于height值，如單行文字垂直居中：

.container {
   height: 50px;
   line-height: 50px;
}

絕對定位元素，可結合left和margin實現，但是必須知道尺寸。

優點：兼容性好

缺點：需要提前知道尺寸

.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -40px;
}

絕對定位可結合transform實現居中。

優點：不需要提前知道尺寸

缺點：兼容性不好

.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: blue;
}

絕對定位結合margin: auto，不需要提前知道尺寸，兼容性好

.container {
    position: relative;
    height: 300px;
}
.item {
    width: 100px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

移動端的布局用過媒體查詢嗎?

里邊

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

css動畫

首先，使用@keyframes定義一個動畫，名稱為testAnimation，如下代碼，通過百分比來設置不同的 CSS 樣式，規定動畫的變化。所有的動畫變化都可以這么定義出來。

@keyframes myfirst
{
    0%   {background: red; left:0; top:0;}
    25%  {background: yellow; left:200px; top:0;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0; top:200px;}
    100% {background: red; left:0; top:0;}
}

然后，針對一個 CSS 選擇器來設置動畫，例如針對div元素設置動畫，如下：

div {
    width: 100px;
    height: 50px;
    position: absolute;

    animation-name: myfirst;
    animation-duration: 5s;
}

云服務器 GPU云服務器前端面試前端工程師面試前端ddos 攻擊面試前端開發工程師面試

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

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

前端 CSS 面試大綱

摘要：比如說預處理器，組件化，工程化，兼容性處理等方面，這些主要是基于自己的開發經驗業界流行技術方案進行準備。但是在開始談面試前我想先提出一個概念學霸面試模型學校的學習和公司的工作有很多相似的地方。所以對于面試，請參考上學那會兒你們班學霸的姿勢。背景參加完廈門第四屆CSS Conf 后，讓我對 CSS 產生了新的思考。CSS 是前端必須熟練掌握并保持持續關注的技術，但是我又不想在 CS...

mating 2019-08-30 14:19 評論0 收藏0
前端最強面經匯總

摘要：獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼，也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據我測試不同環境結果可能有差異而就是。花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續更新中……，可以關注下github 項目地址 https:...

wangjuntytl 2019-08-26 10:41 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
前端開發-從入門到Offer - 收藏集 - 掘金

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

sf_wangchong 2019-08-20 16:10 評論0 收藏0
前端面試題-CSS選擇器

摘要：一選擇器作用選擇器用于定位我們想要給予樣式的元素，但不只是在中，對的選擇器也是支持的，比如。在選被元素后插入內容其用法和特性與相似。所有偽元素選擇器在前端面試題偽類和偽元素擴展閱讀前端面試題清除浮動前端面試題塊格式化上下文一、CSS選擇器作用 CSS 選擇器用于定位我們想要給予樣式的 HTML 元素，但不只是在 CSS 中，JavaScript 對 CSS 的選擇器也是支持的，比如 ...

leanote 2019-08-30 14:09 評論0 收藏0
前端面試題-CSS選擇器

摘要：一選擇器作用選擇器用于定位我們想要給予樣式的元素，但不只是在中，對的選擇器也是支持的，比如。在選被元素后插入內容其用法和特性與相似。所有偽元素選擇器在前端面試題偽類和偽元素擴展閱讀前端面試題清除浮動前端面試題塊格式化上下文一、CSS選擇器作用 CSS 選擇器用于定位我們想要給予樣式的 HTML 元素，但不只是在 CSS 中，JavaScript 對 CSS 的選擇器也是支持的，比如 ...

h9911 2019-08-22 15:25 評論0 收藏0