整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
文資料來(lái)源于
https://github.com/qiu-deqing/FE-interview
目前已在github獲得4700個(gè)star，在前端知識(shí)項(xiàng)目中名列第一。
上一篇主要分享了該項(xiàng)目中的HTML， HTTP，web綜合問(wèn)題部分。
本文主要分享該項(xiàng)目中的CSS部分的知識(shí)點(diǎn)及面試題部分，后續(xù)分享剩余5個(gè)章節(jié)。
歡迎關(guān)注筆者，優(yōu)質(zhì)文章都在這里等你。
概念：將多個(gè)小圖片拼接到一個(gè)圖片中。通過(guò)background-position和元素尺寸調(diào)節(jié)需要顯示的背景圖案。
優(yōu)點(diǎn)：
缺點(diǎn)：
聯(lián)系：它們都能讓元素不可見(jiàn)
區(qū)別：
原理：利用不同瀏覽器對(duì)CSS的支持和解析結(jié)果不一樣編寫(xiě)針對(duì)特定瀏覽器樣式。常見(jiàn)的hack有1）屬性hack。2）選擇器hack。3）IE條件注釋
<!--[if IE 6]> Special instructions for IE 6 here <![endif]-->
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
specified value,computed value,used value計(jì)算方法
link與@import的區(qū)別
參考資料： 選擇正確的圖片格式 GIF:
JPEG：
PNG：
CSS有哪些繼承屬性
.target {
min-height: 100px;
height: auto !important;
height: 100px; // IE6下內(nèi)容高度超過(guò)會(huì)自動(dòng)擴(kuò)展高度
}
<style type="text/css">
.outer {
width: 215px;
height: 100px;
border: 1px solid red;
overflow: auto;
position: relative; /* 修復(fù)bug */
}
.inner {
width: 100px;
height: 200px;
background-color: purple;
position: relative;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
<style type="text/css">
.p:hover,
.hover {
background: purple;
}
</style>
<p class="p" id="target">aaaa bbbbb<span>DDDDDDDDDDDd</span> aaaa lkjlkjdf j</p>
<script type="text/javascript">
function addClass(elem, cls) {
if (elem.className) {
elem.className += ' ' + cls;
} else {
elem.className = cls;
}
}
function removeClass(elem, cls) {
var className = ' ' + elem.className + ' ';
var reg = new RegExp(' +' + cls + ' +', 'g');
elem.className = className.replace(reg, ' ').replace(/^ +| +$/, '');
}
var target = document.getElementById('target');
if (target.attachEvent) {
target.attachEvent('onmouseenter', function () {
addClass(target, 'hover');
});
target.attachEvent('onmouseleave', function () {
removeClass(target, 'hover');
})
}
</script>
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
display: inline-block; *display: inline; *zoom: 1;
容器包含若干浮動(dòng)元素時(shí)如何清理(包含)浮動(dòng)
/**
* 在標(biāo)準(zhǔn)瀏覽器下使用
* 1 content內(nèi)容為空格用于修復(fù)opera下文檔中出現(xiàn)
* contenteditable屬性時(shí)在清理浮動(dòng)元素上下的空白
* 2 使用display使用table而不是block：可以防止容器和
* 子元素top-margin折疊,這樣能使清理效果與BFC，IE6/7
* zoom: 1;一致
**/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/**
* IE 6/7下使用
* 通過(guò)觸發(fā)hasLayout實(shí)現(xiàn)包含浮動(dòng)
**/
.clearfix {
*zoom: 1;
}
Flash Of Unstyled Content：用戶定義樣式表加載之前瀏覽器使用默認(rèn)樣式顯示文檔，用戶樣式加載渲染之后再?gòu)男嘛@示文檔，造成頁(yè)面閃爍。解決方法：把樣式表放到文檔的head
如何創(chuàng)建塊級(jí)格式化上下文(block formatting context),BFC有什么用
創(chuàng)建規(guī)則：
作用：
外邊距折疊(collapsing margins)
毗鄰的兩個(gè)或多個(gè)margin會(huì)合并成一個(gè)margin，叫做外邊距折疊。規(guī)則如下：
如何確定一個(gè)元素的包含塊(containing block)
z軸上的默認(rèn)層疊順序如下（從下到上）：
如何創(chuàng)建stacking context：
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
text-align: center; /* 3 */
}
.content {
width: 500px; /* 1 */
text-align: left; /* 3 */
margin: 0 auto; /* 2 */
background: purple;
}
</style>
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
}
.content {
width: 500px; /* 1 */
float: left;
position: relative; /* 2 */
left: 50%; /* 3 */
margin-left: -250px; /* 4 */
background-color: purple;
}
</style>
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
position: relative;
}
.content {
width: 800px;
position: absolute;
left: 50%;
margin-left: -400px;
background-color: purple;
}
</style>
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
position: relative;
}
.content {
width: 800px;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
background-color: purple;
}
</style>
如何豎直居中一個(gè)元素
參考資料：6 Methods For Vertical Centering With CSS。 盤(pán)點(diǎn)8種CSS實(shí)現(xiàn)垂直居中
<p class="text">center text</p>
<style>
.text {
line-height: 200px;
}
</style>
對(duì)大廠架構(gòu)設(shè)計(jì)，BAT等廠家面試題解讀，編程語(yǔ)言理論或者互聯(lián)網(wǎng)圈逸聞趣事這些感興趣，歡迎關(guān)注筆者，沒(méi)有錯(cuò)，干貨文章都在這里。
function fn1() {
setTimeout(() => {
console.log('fn1執(zhí)行')
fn2('fn1傳遞過(guò)去的參數(shù)')
}, 1000)
}
function fn2(data) {
setTimeout(() => {
console.log('fn2執(zhí)行', data)
fn3('fn2傳遞過(guò)去的參數(shù)')
}, 1000)
}
function fn3(data) {
setTimeout(() => {
console.log('fn3執(zhí)行', data)
}, 1000)
}
fn1()執(zhí)行結(jié)果如下：
我們發(fā)現(xiàn)這種方式雖然能實(shí)現(xiàn)，但是代碼量一旦變多，可讀性就降低了。
function fn1() {
return new Promise((resolve, reject) => {
console.log('fn1執(zhí)行')
setTimeout(() => {
console.log('fn1結(jié)束')
resolve('fn1傳遞過(guò)去的參數(shù)')
}, 1000)
})
}
function fn2(data) {
return new Promise((resolve, reject) => {
console.log('fn2執(zhí)行，接收的參數(shù)', data)
setTimeout(() => {
resolve('fn2傳遞過(guò)去的參數(shù)')
}, 1000)
})
}
function fn3(data) {
return new Promise((resolve, reject) => {
console.log('fn3執(zhí)行，接收的參數(shù)', data)
setTimeout(() => {
resolve('fn3傳遞過(guò)去的參數(shù)')
}, 1000)
})
}
fn1().then(fn2).then(fn3).then(res => {
console.log('最后一個(gè)', res)
})生成器就是能返回一個(gè)迭代器的函數(shù)，它也是一個(gè)函數(shù)，對(duì)比普通的函數(shù)，多了一個(gè)*，在它的函數(shù)體內(nèi)可以使用yield關(guān)鍵字,函數(shù)會(huì)在每個(gè)yield后暫停，等待，直到這個(gè)生成的對(duì)象，調(diào)用下一個(gè)next(),每調(diào)用一次next會(huì)往下執(zhí)行一次yieId，然后暫停。
、下面關(guān)于WEB開(kāi)發(fā)中，常見(jiàn)的技術(shù)和問(wèn)題描述正確的是：(多選)
A、CSS selector中，支持按照元素的id選擇，元素的名稱進(jìn)行選擇，元素的class屬性進(jìn)行選擇，比如 “#div .red”就是選擇CSS class屬性中包括red的所有的div元素B、JSON是一種以JavaScript語(yǔ)法表示的數(shù)據(jù)對(duì)象格式，比如描述一個(gè)學(xué)生，包括，其中，姓名，年齡就可以這樣表達(dá) {name: "John"， age: 18}C、HTML頁(yè)面中的第一個(gè)指令： 表明這是一個(gè)符合HTML5標(biāo)準(zhǔn)的頁(yè)面D、不同的瀏覽器對(duì)HTML渲染的方式稍有差異，但是所有的主流瀏覽器都支持JavaScript語(yǔ)言，而且提供的JavaScript的編程環(huán)境都是一致的E、HTML頁(yè)面裝載時(shí)，首先把整個(gè)HTML頁(yè)面下載下來(lái)，再根據(jù)HTML中出現(xiàn)的順序依次下載它引用的外部的JavaScript代碼和圖片資源，最后才執(zhí)行頁(yè)面中的JavaScript代碼F、JavaScript中的函數(shù)就是一個(gè)對(duì)象，每個(gè)函數(shù)對(duì)象都繼承了JavaScript的Function類(lèi)正確答案: C
解析：
A.“#div .red”就是選擇CSS class屬性中包括red的所有Id為div元素
B.{"name": "John"， "age": 18},json數(shù)據(jù)中的鍵都需要添加""(雙引號(hào)）
D.不同瀏覽器提供的編程環(huán)境不一致（包括html、css、js編程的不一致），所以在編程時(shí)才要使用 -ms、-webkit、-moz來(lái)實(shí)現(xiàn)不同瀏覽器的兼容性（解決css編程不一致）
E.JS文件按在HTML中引入的順序依次載入（不是最后載入），在載入后馬上執(zhí)行，執(zhí)行時(shí)會(huì)阻塞頁(yè)面后續(xù)的內(nèi)容（包括頁(yè)面的渲染、其它資源的下載）
F.箭頭函數(shù)沒(méi)有super關(guān)鍵字，所以箭頭函數(shù)沒(méi)有繼承任何對(duì)象，也就不可能繼承Function類(lèi)。
2、以下描述正確的是:(多選)
A、`inline-block` 可以設(shè)置高度,`inline` 不可以設(shè)置高度B、`inline-block` 和 `inline` 都可以設(shè)置 `padding-left`C、`inline-block` 可以設(shè)置 `margin-left`，inline 不可以D、`block` 會(huì)獨(dú)占一行，`inline-block` 不會(huì)正確答案: A、B、D
解析:
行內(nèi)元素不可以設(shè)置元素寬高，但是可以設(shè)置 左右padding、左右margin
img、input屬于行內(nèi)替換元素。height/width/padding/margin均可用。效果等于塊元素
3、對(duì)于以下 HTML，下列選項(xiàng)中哪一個(gè) CSS 選擇器效果與其他的不同:
```html
<p><span>A</span><span>B</span><span>C</span></p>
```
A、`span:first-child`B、`span:nth-child(0)`C、`span:nth-child(-n+1)`D、`span:nth-last-child(3)`正確答案: B
解析:
:nth-child(-n+4)選取小于等于4標(biāo)簽, nth-child最小從1開(kāi)始
4、input 元素中，下列哪個(gè)類(lèi)型屬性定義了輸入電話號(hào)碼的控件？
A、mobB、telC、mobileD、telephone正確答案: B
5、以下選項(xiàng)中，哪些是html5 input的新屬性(多選)
A、fileB、searchC、numberD、resetE、tel正確答案: B、C、E
解析:
在HTML5中，為input元素新增了以下一些type屬性值：
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
