整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
、關(guān)于HTML語義化，你知道都有哪些標(biāo)簽？
語義化就是讓計算機(jī)能夠快速讀懂內(nèi)容，高效的處理信息。搜索引擎只能通過標(biāo)簽來判斷內(nèi)容的語義，因為頁面的很大一部分流量來自搜索引擎，要使頁面盡可能地對搜索引擎友好，所以盡可能地使用語義化標(biāo)簽，如：
div是division分離，span是span范圍，table是表格，ol是orderList有序列表，ul是unorderList無序列表，li是list item列表選項，html5進(jìn)一步推進(jìn)web語義化的發(fā)展，使用了一些新的標(biāo)簽有header、artical、address等。
2、HTML標(biāo)簽分類有哪些？都有啥特點?
默認(rèn)寬度是100%
塊級標(biāo)簽獨占一行
塊級標(biāo)簽可以使用height設(shè)置高度
常見塊級標(biāo)簽：div、p、h1~h6、ol、ul、table、form等等。
默認(rèn)寬度由內(nèi)容撐開
行級標(biāo)簽不會自動換行，從左到右一次排列
行級標(biāo)簽height設(shè)置高度失效，高度由內(nèi)容撐開。
常見行級標(biāo)簽：span、a、br、strong、lable、i、em。
結(jié)合行級和塊級的優(yōu)點
可以設(shè)置元素的寬高
還可以將多個元素顯示在一行從左到右一次排列。
常見行內(nèi)塊標(biāo)簽：img、input。
3、網(wǎng)頁編碼設(shè)置有幾種方式？
Charset屬性規(guī)定HTML文檔的字符編碼，常見的屬性值有以下幾個：
4、HTML的框架優(yōu)缺點有哪些？
Html框架有iframe和frame兩個，將多個頁面通過一個瀏覽器窗口顯示。
框架的優(yōu)點：
缺點：
5、HTML5有哪些新特性，移除了哪些元素？
H5新增了圖像、位置、存儲、多任務(wù)等功能。
新增元素：
移除元素：
Html5新增了 27 個元素，廢棄了 16 個元素，根據(jù)現(xiàn)有的標(biāo)準(zhǔn)規(guī)范，把 HTML5 的元素按優(yōu)先級定義為結(jié)構(gòu)性屬性、級塊性元素、行內(nèi)語義性元素和交互性元素 4 大類。
6、如何區(qū)分HTML和HTML5？
DOCUMENT聲明方式是區(qū)分的重要元素。
根據(jù)新增加的結(jié)構(gòu)、功能來區(qū)分。H5有好多新增語義化標(biāo)簽。
7、H5文件離線存儲怎么使用，工作原理是什么？
在線情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源，并進(jìn)行離線存儲。如果已經(jīng)訪問過并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面。然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有改變，就不會有任何操作，如果文件改變了，那么就會重新下載資源，并進(jìn)行離線緩存。
頁面頭部加入manifest屬性。如：<html manifest="demo.appcache">
在cache.manifest文件中編寫離線存儲的資源。
8、Cookies,sessionStorage和localStorage的區(qū)別？
共同點：都是保存在瀏覽器端，而且都是同源的。
區(qū)別：
9、title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？
title屬性沒有明確意義，只表示標(biāo)題，h1表示層次明確的標(biāo)題，對頁面信息抓取也有很大的影響。
strong標(biāo)明重點內(nèi)容，語氣加強含義，b表示無意義的視覺表示
em表示強調(diào)文本，i是斜體，是無意義的視覺表示
視覺樣式標(biāo)簽：b、u、i、s
語義樣式標(biāo)簽：strong、em、ins、del、code
10、viewport 所有屬性 ？
viewport是用戶網(wǎng)頁的可視區(qū)域，使用meta設(shè)置viewport時有很多屬性，分別對以下各個屬性介紹
安卓中還支持：target-densitydpi，表示目標(biāo)設(shè)備的密度等級，作用是決定css中的1px 代表多少物理像素。
11、meta標(biāo)簽的name屬性值？
name屬性主要用于描述網(wǎng)頁，與之對應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索機(jī)器人查找信息和分類信息用的。
Meta標(biāo)簽的name屬性語法格式是：
<meta name=”參數(shù)”content=”具體的參數(shù)值”>
Name主要有以下幾個參數(shù)：
Content的參數(shù)主要有name的參數(shù)來決定，如果是關(guān)鍵字的時候，多個關(guān)鍵字之間使用逗號隔開，一般使用5個關(guān)鍵字為宜；如果是描述的時候，描述長度一般控制在200字左右；如果是索引的時候，一般使用inde、noindex、none、all，默認(rèn)是all。
見瀏覽器兼容性問題與解決方案？
參考答案
(1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補丁和內(nèi)補丁不同
問題癥狀：隨便寫幾個標(biāo)簽，不加樣式控制的情況下，各自的margin 和padding差異較大。
碰到頻率:100%
解決方案：CSS里 {margin:0;padding:0;}
備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符來設(shè)置各個標(biāo)簽的內(nèi)外補丁是0。
(2)瀏覽器兼容問題二：塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大
問題癥狀:常見癥狀是IE6中后面的一塊被頂?shù)较乱恍?/p>
碰到頻率：90%（稍微復(fù)雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題）
解決方案：在float的標(biāo)簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性
備注：我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性標(biāo)簽，橫向布局的時候我們通常都是用div float實現(xiàn)的，橫向的間距設(shè)置如果用margin實現(xiàn)，這就是一個必然會碰到的兼容性問題。
(3)瀏覽器兼容問題三：設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設(shè)置高度
問題癥狀：IE6、7和遨游里這個標(biāo)簽的高度不受控制，超出自己設(shè)置的高度
碰到頻率：60%
解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。
備注：這種情況一般出現(xiàn)在我們設(shè)置小圓角背景的標(biāo)簽里。出現(xiàn)這個問題的原因是IE8之前的瀏覽器都會給標(biāo)簽一個最小默認(rèn)的行高的高度。即使你的標(biāo)簽是空的，這個標(biāo)簽的高度還是會達(dá)到默認(rèn)的行高。
(4)瀏覽器兼容問題四：行內(nèi)屬性標(biāo)簽，設(shè)置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug
問題癥狀：IE6里的間距比超過設(shè)置的間距
碰到幾率：20%
解決方案 ： 在display:block;后面加入display:inline;display:table;
備注：行內(nèi)屬性標(biāo)簽，為了設(shè)置寬高，我們需要設(shè)置display:block;(除了input標(biāo)簽比較特殊)。在用float布局并有橫向的margin后，在IE6下，他就具有了塊屬性float后的橫向margin的bug。不過因為它本身就是行內(nèi)屬性標(biāo)簽，所以我們再加上display:inline的話，它的高寬就不可設(shè)了。這時候我們還需要在display:inline后面加入display:talbe。
(5) 瀏覽器兼容問題五：圖片默認(rèn)有間距
問題癥狀：幾個img標(biāo)簽放在一起的時候，有些瀏覽器會有默認(rèn)的間距，加了問題一中提到的通配符也不起作用。
碰到幾率：20%
解決方案：使用float屬性為img布局
備注 ： 因為img標(biāo)簽是行內(nèi)屬性標(biāo)簽，所以只要不超出容器寬度，img標(biāo)簽都會排在一行里，但是部分瀏覽器的img標(biāo)簽之間會有個間距。去掉這個間距使用float是正道。（我的一個學(xué)生使用負(fù)margin，雖然能解決，但負(fù)margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）
(6) 瀏覽器兼容問題六：標(biāo)簽最低高度設(shè)置min-height不兼容
問題癥狀：因為min-height本身就是一個不兼容的CSS屬性，所以設(shè)置min-height時不能很好的被各個瀏覽器兼容
碰到幾率：5%
解決方案：如果我們要設(shè)置一個標(biāo)簽的最小高度200px，需要進(jìn)行的設(shè)置為：{min-height:200px; height:auto !important;
height:200px; overflow:visible;}
備注：在B/S系統(tǒng)前端開時，有很多情況下我們又這種需求。當(dāng)內(nèi)容小于一個值（如300px）時。容器的高度為300px；當(dāng)內(nèi)容高度大于這個值時，容器高度被撐高，而不是出現(xiàn)滾動條。這時候我們就會面臨這個兼容性問題。
(7)瀏覽器兼容問題七：透明度的兼容CSS設(shè)置
一般在ie中用的是filter:alpha(opacity=0);這個屬性來設(shè)置div或者是塊級元素的透明度，而在firefox中，一般就是直接使用opacity:0,對于兼容的，一般的做法就是在書寫css樣式的將2個都寫上就行，就能實現(xiàn)兼容
列出display的值并說明他們的作用？
參考答案
display： none | inline | block |
list-item | inline-block | table | inline-table |
table-caption | table-cell | table-row | table-row-group | table-column |
table-column-group | table-footer-group | table-header-group | run-in | box |
inline-box | flexbox | inline-flexbox | flex | inline-flex
默認(rèn)值：inline
none： 隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間
inline： 指定對象為內(nèi)聯(lián)元素。
block： 指定對象為塊元素。
list-item：指定對象為列表項目。
inline-block： 指定對象為內(nèi)聯(lián)塊元素。（CSS2）
table： 指定對象作為塊元素級的表格。類同于html標(biāo)簽<table>（CSS2）
inline-table：指定對象作為內(nèi)聯(lián)元素級的表格。類同于html標(biāo)簽<table>（CSS2）
table-caption：指定對象作為表格標(biāo)題。類同于html標(biāo)簽<caption>（CSS2）
table-cell：指定對象作為表格單元格。類同于html標(biāo)簽<td>（CSS2）
table-row：指定對象作為表格行。類同于html標(biāo)簽<tr>（CSS2）
table-row-group：指定對象作為表格行組。類同于html標(biāo)簽<tbody>（CSS2）
table-column：指定對象作為表格列。類同于html標(biāo)簽<col>（CSS2）
table-column-group： 指定對象作為表格列組顯示。類同于html標(biāo)簽<colgroup>（CSS2）
table-header-group： 指定對象作為表格標(biāo)題組。類同于html標(biāo)簽<thead>（CSS2）
table-footer-group： 指定對象作為表格腳注組。類同于html標(biāo)簽<tfoot>（CSS2）
run-in：根據(jù)上下文決定對象是內(nèi)聯(lián)對象還是塊級對象。（CSS3）
box：將對象作為彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
inline-box：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
flexbox：將對象作為彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
inline-flexbox：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
flex：將對象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
inline-flex：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
如何居中div, 如何居中一個浮動元素?
參考答案
(1)、非浮動元素居中：可以設(shè)置margin:0 auto 令其居中, 定位 ,父級元素text-algin:center等等
(2)、浮動元素居中:
方法一:設(shè)置當(dāng)前div的寬度，然后設(shè)置margin-left:50%; position:relative; left:-250px;其中的left是寬度的一半。
方法二:父元素和子元素同時左浮動，然后父元素相對左移動50%，再然后子元素相對左移動-50%。
方法三:position定位等等。
CSS中l(wèi)ink 和@import 的區(qū)別是？
參考答案
(1)、link屬于HTML標(biāo)簽，而@import是CSS提供的;
(2)、頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
(3)、import只在IE5以上才能識別，而link是HTML標(biāo)簽，無兼容問題;
(4)、link方式的樣式的權(quán)重高于@import的權(quán)重.
請列舉幾種清除浮動的方法(至少兩種)?
參考答案
(1)、父級div定義 height
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優(yōu)點：簡單、代碼少、容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產(chǎn)生問題
建議：不推薦使用，只建議高度固定的布局時使用
(2)、結(jié)尾處加空div標(biāo)簽 clear:both
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優(yōu)點：簡單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問題
缺點：不少初學(xué)者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
(3)、父級div定義
偽類:after 和 zoom
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題
優(yōu)點：瀏覽器支持好、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）
缺點：代碼多、不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持。
建議：推薦使用，建議定義公共類，以減少CSS代碼。
(4)、父級div定義 overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點：簡單、代碼少、瀏覽器支持好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。
建議：只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用。
(5)、父級div定義 overflow:auto
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點：簡單、代碼少、瀏覽器支持好
缺點：內(nèi)部寬高超過父級div時，會出現(xiàn)滾動條。
建議：不推薦使用，如果你需要出現(xiàn)滾動條或者確保你的代碼不會出現(xiàn)滾動條就使用吧。
block，inline和inlinke-block細(xì)節(jié)對比？
參考答案
?
display:block
a、block元素會獨占一行，多個block元素會各自新起一行。默認(rèn)情況下，block元素寬度自動填滿其父元素寬度。
b、block元素可以設(shè)置width,height屬性。塊級元素即使設(shè)置了寬度,仍然是獨占一行。
c、block元素可以設(shè)置margin和padding屬性。
? display:inline
a、inline元素不會獨占一行，多個相鄰的行內(nèi)元素會排列在同一行里，直到一行排列不下，才會新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。
b、inline元素設(shè)置width,height屬性無效。
c、inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left,
margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top,
margin-bottom不會產(chǎn)生邊距效果。
? display:inline-block
a、簡單來說就是將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
補充說明
a、一般我們會用display:block，display:inline或者display:inline-block來調(diào)整元素的布局級別，其實display的參數(shù)遠(yuǎn)遠(yuǎn)不止這三種，僅僅是比較常用而已。
b、IE（低版本IE）本來是不支持inline-block的，所以在IE中對內(nèi)聯(lián)元素使用display:inline-block，理論上IE是不識別的，但使用display:inline-block在IE下會觸發(fā)layout，從而使內(nèi)聯(lián)元素?fù)碛辛薲isplay:inline-block屬性的表象。
什么叫優(yōu)雅降級和漸進(jìn)增強？
參考答案
優(yōu)雅降級： Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認(rèn)它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效.
漸進(jìn)增強： 從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時，它們會自動地呈現(xiàn)出來并發(fā)揮作用。
說說浮動元素會引起的問題和你的解決辦法
參考答案
問題：
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其后
（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結(jié)構(gòu)
解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動可解決問題(2)、(3)，對于問題(1)，添加如下樣式，給父元素添加clearfix樣式：
.clearfix:after{content: ".";display: block;height: 0;clear:
both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
清除浮動的幾種方法：
(1)、額外標(biāo)簽法，<div
style="clear:both;"></div>（缺點：不過這個辦法會增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來不夠簡潔。）
(2)、使用after偽類
content:" ";
height:0;
visibility:hidden;
display:block;
clear:both;
}
(3)、浮動外部元素
(4)、設(shè)置overflow為hidden或者auto
你有哪些性能優(yōu)化的方法？
參考答案
回答一：
（1）、減少http請求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip，CDN托管，data緩存
，圖片服務(wù)器。
（2）、前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費，前端用變量保存AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù)
（3）、用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。
（4）、當(dāng)需要設(shè)置的樣式很多時設(shè)置className而不是直接操作style。
（5）、少用全局變量、緩存DOM節(jié)點查找的結(jié)果。減少IO讀取操作。
（6）、避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動態(tài)屬性)。
（7）、圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部加上時間戳。
回答二：
(1)、減少HTTP請求次數(shù)
(2)、使用CDN
(3)、避免空的src和href
(4)、為文件頭指定Expires
(5)、使用gzip壓縮內(nèi)容
(6)、把CSS放到頂部
(7)、把JS放到底部
(8)、避免使用CSS表達(dá)式
(9)、將CSS和JS放到外部文件中
(10)、避免跳轉(zhuǎn)
(11)、可緩存的AJAX
(12)、使用GET來完成AJAX請求
為什么要初始化CSS樣式？
參考答案
因為瀏覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。
當(dāng)然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
最簡單的初始化方法就是： {padding: 0; margin: 0;} （不建議）
解釋下浮動和它的工作原理？清除浮動的技巧？
參考答案
浮動元素脫離文檔流，不占據(jù)空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
(1)、使用空標(biāo)簽清除浮動。
這種方法是在所有浮動標(biāo)簽后面添加一個空標(biāo)簽 定義css clear:both. 弊端就是增加了無意義標(biāo)簽。
(2)、使用overflow。
給包含浮動元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
(3)、使用after偽對象清除浮動。
該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設(shè)置height:0，否則該元素會比實際高出若干像素；
CSS樣式表根據(jù)所在網(wǎng)頁的位置，可分為哪幾種樣式表？
參考答案
行內(nèi)樣式表，內(nèi)嵌樣式表，外部樣式表
談?wù)勀銓SS中刻度的認(rèn)識？
參考答案
在CSS中刻度是用于設(shè)置元素尺寸的單位。
a、特殊值0可以省略單位。例如：margin:0px可以寫成margin:0
b、一些屬性可能允許有負(fù)長度值，或者有一定的范圍限制。如果不支持負(fù)長度值，那應(yīng)該變換到能夠被支持的最近的一個長度值。
c、長度單位包括：相對單位和絕對單位。
相對長度單位有： em, ex, ch, rem, vw, vh, vmax,
vmin
絕對長度單位有： cm, mm, q, in, pt, pc, px
絕對長度單位：1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
文本相對長度單位：em
相對長度單位是相對于當(dāng)前對象內(nèi)文本的字體尺寸，如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸。(相對父元素的字體大小倍數(shù))
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }
文本相對長度單位：rem
rem是CSS3新增的一個相對單位（root em，根em），相對于根元素(即html元素)font-size計算值的倍數(shù)
只相對于根元素的大小
瀏覽器的默認(rèn)字體大小為16像素，瀏覽器默認(rèn)樣式也稱為user agent stylesheet，就是所有瀏覽器內(nèi)置的默認(rèn)樣式，多數(shù)是可以被修改的，但chrome不能直接修改，可以被用戶樣式覆蓋。
請你說說em與rem的區(qū)別？
參考答案
rem
rem是CSS3新增的一個相對單位（root em，根em），相對于根元素(即html元素)font-size計算值的倍數(shù)
只相對于根元素的大小
rem（font size of the root element）是指相對于根元素的字體大小的單位。簡單的說它就是一個相對單位。
作用：利用rem可以實現(xiàn)簡單的響應(yīng)式布局，可以利用html元素中字體的大小與屏幕間的比值設(shè)置font-size的值實現(xiàn)當(dāng)屏幕分辨率變化時讓元素也變化，以前的天貓tmall就使用這種辦法
em
文本相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸(默認(rèn)16px)。(相對父元素的字體大小倍數(shù))
em（font size of the element）是指相對于父元素的字體大小的單位。它與rem之間其實很相似，區(qū)別在。（相對是的HTML元素的字體大，默認(rèn)16px）
em與rem的重要區(qū)別： 它們計算的規(guī)則一個是依賴父元素另一個是依賴根元素計算
請你說說box-sizing屬性的的用法？
參考答案
設(shè)置或檢索對象的盒模型組成模式
a、box-sizing:content-box： padding和border不被包含在定義的width和height之內(nèi)。對象的實際寬度等于設(shè)置的width值和border、padding之和，即( Element width = width + border + padding，但占有頁面位置還要加上margin ) 此屬性表現(xiàn)為標(biāo)準(zhǔn)模式下的盒模型。
b、box-sizing:border-box： padding和border被包含在定義的width和height之內(nèi)。對象的實際寬度就等于設(shè)置的width值，即使定義有border和padding也不會改變對象的實際寬度，即( Element width = width ) 此屬性表現(xiàn)為怪異模式下的盒模型。
瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么？
參考答案
在“標(biāo)準(zhǔn)模式”(Standards Mode) 頁面按照 HTML 與 CSS 的定義渲染，而在“怪異模式”(Quirks Mode)就是瀏覽器為了兼容很早之前針對舊版本瀏覽器設(shè)計、并未嚴(yán)格遵循W3C 標(biāo)準(zhǔn)的網(wǎng)頁而產(chǎn)生的一種頁面渲染模式。瀏覽器基于頁面中文件類型描述的存在以決定采用哪種渲染模式；如果存在一個完整的DOCTYPE則瀏覽器將會采用標(biāo)準(zhǔn)模式，而如果它缺失則瀏覽器將會采用怪異模式。
強烈建議閱讀加深理解：怪異模式（Quirks Mode）對 HTML 頁面的影響，這里列下瀏覽器標(biāo)準(zhǔn)模式和怪異模式的區(qū)別：
（1）盒模型：
在怪異模式下，盒模型為IE盒模型而非標(biāo)準(zhǔn)模式下的W3C 盒模型：在 IE 盒模型中，
box width = content width + padding left + padding right + border left + border
right，
box height = content height + padding top + padding bottom + border top +
border bottom。
而在 W3C 標(biāo)準(zhǔn)的盒模型中，box 的大小就是 content 的大小。
（2）圖片元素的垂直對齊方式:
對于inline元素和table-cell元素，在 IE Standards Mode 下 vertical-align 屬性默認(rèn)取值為baseline。而當(dāng)inline元素的內(nèi)容只有圖片時，如table的單元格table-cell。在 IE Quirks Mode 下，table單元格中的圖片的 vertical-align 屬性默認(rèn)為bottom，因此，在圖片底部會有幾像素的空間。
（3）<table>元素中的字體:
CSS 中，描述font的屬性有font-family，font-size，font-style，font-weigh,上述屬性都是可以繼承的。而在IE Quirks Mode 下，對于table 元素，字體的某些屬性將不會從body或其他封閉元素繼承到table中，特別是 font-size屬性。
（4）
內(nèi)聯(lián)元素的尺寸:
在 IE Standards Mode 下，non-replaced inline 元素?zé)o法自定義大小，而在IE Quirks Mode 下，定義這些元素的width和height 屬性，能夠影響該元素顯示的大小尺寸。
（5）
元素的百分比高度:
a、CSS 中對于元素的百分比高度規(guī)定如下，百分比為元素包含塊的高度，不可為負(fù)值。如果包含塊的高度沒有顯式給出，該值等同于“auto”（即取決于內(nèi)容的高度）。所以百分比的高度必須在父元素有聲明高度時使用。
b、當(dāng)一個元素使用百分比高度時，在IE Standards Mode 下，高度取決于內(nèi)容的變化，而在Quirks Mode 下，百分比高度則被正確應(yīng)用。
（6）
元素溢出的處理：
在 IE Standard Mode 下，overflow取默認(rèn)值 visible，即溢出可見，這種情況下，溢出內(nèi)容不會被裁剪，呈現(xiàn)在元素框外。而在Quirks Mode 下，該溢出被當(dāng)做擴(kuò)展box來對待，即元素的大小由其內(nèi)容決定，溢出不會被裁剪，元素框自動調(diào)整，包含溢出內(nèi)容。
怪異Quirks模式是什么，它和標(biāo)準(zhǔn)Standards模式有什么區(qū)別？
參考答案
從IE6開始，引入了Standards模式，標(biāo)準(zhǔn)模式中，瀏覽器嘗試給符合標(biāo)準(zhǔn)的文檔在規(guī)范上的正確處理達(dá)到在指定瀏覽器中的程度。
在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對CSS的支持很差， IE6將對CSS提供更好的支持，然而這時的問題就來了，因為有很多頁面是基于舊的布局方式寫的，而如果IE6 支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現(xiàn)有頁面，又提供新的渲染機(jī)制呢？
在寫程序時我們也會經(jīng)常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。遇到這種問題時的一個常見做法是增加參數(shù)和分支，即當(dāng)某個參數(shù)為真時，我們就使用新功能，而如果這個參數(shù) 不為真時，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是類似這樣做的，它將DTD當(dāng)成了這個“參數(shù)”，因為以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區(qū)別：總體會有布局、樣式解析和腳本執(zhí)行三個方面的區(qū)別。
盒模型： 在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
設(shè)置行內(nèi)元素的高寬： 在Standards模式下，給<span>等行內(nèi)元素設(shè)置wdith和height都不會生效，而在quirks模式下，則會生效。
設(shè)置百分比的高度： 在standards模式下，一個元素的高度是由其包含的內(nèi)容來決定的，如果父元素沒有設(shè)置百分比的高度，子元素設(shè)置一個百分比的高度是無效的用margin:0 auto設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
（還有很多，答出什么不重要，關(guān)鍵是看他答出的這些是不是自己經(jīng)驗遇到的，還是說都是看文章看的，甚至完全不知道。）
說說你對邊距折疊的理解?
參考答案
外邊距折疊： 相鄰的兩個或多個外邊距 (margin) 在垂直方向會合并成一個外邊距（margin）
相鄰： 沒有被非空內(nèi)容、padding、border 或 clear 分隔開的margin特性. 非空內(nèi)容就是說這元素之間要么是兄弟關(guān)系或者父子關(guān)系
垂直方向外邊距合并計算:
a、參加折疊的margin都是正值：取其中 margin 較大的值為最終 margin 值。
b、參與折疊的margin 都是負(fù)值：取的是其中絕對值較大的，然后，從0 位置，負(fù)向位移。
c、參與折疊的margin 中有正值，有負(fù)值：先取出負(fù) margin 中絕對值中最大的，然后，和正margin 值中最大的 margin 相加。
內(nèi)聯(lián)與塊級標(biāo)簽有何區(qū)別？
參考答案
Html中的標(biāo)簽?zāi)J(rèn)主要分為兩大類型，一類為塊級元素，另一類是行內(nèi)元素，許多人也把行內(nèi)稱為內(nèi)聯(lián)，所以叫內(nèi)聯(lián)元素，其實就是一個意思。為了很好的布局，必須理解它們間的區(qū)別。
說說隱藏元素的方式有哪些？
參考答案
a、使用CSS的display:none，不會占有原來的位置
b、使用CSS的visibility:hidden，會占有原來的位置
c、使用HTML5中的新增屬性hidden="hidden"，不會占有原來的位置
為什么重置瀏覽器默認(rèn)樣式，如何重置默瀏覽器認(rèn)樣式？
參考答案
每種瀏覽器都有一套默認(rèn)的樣式表，即user agent stylesheet，網(wǎng)頁在沒有指定的樣式時，按瀏覽器內(nèi)置的樣式表來渲染。這是合理的，像word中也有一些預(yù)留樣式，可以讓我們的排版更美觀整齊。不同瀏覽器甚至同一瀏覽器不同版本的默認(rèn)樣式是不同的。但這樣會有很多兼容問題。
a、最簡單的辦法：（不推薦使用）*{margin: 0;padding: 0;}。
b、使用CSSReset可以將所有瀏覽器默認(rèn)樣式設(shè)置成一樣。
c、normalize：也許有些cssreset過于簡單粗暴，有點傷及無辜，normalize是另一個選擇。bootstrap已經(jīng)引用該css來重置瀏覽器默認(rèn)樣式，比普通的cssreset要精細(xì)一些，保留瀏覽器有用的默認(rèn)樣式，支持包括手機(jī)瀏覽器在內(nèi)的超多瀏覽器，同時對HTML5元素、排版、列表、嵌入的內(nèi)容、表單和表格都進(jìn)行了一般化。
天貓 使用的css reset重置瀏覽器默認(rèn)樣式：
@charset
"gb2312";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 "microsoft yahei";line-height: 1.5;-ms-overflow-style: scrollbar}h1,
h2, h3, h4, h5, h6 {font-size: 100%}ul, ol {list-style: none}a
{text-decoration: none;cursor:pointer}a:hover
{text-decoration: underline}img {border: 0}button, input, select,
textarea {font-size: 100%}table {border-collapse: collapse;border-spacing: 0}.clear
{clear:both}.fr {float:right}.fl {float:left}.block
{display:block;text-indent:-999em}
談?wù)勀銓FC與IFC的理解？(是什么，如何產(chǎn)生，作用)
參考答案
(1)、什么是BFC與IFC
a、BFC（Block Formatting Context）即“塊級格式化上下文”， IFC（Inline Formatting Context）即行內(nèi)格式化上下文。常規(guī)流（也稱標(biāo)準(zhǔn)流、普通流）是一個文檔在被顯示時最常見的布局形態(tài)。一個框在常規(guī)流中必須屬于一個格式化上下文，你可以把BFC想象成一個大箱子，箱子外邊的元素將不與箱子內(nèi)的元素產(chǎn)生作用。
b、BFC是W3C CSS 2.1 規(guī)范中的一個概念，它決定了元素如何對其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。當(dāng)涉及到可視化布局的時候，Block Formatting Context提供了一個環(huán)境，HTML元素在這個環(huán)境中按照一定規(guī)則進(jìn)行布局。一個環(huán)境中的元素不會影響到其它環(huán)境中的布局。比如浮動元素會形成BFC，浮動元素內(nèi)部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。也可以說BFC就是一個作用范圍。
c、在普通流中的Box(框) 屬于一種 formatting context(格式化上下文) ，類型可以是 block ，或者是 inline ，但不能同時屬于這兩者。并且，Block boxes(塊框) 在 block formatting context(塊格式化上下文) 里格式化， Inline boxes(塊內(nèi)框) 則在 Inline Formatting Context(行內(nèi)格式化上下文) 里格式化。
(2)、如何產(chǎn)生BFC
當(dāng)一個HTML元素滿足下面條件的任何一點，都可以產(chǎn)生Block Formatting Context：
a、float的值不為none
b、overflow的值不為visible
c、display的值為table-cell, table-caption, inline-block中的任何一個
d、position的值不為relative和static
CSS3觸發(fā)BFC方式則可以簡單描述為：在元素定位非static，relative的情況下觸發(fā)，float也是一種定位方式。
(3)、BFC的作用與特點
a、不和浮動元素重疊，清除外部浮動，阻止浮動元素覆蓋
如果一個浮動元素后面跟著一個非浮動的元素，那么就會產(chǎn)生一個重疊的現(xiàn)象。常規(guī)流（也稱標(biāo)準(zhǔn)流、普通流）是一個文檔在被顯示時最常見的布局形態(tài)，當(dāng)float不為none時，position為absolute、fixed時元素將脫離標(biāo)準(zhǔn)流。
說說你對頁面中使用定位(position)的理解？
參考答案
使用css布局position非常重要，語法如下：
position：static | relative | absolute | fixed |
center | page | sticky
默認(rèn)值：static，center、page、sticky是CSS3中新增加的值。
(1)、static
可以認(rèn)為靜態(tài)的，默認(rèn)元素都是靜態(tài)的定位，對象遵循常規(guī)流。此時4個定位偏移屬性不會被應(yīng)用，也就是使用left，right，bottom，top將不會生效。
(2)、relative
相對定位，對象遵循常規(guī)流，并且參照自身在常規(guī)流中的位置通過top，right，bottom，left這4個定位偏移屬性進(jìn)行偏移時不會影響常規(guī)流中的任何元素。
(3)、absolute
a、絕對定位，對象脫離常規(guī)流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規(guī)流中的任何元素，其margin不與其他任何margin折疊。
b、元素定位參考的是離自身最近的定位祖先元素，要滿足兩個條件，第一個是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果沒有則選擇body為對照對象。第二個條件是要求祖先元素必須定位，通俗說就是position的屬性值為非static都行。
(4)、fixed
固定定位，與absolute一致，但偏移定位是以窗口為參考。當(dāng)出現(xiàn)滾動條時，對象不會隨著滾動。
(5)、center
與absolute一致，但偏移定位是以定位祖先元素的中心點為參考。盒子在其包含容器垂直水平居中。（CSS3）
(6)、page
與absolute一致。元素在分頁媒體或者區(qū)域塊內(nèi)，元素的包含塊始終是初始包含塊，否則取決于每個absolute模式。（CSS3）
(7)、sticky
對象在常態(tài)時遵循常規(guī)流。它就像是relative和fixed的合體，當(dāng)在屏幕中時按常規(guī)流排版，當(dāng)卷動到屏幕外時則表現(xiàn)如fixed。該屬性的表現(xiàn)是現(xiàn)實中你見到的吸附效果。（CSS3）
如何解決多個元素重疊問題？
參考答案
使用z-index屬性可以設(shè)置元素的層疊順序
z-index屬性
語法：z-index: auto | <integer>
默認(rèn)值：auto
適用于：定位元素。即定義了position為非static的元素
取值：
auto：元素在當(dāng)前層疊上下文中的層疊級別是0。元素不會創(chuàng)建新的局部層疊上下文，除非它是根元素。
整數(shù)： 用整數(shù)值來定義堆疊級別。可以為負(fù)值。 說明：
檢索或設(shè)置對象的層疊順序。
z-index用于確定元素在當(dāng)前層疊上下文中的層疊級別，并確定該元素是否創(chuàng)建新的局部層疊上下文。
當(dāng)多個元素層疊在一起時，數(shù)字大者將顯示在上面。
排序是比較基礎(chǔ)的算法，與很多語言一樣，Python也提供了對列表的排序方法和內(nèi)建排序函數(shù)。
方式一：
li = [1, 3, 4, 9, 0]
li.sort() # 提供方法
方式二：
li = [1, 3, 4, 9, 0]
li = sorted(li) # 提供方法
兩種方式都可以實現(xiàn)對列表元素的排序，從接受參數(shù)更能看出兩者區(qū)別和相同點。
（1）：sort()屬于列表對象特有的排序方法，因此調(diào)用方法直接在列表本身進(jìn)行修改，返回值為None或者說無需返回值。
（2）： sorted()屬于python提供內(nèi)建函數(shù)，無需導(dǎo)入可直接用，而從接受對象來看，sorted()方法可以直接接受iterable可迭代對象，因此作用對象更廣泛，包括字符串，元組甚至字典都可以，返回一個列表，如下所示
test_string = "dvsegh"
print(sorted(test_string)) # 輸出['d', 'e', 'g', 'h', 's', 'v']
test_tuple = (5, 4, 3, 2, 1)
print(sorted(test_tuple)) # 輸出[1, 2, 3, 4, 5]
test_list = [5, 4, 3, 2, 1]
print(sorted(test_list)) # 輸出[1, 2, 3, 4, 5]
test_dic = {1:"a", 2:"b", 0:"z"}
print(sorted(test_dic)) # 輸出[0, 1, 2]，字典的key作為排序結(jié)果返回
（3）：對于Python3.x中的sort()無法函數(shù)自定義排序規(guī)則后面會說到。
（1）：都支持reverse反轉(zhuǎn)操作，參數(shù)reverse接收布爾類型，比如reverse=True，則表示排序結(jié)果逆序。
li = [1, 3, 4, 9, 0]
li.sort(reverse=True)
print(li) # [9, 4, 3, 1, 0]
（2）： 都支持關(guān)鍵函數(shù)排序，也就是key參數(shù)指定排序規(guī)則，參數(shù)的接收值為一個函數(shù)，該函數(shù)可以接收一個參數(shù)并返回一個值用來比較，如下，len接收字符串，返回長度作為比較值。
test_string = "Hello World Welcome to My City"
print(sorted(test_string.split(" "), key=len)) # 根據(jù)字符串長度排序
# 輸出：['to', 'My', 'City', 'Hello', 'World', 'Welcome']
print(sorted(test_string.split(" "), key=str.lower)) # 根據(jù)小寫之后的字典序排序
# 輸出：['City', 'Hello', 'My', 'to', 'Welcome', 'World']
test_list = [-5, 4, 0, 2, 1]
print(sorted(test_list, key=abs)) # 根據(jù)絕對值排序
# 輸出：[0, 1, 2, 4, -5]
（3）：更廣泛的可以使用lambda表達(dá)式來完成更復(fù)雜排序。如下對二維列表多級排序
li = [
[3 ,5],
[5 ,0],
[5 ,6],
[3 ,-1],
[2, 9]
]
# 多級排序
# 根據(jù)第一個元素從小打到排列，當(dāng)?shù)谝粋€元素相等，按照第二個元素從大到小排列
li.sort(key=lambda x: (x[0], -x[1]))
print(li)
# 輸出 [[2, 9], [3, 5], [3, -1], [5, 6], [5, 0]]
也或者可以根據(jù)復(fù)雜對象的某些屬性排序。對對象根據(jù)屬性進(jìn)行排序
# 學(xué)生對象，包括年齡，身高體重等
class Student:
def __init__(self, age, height, weight):
self.age = age
self.height = height
self.weight = weight
s1 = Student(18, 180, 75)
s2 = Student(19, 175, 80)
s3 = Student(17, 176, 70)
s4 = Student(18, 177, 65)
s5 = Student(19, 180, 65)
# 班級里有很多學(xué)生
classes = [s1, s2, s3, s4, s5]
# 根據(jù)學(xué)生的年齡排序
classes.sort(key=lambda s: s.age)
for stu in classes:
print("stu age: %d, height: %d, weight: %d" % (stu.age, stu.height, stu.weight))
輸出：
stu age: 17, height: 176, weight: 70
stu age: 18, height: 180, weight: 75
stu age: 18, height: 177, weight: 65
stu age: 19, height: 175, weight: 80
stu age: 19, height: 180, weight: 65
從以上排序結(jié)果中相同年齡的學(xué)生還保持排序前的相對順序，說明sort()排序也是穩(wěn)定排序，sort()底層是基于合并排序和插入排序集合的一種更高效排序算法。以上是使用lambda表達(dá)式指定排序規(guī)則，也可以使用operator中提供的其他更加簡潔的方式。
# 同樣適用上述的Student例子
from operator import itemgetter, attrgetter
# 實現(xiàn)根據(jù)學(xué)生年齡排序
print(sorted(classes, key=attrgetter('age')))
print(sorted(classes, key=itemgetter(1)))
# 實現(xiàn)多級排序 新根據(jù)身高，再根據(jù)年齡排序
sorted(classes, key=attrgetter('height', 'age'))
其他語言中普遍提供的有cmp函數(shù)，也就是自定義更高級函數(shù)作為排序規(guī)則。而在python3.x中sort()不在支持cmp自定義函數(shù)比較，想要使用cmp，則需要是使用sorted()，并額外的做一些包裝。
比如，同樣使用如上的Student例子，想要完成自定義排序規(guī)則，比如首先按照年齡大小排序，當(dāng)年齡相同的時候按照體重逆序排序，如果體重也相同則按照身高逆序排序。
from functools import cmp_to_key
def func(stu1, stu2):
# 年齡相同
if stu1.age == stu2.age:
# 體重相同 安裝身高逆序
if stu1.weight == stu2.weight:
return stu2.height - stu1.height
else: # 體重不同，逆序排序
return stu2.weight - stu1.weight
else: # 年齡不同，則按照年齡排序
return stu1.age - stu2.age
class Student:
def __init__(self, age, height, weight):
self.age = age
self.height = height
self.weight = weight
s1 = Student(18, 180, 55)
s2 = Student(19, 175, 80)
s3 = Student(17, 162, 70)
s4 = Student(18, 177, 65)
s5 = Student(19, 180, 65)
s6 = Student(16, 160, 55)
s7 = Student(17, 164, 70)
# 班級有7個學(xué)生
classes = [s1, s2, s3, s4, s5, s6, s7]
# 排序
classes = sorted(classes, key=cmp_to_key(func))
for stu in classes:
print("stu age: %d, height: %d, weight: %d" % (stu.age, stu.height, stu.weight))
輸出結(jié)果
stu age: 16, height: 160, weight: 55
stu age: 17, height: 164, weight: 70
stu age: 17, height: 162, weight: 70
stu age: 18, height: 177, weight: 65
stu age: 18, height: 180, weight: 55
stu age: 19, height: 175, weight: 80
stu age: 19, height: 180, weight: 65
對于sorted(iterable, key=lambda x:x)，這種比較傾向于待排序的每個元素都有一個絕對的大小值作為排序標(biāo)準(zhǔn)，而有時候會絕對大小是根據(jù)兩個元素才能得出的衡量，因此可以使用如上functools.cmp_to_key構(gòu)建多個元素的比較函數(shù)。cmp_to_key包裝后的自定義比較函數(shù)可以接受兩個元素，將兩個元素的對比結(jié)果作為返回值，另外注意，自定義的比較函數(shù)返回值需要是整型。
cmp_to_key的源碼如下
def cmp_to_key(mycmp):
"""Convert a cmp= function into a key= function"""
class K(object):
__slots__ = ['obj']
def __init__(self, obj):
self.obj = obj
def __lt__(self, other):
return mycmp(self.obj, other.obj) < 0
def __gt__(self, other):
return mycmp(self.obj, other.obj) > 0
def __eq__(self, other):
return mycmp(self.obj, other.obj) == 0
def __le__(self, other):
return mycmp(self.obj, other.obj) <= 0
def __ge__(self, other):
return mycmp(self.obj, other.obj) >= 0
__hash__ = None
return K
cmp_to_key接收myfunc，并在內(nèi)部定義一個K類并返回這個K類，這個類內(nèi)部完成了各種比較運算符的重載（也就是mycmp的定義的排序規(guī)則），這個類是可調(diào)用的，在參與比較的時候其實是K的對象，而在使用lambda匿名表達(dá)式的時候使用是列表中的元素進(jìn)行大小比較。如下：
li = [1, 0, 0, 8, 4]
sorted(li, key=lambda x: x) # x代指li中的每個元素
以下是筆試面試過程中遇到的關(guān)于一些自定義排序規(guī)則的題目。可以結(jié)合實際場景做下應(yīng)用。
注：以下只給出大概代碼樣例，水平有限，不保證完全正確。
（1）：華為通用軟件暑期實習(xí)筆試4.13場次算法題第一題
題干：硬件資源分配（不花點時間，題干都理不順.....）
有M臺服務(wù)器，每臺服務(wù)器有以下屬性：編號、CPU核數(shù)（1100）、內(nèi)存、CPU架構(gòu)（08）、是否支持NP加速的標(biāo)識（0,1）。然后有一個資源分配要求，要求分配N臺滿足要求的服務(wù)器。具體如下：CPU核數(shù)>=cpuCount、內(nèi)存>=memSize、CPU架構(gòu)=cpuArch、是否支持NP加速=supportNP。其中，cpuCount、memSize、cpuArch、supportNP為這個要求輸入的分配參數(shù)。
分配時會指定優(yōu)先級策略，策略如下：
策略1：CPU優(yōu)先，優(yōu)先選擇CPU核數(shù)滿足分配要求并且最接近分配要求的cpuCount。如果CPU核數(shù)相同，在按內(nèi)存滿足要求并選擇最接近memSize的服務(wù)器分配。
策略2：內(nèi)存優(yōu)先，優(yōu)先選擇內(nèi)存滿足分配要求并且最接近分配要求的memSize。如果內(nèi)存相同，在按cpu核數(shù)滿足要求并選擇最接近cpuCount的服務(wù)器分配
如果兩臺服務(wù)器屬性都相同，則按服務(wù)器編號從小到大選擇（編號不會重復(fù)）
輸入：
第一行：服務(wù)器數(shù)量M
接下來M行為M臺服務(wù)器屬性的數(shù)組
下一行為分配要求：最大分配數(shù)量N，分配策略strategy，cupCount，memSize，cpuArch，supportNP
其中：
1<=M<=1000
1<=N<=1000
strategy：1表示策略1,2表示策略2
1<=cpuCount<=100
10<=memSize<=1000
0<=cpuArch<=8，另外，cpuArch使用9表示所有服務(wù)器架構(gòu)都滿足分配要求
0<=supportNP<=1，另外，為2時表示無論是否支持NP加速都滿足分配要求
輸出
先輸出實際分配數(shù)量，后按照分配的服務(wù)器編號從小到大依次輸出，以空格分開
樣例1
輸入
4
0,2,200,0,1
1,3,400,0,1
2,3,400,1,0
3,3,300,0,1
3 1 3 200 0 1
輸出
2 1 3
解釋：只有1和3滿足要求，要求分配2臺服務(wù)器，所以結(jié)果為2 1 3
樣例2
輸入
6
0,2,200,0,1
1,4,330,2,1
2,3,400,3,1
3,3,310,1,1
4,3,320,8,1
5,3,330,0,1
3 2 3 300 9 2
（這里注意一下輸入的格式，最后一行是空格分開）
輸出
3 3 4 5
解釋：編號1~5都滿足分配要求，按策略2分配即內(nèi)存優(yōu)先，內(nèi)存>=300并且最接近300的服務(wù)器編號是3 4 1 5 2。
其中1和5內(nèi)存相同，然后會比較CPU，即CPU>=3且最接近的，所以5優(yōu)先于1.因此最后分配的三臺服務(wù)器是3 4 5。
輸出時先輸出數(shù)量3，再按編號排序輸出3 4 5
（2）思路自定義排序：
主要先對一些特殊情況考慮，并且不同的策略不同的排序規(guī)則，但是都類似。
inp = list(map(int, input().strip().split(" ")))
N, strategy, cpuCount, memSize, cpuArch, SupportNP = inp
# N, strategy, cpuCount, memSize, cpuArch, SupportNP = 2, 1, 3, 300, 9, 1
res = []
for item in ans:
if cpuArch != 9 and item[3] != cpuArch:
continue
if SupportNP != 2 and item[4] != SupportNP:
continue
res.append(item)
if strategy == 1:
res = list(filter(lambda item: item[1]>=cpuCount and item[2]>=memSize, res))
# res = list(filter(lambda item: item[2]>=memSize, res))
res.sort(key=lambda x: (x[1], x[2]))
if len(res) <= N and len(res) > 0:
tmp = [len(res)] + sorted([item[0] for item in res])
print(" ".join([str(i) for i in tmp]))
elif len(res) > N:
tmp = [N] + sorted([res[i][0] for i in range(N)])
print(" ".join([str(i) for i in tmp]))
else:
print(0)
elif strategy == 2:
res = list(filter(lambda item: item[2]>=memSize and item[1]>=cpuCount, res))
# res = list(filter(lambda item: item[1]>=cpuCount, res))
res.sort(key=lambda x: (x[2], x[1]))
if len(res) <= N and len(res) > 0:
tmp = [len(res)] + sorted([item[0] for item in res])
print(" ".join([str(i) for i in tmp]))
elif len(res) > N:
tmp = [N] + sorted([res[i][0] for i in range(N)])
print(" ".join([str(i) for i in tmp]))
else:
print(0)
（1）、華為通用軟件暑期實習(xí)業(yè)務(wù)一面算法題
Leetcode最大數(shù)：鏈接https://leetcode-cn.com/problems/largest-number/
題干：
給定一組非負(fù)整數(shù) nums，重新排列每個數(shù)的順序（每個數(shù)不可拆分）使之組成一個最大的整數(shù)。
示例：
輸入：nums = [3,30,34,5,9]
輸出："9534330"
（2）、三種思路
version1：
由于沒有看到nums數(shù)組的容量范圍，第一反應(yīng)直接全排列，然后對每一種結(jié)果作比較。
from itertools import permutations
nums = [3, 30, 34, 5, 9]
res = set(permutations(nums)) # 全排列結(jié)果去重
res = [int("".join(list(map(str, item)))) for item in res] # 結(jié)果拼接再類型轉(zhuǎn)換
print(max(res)) # 取最大值 輸出 9534330
但是nums這么大范圍，使用全排列做得無用功太多了，時間和空間復(fù)雜度都不滿足。
version2：
維持一個單調(diào)隊列，隊列中的元素拼接之后保證最大，逐個遍歷當(dāng)前元素，再往隊列逐個位置嘗試插入，并最終找到插入位置保持隊列的規(guī)則。
class Solution:
def largestNumber(self, nums: List[int]) -> str:
queue = []
# 逐個遍歷列表元素
for i in range(len(nums)):
# 隊列為空，直接入隊
if len(queue) == 0:
queue.append(nums[i])
continue
# 假定當(dāng)前nums[i]放在隊尾，拼接后的值為mx
mx_ind = -1
mx = int("".join(list(map(str, queue + [nums[i]]))))
# 逐個插入隊列中，作比較，誰大
for j in range(len(queue)):
tmp = int("".join(list(map(str, queue[:j] + [nums[i]] + queue[j:]))))
if tmp > mx:
mx = tmp
mx_ind = j
# 找到插入位置
if mx_ind != -1:
queue = queue[:mx_ind] + [nums[i]] + queue[mx_ind:]
else:
queue = queue[:] + [nums[i]]
# 合并
st = "".join(list(map(str, queue)))
# 去除首部0
st = st.lstrip("0")
# 如果全為0，如nums=[0, 0]，則輸出0
if len(st) == 0:
return "0"
else:
return st
執(zhí)行結(jié)果：
version3：
nums中的元素的位置不是由單一的元素決定，而是根據(jù)兩個元素拼接之后的誰大決定的，如果"xy" > "yx"，那就[x, y]，否則[y, x]。因此可以使用自定義排序。
class Solution:
def largestNumber(self, nums: List[int]) -> str:
from functools import cmp_to_key
def func(a, b):
# 當(dāng)前兩元素長度相等，則按照大小排列
if len(str(a)) == len(str(b)):
return b - a
else:
# 長度不同，則根據(jù)拼接后的大小排序
return int(str(b)+str(a)) - int(str(a)+str(b))
nums = sorted(nums, key=cmp_to_key(func))
# 突然發(fā)現(xiàn)這樣寫更簡潔 ，不用額外定義func
# nums = sorted(nums, key=cmp_to_key(lambda x, y: int(str(y)+str(x)) - int(str(x)+str(y))))
s = "".join(list(map(str, nums)))
s = s.lstrip("0")
if len(s) != 0:
return s
else:
return "0"
執(zhí)行結(jié)果：
（1）、榮耀通用軟件暑期開發(fā)實習(xí)生筆試第二題
題目記不太清了，大概就是把日志文件中的一行一行記錄根據(jù)時間戳排序，記錄是字符串，不過整個記錄中包含其他的一些無用字符串，因此要自己過濾出有用的時間戳。
實例輸入：
5
my/2019-01-01T09:00:01
my/2019-01-01T09:00:01
abc/2018-12-24T08:00:00/test/you
1/2018-12-24T08:00:00/test/Test1
123/2018-12-24T08:00:09/test/me
說明：5表示5行記錄
輸出：
1/2018-12-24T08:00:00/test/Test1
abc/2018-12-24T08:00:00/test/you
123/2018-12-24T08:00:09/test/me
my/2019-01-01T09:00:01
說明：優(yōu)先根據(jù)時間戳信息排序，時間戳滿足一定的格式XXXX-XX-XXTXX:XX:XX，T為分隔符，分割日期和時間，前半部分為日期，后半部分為時間，時間戳相同根據(jù)字符串長度排序，如果長度也相同，則按照首字母的ascii碼表比較從小到大排序，如果兩個記錄字符串完全相同，則輸出一條即可。
（2）、思路
主要還是自定義排序規(guī)則，不過對于所有記錄都要做下處理判斷是否滿足時間戳規(guī)則，以及去重
代碼如下
from functools import cmp_to_key
# 判斷記錄字符串是否符合時間戳格式
def is_time_format(s):
if len(s) != 19:
return False
if s[4] != "-" or s[7] != "-" or s[10] != "T" or s[13] != ":" or s[16] != ":":
return False
return True
# 自定義排序規(guī)則
def func(a, b):
if a[0] != b[0]:
if a[0] > b[0]:
return 1
else:
return -1
else:
if len(a[1]) != len(b[1]):
return len(a[1]) - len(b[1])
else:
return ord(a[1][0]) - ord(b[1][0])
# 處理輸入
size = int(input().strip())
time_str = []
for _ in range(size):
# 并將記錄分割成列表暫存起來
tmp = input().strip().split("/")
time_str.append(tmp)
# 保存滿足時間戳的記錄
res = []
for i in range(len(time_str)):
for j in range(len(time_str[i])):
if is_time_format(time_str[i][j]):
res.append([time_str[i][j], "/".join(time_str[i])])
break
res = sorted(res, key=cmp_to_key(func)) # 自定義排序
# 重塑結(jié)果
ans = []
for i in range(len(res)):
if res[i][1] not in ans:
ans.append(res[i][1])
# 處理輸出
print("\n".join(ans))文章來自https://www.cnblogs.com/welan/p/16243852.html
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
