整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
我們的回答可以通過以下方式來回答:
1. 權重概念:
1. 權重, 是一個相對的概念, 是針對某一指標而言; 某一指標的權重是指該指標在整體評價中的相對重要程度 。
2. CSS權重 指的是 css 選擇器的優先級, 優先級高的 css 樣式會覆蓋優先級低的 css 樣式, 優先級越高說明權重越高, 反之亦然 。1. css優先級規則:
1. css 選擇規則的權值不同時, 權值高的優先;
2. css 選擇規則的權值相同時, 后定義的規則優先;
3. css 屬性后面加 !important 時, 無條件絕對優先;
2. 權值的計算:
1. 第一等級: 代表 內聯樣式; 如 style="", 權值為 1,0,0,0 。
2. 第二等級: 代表 ID選擇器; 如 #id="", 權值為 0,1,0,0 。
3. 第三等級: 代表 calss | 偽類 | 屬性 選擇器; 如 .class | :hover,:link,:target | [type], 權值 0,0,1,0 。
4. 第四等級: 代表 標簽 | 偽元素 選擇器; 如 p | ::after, ::before, ::fist-inline, ::selection, 權值 0,0,0,1 。
5. 通用選擇器 (\*), 子選擇器(>), 相鄰同胞選擇器(+) 等選擇器不在4等級之內, 所以它們的權值都為 0,0,0,0 。
3. 權值計算公式:
1. 權值 = 第一等級選擇器\*個數, 第二等級選擇器\*個數, 第三等級選擇器\*個數, 第四等級選擇器\*個數 。
4. 權值比較規則:
1. 當兩個權值進行比較的時候, 是從高到低逐級將等級位上的權重值(如 權值 1,0,0,0 對應--> 第一等級權重值, 第二等級權重值, 第三等級權重值, 第四等級權重值)來進行比較的, 而不是簡單的 1000\*個數 + 100\*個數 + 10\*個數 + 1\*個數 的總和來進行比較的, 換句話說, 低等級的選擇器, 個數再多也不會越等級超過高等級的選擇器的優先級的;
2. 總結比較經驗:
1. 先從高等級進行比較, 高等級相同時, 再比較低等級的, 以此類推 。
2. 完全相同的話, 就采用 后者優先原則(也就是樣式覆蓋) 。
3. css 屬性后面加 !important 時, 無條件絕對優先(比內聯樣式還要優先) 。
5. 選擇器的優先級(繼承不如指定):
1. css 屬性 !important
2. 內聯樣式
3. ID 選擇器(#id)
4. 類選擇器(.class) = 偽類選擇器(:hover等) = 屬性選擇器[type等]
5. 元素選擇器(p等) = 偽元素選擇器(:after/:before/::selection等)
6. 通用選擇器(\*)
7. 繼承的樣式
之前有整理過部分知識點, 現在將整理的相關內容, 驗證之后慢慢分享給大家; 這個專題是 "前端面試題" 的相關專欄; 大概會有200+的文章。
如果對大家有所幫助，可以點個關注、點個贊; 文章會持續打磨 。
有什么想要了解的前端知識, 可以在評論區留言, 會及時分享所相關內容 。
，介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
（1）有兩種， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
（3）區 別： IE的content部分把 border 和 padding計算了進去；
2，CSS選擇符有哪些？哪些屬性可以繼承？
* 1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.后代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.偽類選擇器（a:hover, li:nth-child）
* 可繼承的樣式： font-size font-family color, UL LI DL DD DT;
* 不可繼承的樣式：border padding margin width height ;
3，CSS優先級算法如何計算？
* 優先級就近原則，同權重情況下樣式定義最近者為準;
* 載入樣式以最后載入的定位為準;
優先級為:
!important > id > class > tag
important 比 內聯優先級高
4，CSS3新增偽類有那些？
舉例：
p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。
p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 <p> 元素。
:after 在元素之前添加內容,也可以用來做清除浮動。
:before 在元素之后添加內容
:enabled
:disabled 控制表單控件的禁用狀態。
:checked 單選框或復選框被選中。
5，如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
給div設置一個寬度，然后添加margin:0 auto屬性
居中一個浮動元素
確定容器的寬高 寬500 高 300 的層
設置層的外邊距
讓絕對定位的div居中
6，display有哪些值？說明他們的作用。
block 象塊類型元素一樣顯示。
none 缺省值。象行內元素類型一樣顯示。
inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示，并添加樣式列表標記。
table 此元素會作為塊級表格來顯示
inherit 規定應該從父元素繼承 display 屬性的值
7，position的值relative和absolute定位原點是？
absolute 生成絕對定位的元素，相對于值不為 static的第一個父元素進行定位。
fixed （老IE不支持） 生成絕對定位的元素，相對于瀏覽器窗口進行定位。
relative 生成相對定位的元素，相對于其正常位置進行定位。
static 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 聲明）。
inherit 規定從父元素繼承 position 屬性的值。
8，CSS3有哪些新特性？
新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節點）
圓角 （border-radius:8px）
多列布局 （multi-column layout）
陰影和反射 （Shadow\Reflect）
文字特效 （text-shadow、）
文字渲染 （Text-decoration）
線性漸變 （gradient）
旋轉 （transform）
增加了旋轉,縮放,定位,傾斜,動畫，多背景
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
9，用純CSS創建一個三角形的原理是什么？
把上、左、右三條邊隱藏掉（顏色設為 transparent）
10，一個滿屏 品 字布局 如何設計?
簡單的方式：
上面的div寬100%，
下面的兩個div分別寬50%，
然后用float或者inline使其不換行即可
11，li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
行框的排列會受到中間空白（回車\空格）等的影響，因為空格也屬于字符,這些空白也會被應用樣式，占據空間，所以會有間隔，把字符大小設為0，就沒有空格了。
12，為什么要初始化CSS樣式。
- 因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
- 當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
最簡單的初始化方法： * {padding: 0; margin: 0;} （強烈不建議）
淘寶的樣式初始化代碼：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, b8bf53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
13，absolute的containing block(容器塊)計算方式跟正常流有什么不同？
無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：
1、若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
2、否則,則由這個祖先元素的 padding box 構成。
如果都找不到，則為 initial containing block。
補充：
1. static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
2. absolute: 向上找最近的定位為absolute/relative的元素
3. fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing block
14，對BFC規范(塊級格式化上下文：block formatting context)的理解？
（W3C CSS 2.1 規范中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其他元素的關系和相互作用。）
一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。
不同類型的 Box,會參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。
創建規則：
根元素
浮動元素（float不是none）
絕對定位元素（position取值為absolute或fixed）
display取值為inline-block,table-cell, table-caption,flex, inline-flex之一的元素
overflow不是visible的元素
作用：
可以包含浮動元素
不被浮動元素覆蓋
阻止父子元素的margin折疊
15，css定義的權重
以下是權重的規則：標簽的權重為1，class的權重為10，id的權重為100，以下例子是演示各種定義的權重值：
/*權重為1*/ div{}
/*權重為10*/ .class1{}
/*權重為100*/ #id1{}
/*權重為100+1=101*/ #id1 div{}
/*權重為10+1=11*/ .class1 div{}
/*權重為10+10+1=21*/ .class1 .class2 div{}
如果權重相同，則最后定義的樣式會起作用，但是應該避免這種情況出現
16，移動端的布局用過媒體查詢嗎？
css的媒體查詢允許通過@media標簽為特定媒體的瀏覽器設定樣式，其中包含眾多篩選，功能強大。
17，使用 CSS 預處理器嗎？喜歡那個？
SASS (SASS、LESS沒有本質區別，只因為團隊前端都是用的SASS)
18，CSS優化、提高性能的方法有哪些？
將樣式表放到頁面頂部
不使用CSS表達式
不使用@import
不使用IE的Filter
19，在網頁中的應該使用奇數還是偶數的字體？為什么呢？
應該是用偶數字體。原因：
像谷歌一些比較流行的瀏覽器一般會有個默認的最小字體，而且對奇數字體渲染的不太好看
20，元素豎向的百分比設定是相對于容器的高度嗎？
是的，元素的百分比設置一般是根據父級元素的寬高決定的，如果父級元素沒有寬高百分比是不起作用的
端面試題目會根據面試者的經歷、崗位要求和面試官本身等因素而變化。大前端背景下，每個領域 1-2 個問題成為了更常見的面試提問規則。面試者的回答往往會影響面試官對其在這個領域的技術評價。
如果無話可答，則意味著一個領域沒有分數，如果這個領域是崗位的必要項，便會直接影響面試結果。于是，面試者總是希望，盡可能地多答上題目，怎么才能做到這點呢？
需要注意的是：
多答不是硬答。確實不會，大方承認，盡快進入下個問題，能減少對面試官主觀上的影響。反之，完全不沾邊，甚至錯誤的回答容易減少印象分。
多答不是嘮叨。會的題目，應該答出盡可能多的得分點，除非面試官追問，請避免在一個得分點上展開過多，讓面試官有更多時間提新問題，考核完全部領域，面試者也能有更多展示機會。
了解了前端面試的基本原則，可以進入實戰準備階段了。對此，我們按照語言，將常見考點的基礎知識結構整理了出來，幫助扣友們梳理知識結構，快速查漏補缺。
學海無涯「題」作舟，用一些題目來練習一下吧。下面的這些前端面試高頻題，你都能答得出來嗎？
Q：CSS 優先級規則是什么？
選擇器與元素的相關度越高，優先級越高，具體規則如下：
開發者定義選擇器 > 用戶定義選擇器 > 瀏覽器默認選擇器
內聯樣式（ style="" ） > 內（ <style> ）、外部樣式（ <link/> ）
ID 選擇器 > 類選擇器、屬性選擇器、偽類選擇器 > 類型選擇器、偽元素選擇器
相同優先級，書寫順序后 > 前
同級選擇器，復合選擇器 > 單選擇器
自身的選擇器 > 繼承自父級的選擇器
用戶配置 !important 聲明 > 開發者 !important 聲明 > 其它
Q：什么是重排和重繪？
當DOM的樣式或內容會被修改時，將觸發重新渲染。除了屬性值計算、單位換算外，渲染主要分為三個步驟：
重新渲染一般有三種執行路徑：
Q：Cookie 和 Session 的區別？
項目 | Cookie | Session |
存取值類型 | 字符串 | 大多數類型 |
存取位置 | 客戶端 | 服務端，sessionId 非主動傳參時，依賴 Cookie |
存取方式 | 文件 | 文件、內存、關系或非關系型數據庫等 |
大小 | 受客戶端限制 | 自行配置 |
過期時間 | 寫入時設置，用戶可清除 | 自行配置，用戶可清除對應Cookie，服務端自動清除過期 Session |
兼容性 | 需瀏覽器開啟，用戶同意 | 不依賴 Cookie 時，通過 Get 或自定請求字段傳入 |
作用范圍 | 可設置跨子域，不可跨主域 | 用戶身份唯一標識符不變時，可跨域，跨服務器。默認受限于 Cookie，僅限會話期間有效 |
Q：判斷一個對象是不是數組 Array
JavaScrpit
function isArray(o) {
return Array.prototype.isPrototypeOf(o)
}JavaScrpit
function isArray(o) {
return o instanceof Array
}JavaScrpit
function isArray(o) {
return Array.isArray(o)
} *JavaScrpit
function isArray(o) {
return Object.prototype.toString.call(o) === '[object Array]'
}Q：如何實現一個組件，前端組件的設計原則是什么？
Q：對比 express 和 koa？
上面分享的這些前端考點和高頻題都來自于本次 LeetBook 的上新。想要解鎖更多內容，點擊下面的圖片查看吧。
《前端通關手冊：JavaScript》：力扣
《前端通關手冊：HTML&CSS》： 力扣
實用的前端面試突圍指南書，以面試題目作為線索，從基礎到更新，通過多方法，講概念，讓面試者的回答在廣度或深度上能夠脫穎而出，帶你輕松掌握 JavaScript、HTML、CSS 的面試考點。
編者介紹：
吳小宇，做網站 13 年，2 次創業，土木、教育、前端 3 次跨領域轉行，入行 1 年成為組長，熱愛技術，尊重商業和人性，擅長多角度解決問題。
當然，在面試時除了前端方面的專業知識，也會問到一些計算機通用基礎問題，因此本次上新還特別為扣友們準備了一本校招通用的通關手冊。
《校招基礎知識詳解》: 力扣
互聯網校招基礎考點一網打盡，用簡單易懂的講解將面試知識串連起來，幫你快速理清多而雜的知識點，構建起校招技能樹，面試游刃有余。
編者介紹：
CyC2018，Github 校招面試項目 CS-Notes 作者，排名 10。校招期間收獲多家大廠 Offer，具有豐富的面試經驗。
針對這部分基礎，我們同樣整理了一份實用的考點大綱：
技術會迭代，我們也會與時俱進，不斷精益內容。希望能夠通過 LeetBook 節省面試者的時間，提高投入產出比，在準備面試的過程中，真正獲得知識和能力的提升。
最后，祝福所有扣友都能找到滿意的工作！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
