① 如何將照片做成圖片，像這種效果的。
照片名稱：PS中照片轉手繪效果，
1.打開原文件，根據自己的感覺通過色彩調整將片子調整，然後磨皮，磨皮值不要太大，（Neat image插件）
2.新建圖層，顏色為FEE7D6，（根據片子人物的膚色來設置），圖層模式為疊加25%，用畫筆20%在臉部和脖子處皮膚輕塗，
3.五官的細化工作，摳出嘴部，進行羽化復制（Ctrl+J），用塗抹工具對唇部進行塗抹，使唇部皮膚變得柔和細膩（強度不要太大）
4.新建圖層，給唇部和臉部上色，顏色為FDC1D6，圖層模式為顏色，用畫筆在唇部和臉側進行塗抹，
5.用減淡工具，范圍是高光，曝光度25%畫出唇部的高光部分，用加深工具，范圍是中間，曝光度20%，加強唇部對比，
6.新建圖層，顏色為8E1A25，畫筆像素為3，畫出內側內線，然後像素為2畫出唇部外側線條，（高光部分線條建蒙板減淡些）
7.對鼻子進行圈選羽化，復制，用塗抹工具對鼻子周圍進行柔和細化，接著用減淡工具范圍是高光，曝光度20%，加強下鼻子的高光部分，然後用顏色422B2D，筆刷為2像素畫出鼻子的輪廓線（線條如果淡了用加深工具來彌補下）
8.對眼睛眉毛圈選羽化復制，用塗抹工具對眼睛眉毛周圍皮膚進行柔和細化，接著用減淡工具范圍是高光，曝光度15%，加強下眼眶的高光部分，用加深工具范圍是中間，加深眼睛周邊的線條，
9.用塗抹工具對眼珠部分進行塗抹細化，看起來更柔和些，用加深工具對黑眼珠部分加深，用減淡工具范圍是高光，曝光度20%加強眼珠的高光部分，使看起來眼睛更明亮，
10.顏色080101，畫筆像素3，畫出睫毛部分，（線條顏色深淺可用加深減淡工具來彌補）睫毛線條也可以用路徑等一些方法勾出，
11.用塗抹工具把眉形塗抹的漂亮些，眉頭粗點顏色稍深一點，後面順著塗抹淡化下去，然後用畫筆2個像素在眉前端畫出眉毛線條，使眉毛更有層次，
12.塗抹工具選擇適合頭發的畫筆，（根據頭發的紋理設置畫筆形狀），塗抹過程中要順著頭發的紋理塗抹，不要太過力，塗抹的要均勻，
13.發梢部分用正常的畫筆塗抹來銜接上，（塗抹頭發一定要細心）
14.畫出頭發的質感來，新建圖層，圖層模式為疊加，選擇鉛筆像素為1，（數值根據人物圖片大小來定），顏色為DFDFDF順著頭發的紋理畫出流暢的線條
15.馬尾部分可選擇畫筆工具，帶分叉的一些筆刷淡淡順著紋理畫上，顏色圖層模式同上，
16.新建圖層，正常模式，選擇畫筆工具，像素為1，不透明度60%，流量80%，顏色為白色，畫出前額動感發絲，
17.衣服和項鏈部分用塗抹工具塗抹的柔和些，然後選擇用減淡工具，范圍是高光，曝光20%，加強衣服和項鏈的高光部分
18.合成，對圖片整體進行銳化，銳化值為8，用減淡工具對高光部分進行稍微加工下，整體顏色校正下，（可以添加一些背景燈修飾，突出主題
② 如何理解 Web 語義化
前端簡介Web前端開發工程師是一個很新的職業，在國內乃至國際上真正開始受到重視的時間不超過5年。Web前端開發是從網頁製作演變而來的，名稱上有很明顯的時代特徵。隨著人們對用戶體驗的要求越來越高，前端開發的技術難度越來越大，Web前端開發工程師這一職業終於從設計和製作不分的局面中獨立出來。早期的前端其實就是Table布局，後來發展到所謂的Div+CSS網站重構，再到現在的讓人眼花繚亂的各種各樣的新技術，Web前端技術發展是非常快速的，因此選擇了前端這個行業就意味著不停的學習吧。讓我們先看看張克軍繪制的前端知識體系結構：前端開發的核心是HTML+CSS+JavaScript。本質上它們構成一個MVC框架，即HTML作為信息模型（Model），CSS控制樣式（View），JavaScript負責調度數據和實現某種展現邏輯（Controller）。HTML1.標簽的分類1.標簽表示一個元素2.按性質劃分:Block-Level和Inline-Level3.按語義劃分:Headings:h1,h2,h3,h4,h5,h6Paragraphs:pTextFormatting:em,strong,sub,del,ins,smallLists:ul,li,ol,dl,dt,ddTables:table,thead,tbody,tr,th,tdFormsandInput:form,input,select,textareaOthers:div,span,a,img,HTML5:header,footer,article,section2.XHTMLXHTML於2000年的1月26日成為W3C標准。W3C將XHTML定義為最新的HTML版本。XHTML將逐漸取代HTML。XHTML是通過把HTML和XML各自的長處加以結合形成的。XHTML語法規則如下：屬性名和標簽名稱必須小寫屬性值必須加引號屬性不能簡寫用Id屬性代替name屬性XHTML元素必須被正確地嵌套XHTML元素必須被關閉3.標簽的語義化為表達語義而標記文檔，而不是為了樣式，結構良好的文檔可以向瀏覽器傳達盡可能多的語義，不論是瀏覽器位於掌上電腦還是時髦的桌面圖形瀏覽器。結構良好的文檔都能向用戶傳達可視化的語義，即使是在老的瀏覽器，或是在被用戶關閉了CSS的現代瀏覽器中。同時結構良好的HTML代碼也有助於搜索引擎索引你的網站。不要使用table布局，table是用來表格顯示的。不要到處濫用div標簽，div是用來分塊用的。不要使用樣式標簽，如font,center,big,small,b,i，樣式可以用CSS來控制，b和i可以用strong和em來代替。不要使用換行標簽和空格來控制樣式，請用CSS。盡量不要使用內聯CSSCSS1.CSS基礎知識層疊和繼承優先順序盒模型定位浮動2.CSS進階CSSSprite瀏覽器兼容性IEHasLayout和性能優化LESSandSASSCSSSpriteCSSSprite主要用於前端性能優化的一種技術，原理是通過將多張背景圖片合成在一張圖片上從而減少HTTP請求，加快載入速度。瀏覽器兼容性絕大部分情況下我們需要考慮瀏覽器的兼容性，目前正在使用的瀏覽器版本非常多，IE6,IE7,IE8,IE9,IE10,Chrome,Firefox,Safari。IEHasLayout和BlockFormatContentIEHasLayout是一個InternetExplorerforWindows的私有概念，它決定了一個元素如何顯示以及約束其包含的內容、如何與其他元素交互和建立聯系、如何響應和傳遞應用程序事件、用戶事件等。這種渲染特性可以通過某些CSS屬性被不可逆轉地觸發。而有些HTML元素則默認就具有」layout」。目前只有IE6和IE7有這個概率。BFC是W3CCSS2.1規范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。這個其實和瀏覽器的兼容性有關，因為絕大部分的兼容性問題都是它們引起的。參考：CSSBFC和IEHaslayout介紹CSSFrameworkCSS框架是一系列CSS文件的集合體，包含了基本的元素重置，頁面排版、網格布局、表單樣式、通用規則等代碼塊,用於簡化web前端開發的工作，提高工作效率。目前常見框架有：還是一個比較出名和特殊的框架是Twitter的Bootstrap。Bootstrap是快速開發Web應用程序的前端工具包。它是一個CSS和HTML的集合，它使用了最新的瀏覽器技術，給你的Web開發提供了時尚的版式，表單，buttons，表格，網格系統等等。它是基於Less開發的。不支持IE6，在IE7和IE8里效果也不咋地。CSS3雖然CSS3還沒有正式成為標准，但是包括IE9+,chrome,Firefox等現代瀏覽器都支持CSS3。CSS提供了好多以前需要用JavaScript和切圖才能搞定的功能，目前主要功能有：圓角多背景@font-face動畫與漸變漸變色Box陰影RGBa-加入透明色文字陰影CSS性能優化CSS代碼是控制頁面顯示樣式與效果的最直接「工具」，但是在性能調優時他們通常被Web開發工程師所忽略，而事實上不規范的CSS會對頁面渲染的效率有嚴重影響，尤其是對於結構復雜的Web2.0頁面，這種影響更是不可磨滅。所以，寫出規范的、高性能的CSS代碼會極大的提高應用程序的效率。參考CSS性能優化探討LESS和SASSLESS和SASS都是CSS預處理器，用來為CSS增加一些編程的的特性，無需考慮瀏覽器的兼容性問題，例如你可以在CSS中使用變數、簡單的程序邏輯、函數等等在編程語言中的一些基本技巧，可以讓你的CSS更見簡潔，適應性更強，代碼更直觀等諸多好處。SASS基於Ruby開發。LESS既可以在客戶端運行，也可以藉助Node.js或者Rhino在服務端運行。
③ 關於網站前端(美工)的問題,psd到html的過程
html css 網頁中最根本的，少不了就js 、jQuery什麼的
現在最新的技術就是html5 css3 ,支持的瀏覽器也越來越多了
至於下面說的切圖什麼的是不支持用，不靈活 榮譽的東西太多，
現在的職位是 設計 美工 前端 後端 分的再細會把js分出來 ；
設計就是出整體的設計方案，美工根據方案出設計圖，前端根據美工出的設計圖 用html css js 來轉化成靜態頁面，後台來實現動態化
不過現在很多公司都是將設計 美工和前端拼合成一個職位 為了節省成本吧 ，也就是要求你需要會 設計，ps ，html、css，js ，也有將js分給後端來實現的。
至於你說的psd到html的過程 就是拿到設計圖寫頁面，自己搭個頁面框架，經常都會用的一些樣式提出來，這樣每一個項目都可以用，一個一個div寫呀，你說的會一些基礎就夠了，很多不會的度娘就行，知道怎麼去實現某個東西就可以，至於js 其實i也是一個很深的東西，技巧，在於積累，比較快的方法沒有就是多寫，遇到問題查，最好是能有一個人給你講從拿到一張圖開始，一步步的講一遍，基本兩三張圖完了你也就差不多了
寫頁面的時候不要什麼都卸載html中 css是css js是js
其實設計蠻重要，實現頁面會了就覺得很簡單，像最近會有用到less css 有點偏程序化的語言，層次比較清楚，最後在生成以下，還有字體圖標，不用圖片 只要字體就可以生成圖標直接用，不會在程序里佔用太大的空間
④ CSS面試須知，哪些需要掌握得CSS技巧
主要都圍繞知識點的理解與css兼容性問題上，請參考下面的
2.1 link和@import都可以為頁面引入CSS文件，其區別是？
將樣式定義在單獨的.css的文件里，link和@import都可以在html頁面引入css文件。有link和@import兩種方式，導入方式如下：
link方式：<link rel=」stylesheet」 type=」text/css」 href=」aa.css」>
@import方式：<style type=」text/css」>@import 「aa.css」;</style>
link和@import兩種導入css文件的區別：
祖先的差別。Link屬於XHTML標簽，而@import完全是CSS提供的一種方式。Link標簽除了可以載入CSS外，還可以做很多其他的事情，比如定義RCC，定義rel連接屬性等；@import就只能載入css了。
載入順序的差別。當一個頁面被載入的時候，link引用的CSS會同時被載入，而@import引用的CSS會等到頁面全部被下載完再被載入。所以有時候瀏覽@import載入CSS的頁面時開始會沒有樣式（就是閃爍），網速慢時更為明顯。
兼容性的差別。由於@import是CSS2.1提出的所有老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題。
使用DOM控制樣式時的差別。當使用JavaScript控制DOM去改變樣式的時候，只能使用link標簽，因為@import不是DOM可以控制的。
@Import可以在css中再次引入其他樣式表，比如可以創建一個主樣式表，在主樣式表中再引入其他的樣式表。
2.2 如何理解CSS樣式表的層疊性？
CSS使用層疊的原則來考慮繼承、層疊次序和優先順序等重要特徵，從而判斷相互沖突的規則中哪個規則應該起作用。
繼承性是指，許多CSS的樣式規則不但影響選擇器所定義的元素，而且會被這些元素的後代繼承。
層疊性是指，當一個web頁面使用多個樣式表，多個樣式表中的樣式可層疊為一個。在多個樣式表之間所定義的樣式沒有沖突的時候，瀏覽器會顯示所有的樣式。
優先順序是指，當發生樣式定義沖突時，瀏覽器首先會按照不同樣式規則的優先順序來應用樣式。CSS樣式的優先順序如下所示（其中數字3擁有最高的優先權）：
1.瀏覽器預設設置；
2.外部樣式表（.css文件）或者內部樣式表（位於<head>元素內部）；
3.內聯樣式（作為某個元素的style屬性的值）。
同等優先順序下，以最後定義的樣式為准，important比內聯高。
2.3 哪些屬性可以繼承？
Css中可以繼承的屬性如下：
文本相關屬性：font-family、font-size、font-style、font-variant、font-weight、font 、letter-spacing、line-height、text-align、 text-indent、 text-transform 、word-spacing 、color；
列表相關屬性：list-style-image、list-style-position、list-style-type、list-style；
表格相關屬性：border-collapse、border-spacing、caption-side、table-layoute；
其他屬性：Cursor、visibility；
2.4 CSS選擇器中，元素選擇器和類選擇器的區別是什麼？
元素選擇器是常見的CSS選擇器，即文檔的元素就是最基本的選擇器。選擇器通常是某個HTML元素，比如<p>、<h1>、<em>、<a>等，甚至可以是<html>元素本身。
類選擇器用於將樣式規則與附帶class屬性的元素匹配，其中該class屬性的值為類選擇器中指定的值。使用類選擇器時，首先要定義樣式類，其語法為：
.className{ }；
所有能夠附帶class屬性的元素都可以使用此樣式聲明。只需要將class屬性的值設置為」className」，則可以將類選擇器的樣式與元素關聯。
在實際使用時，如果需要為某種元素定義樣式，則往往使用元素選擇器；如果要應用樣式而不考慮具體設計的元素，最常用的方法就是使用類選擇器。
2.5 簡要描述CSS中的定位機制
CSS中，除了默認的流定位方式以外，還有如下幾種定位機制：浮動定位、相對定位、絕對定位和固定定位。
浮動定位是將元素排除在普通流之外，並且將它放置在包含框的左邊或者右邊，但是依舊位於包含框之內。
相對定位將元素相對於它在普通流中的位置進行定位。
絕對定位是指將元素的內容從普通流中完全移除，並且可以使用偏移屬性來固定該元素的位置。
固定定位是指將元素的內容固定在頁面的某個位置。
2.6 display屬性和 visibility屬性的區別？
可以使用display屬性定義建立布局是元素生成的顯示框類型。
1.如果將display屬性設置為block，可以讓行內元素表現得像塊級元素一樣；
2.如果將display屬性設置為inline，可以讓塊級元素表現得像內聯元素一樣；
3.可以通過把display屬性設置為none，讓生成的元素根本沒有框。這樣的話，該框及其所有內容就不在顯示，不佔用文檔中的空間。
在DIV設計中，室友display:none屬性後，HTML元素（對象）的寬度。高度等各種
屬性都將」丟失」；而使用visibility:hidden屬性後，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所佔據的空間位置仍然存在，也即是說它仍具有高度、寬度等屬性值。
2.7 簡述對CSS的盒子模型的理解？
CSS盒子模型也叫做框模型，具備內容（content）、填充（padding）、邊框（border）、邊距（margin）這些屬性。在CSS中，每個元素都被視為一個框，而每個框都有三個屬性：
border：元素的邊框（可能不可見），用於將框的邊緣與其他框分開；
margin：外邊距，表示框的邊緣與相鄰框之間的距離，也稱為頁邊空白；
padding：內邊距，表示框內容和邊框之間的空間。
盒子模型的結構如圖所示：
由上圖可以看出，width和height指的是內容區域的寬度和高度。增加內邊距、外邊距和邊框不會影響到內容區域的尺寸，但會增加元素框的總尺寸。
因此，如果在一個具有邊框的元素中放置文本，往往需要設置一些內邊距，以便文本的邊緣不要接觸邊框，這樣更便於閱讀。而外邊距則可以在多個元素框之間創建空白，避免這些框都擠在一起。因此，在設計頁面時，經常會使用padding屬性和margin屬性來設置頁面的布局。但是，必須注意的是，一旦用了padding屬性或者margin屬性設置了元素的邊距以後，會增加元素在頁面布局中所佔的面積。
2.8 簡述CSS3中的偽類選擇器？
CSS3提供了大量偽類選擇器，瀏覽器對於有些偽類選擇器的支持還不太好。目前，常用的偽類選擇器有：
目標偽類：即 :target，突出顯示活動的HTML錨，用於選取當前活動的目標元素；
元素狀態偽類：比如 :enabled、:disabled、:checked；
結構偽類： 比如 :first-child、:last-child、:empty、:only-child；
否定偽類：即 :not(selector)，匹配非指定元素/選擇器的每個元素。
2.9 為什麼建議設置背景圖像的同時還設置背景顏色？
一般建議在使用背景圖片的同時提供background-color屬性，並且將其設置為和圖像主要顏色類似的顏色。這樣，如果正在載入頁面，或者因為各種原因無法顯示背景圖像時，頁面可以使用這種顏色作為背景色。
2.10 如何居中div？如何居中一個浮動元素？
給div設置一個寬度，然後設置元素的左右外邊距為auto，比如，margin:0 auto。則可以實現div居中顯示。
對於浮動元素，設置其左右外邊距為關鍵字auto是無效的。此時，如果需要設置其居中顯示，可以：1.精確計算其左外邊距並進行設置，實現居中顯示。
2.使用一個居中顯示的div元素包含次浮動元素,
代碼如：<div style=」margin:0 auto;」><div style=」float:left;」></div></div>
2.11 在設置文本的字體時，為什麼建議設置替換字體？
可以使用font-family屬性來指定文本的字體，代碼如下所示：font-family:name/inherit;
此時，name為首選字體的名稱。如果字體名稱有多個單詞，即中間有空格，則需要將字體名稱用一對單引號或者雙引號包圍起來。
但是，如果用戶機器上並沒有安裝name所指定的字體，則會顯示默認字體。因此，如果可以指定一種替代字體，替代字體可以和指定字體不完全相同，相似且不會影響頁面的布局，就可以解決問題了。
我們可以為font-family屬性指定多種字體，且多種字體之間用逗號隔開，這樣可以為頁面指定一個字體列表。如果用戶機器沒有第一種字體，則瀏覽器會查找字體列表中的下一種字體替代默認字體顯示。如果找遍了字體列表還是沒有可以使用的字體，瀏覽器才會使用默認字體顯示頁面。代碼如下所示：
h1{font-family:Georgia,serif;}
此時，如果用戶機器上沒有安裝Georgia，但安裝了Times字體（serif字體系列中的一種字體），瀏覽器就可能對<h1>元素使用Times。盡管Times與Georgia並不完全匹配，但至少足夠接近。
因此，我們建議在所有font-family規則中都提供一個通用字體系列。這樣就提供了一條後路，在用戶機器無法提供與規則匹配的特定字體時，就可以選擇一個通用字體作為替換。
2.12 內聯元素可以實現浮動嗎？
在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。因此，對於內聯元素，如果設置為浮動，會產生和塊級框相同的效果。
2.13 什麼情況下需要額外設置表格的顯示規則？
默認情況下（不額外設置表格的顯示規則時），表格按照自動表格布局進行顯示，即瀏覽器在顯示表之前查看每一個單元格，然後基於所有格的設置計算表單大小，而列的寬度是由列段元個中沒有折行的最寬的內容設定的。此時，單元格的大小會適應內容的大小。
自動表格布局的演算法在表格復雜時會比較慢，這是由於它需要在確定最終的布局之前訪問表格中多有的內容。在不能提前確定每一列的大小時，這種方式會非常適用。
如果額外設置表格的顯示規則，即設置table-layout屬性的值為fixed，則稱為固定表格布局。在固定表格布局中，水平布局僅取決於表格寬度，列寬度，表格邊框寬度，單元格間距，而與單元格的內容無關。瀏覽器將使用某列指定的寬度來計算布局，並使用該寬度計算該列中所有其他單元格的寬度。
固定表格布局與自動表格布局相比，允許瀏覽器更快地對表格進行布局。因為如果指定使用固定表格布局，瀏覽器在接收到第一行後就可以顯示表格。如果表格龐大且已經指定了大小，則會加速表的顯示。
2.14 簡要描述CSS中content屬性的作用
content屬性與:before及:after偽元素配合使用，來插入生成內容，可以在元素之前或之後放置生成的內容。可以插入文本、圖像、引號，並可以結合計數器為頁面元素插入編號。比如，查看如下代碼：
body {counter-reset:chapter;}
h1:before { content:」第」counter(chapter)」章」;}
h1 { counter-increment:chapter;}
使用content屬性，並結合:before選擇器和計數器counter，可以在每個<h1>元素前插入新的內容。
2.15 CSS Sprite是什麼，談談這個技術的優缺點
CSS Sprite是一種網頁圖片應用處理方式，就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的」background-image」，」background-repeat」，」background-position」的組合進行背景定位。
其優點在於：①減少網頁的http請求，提高性能，這也是CSS Sprite最大的優點，
也是其被廣泛傳播和應用的主要原因；
②減少圖片的位元組，多張圖片合並成1張圖片的位元組小於多張圖片的位元組總和；
③較少了命名困擾，只需對一張集合的圖片命名，不需要對每一個小元素進行命名提高製作效率；
④更換風格方便。只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變，維護起來更加方便；
但是CSS Sprite也存在一些不可忽視的缺點：
①圖片合成比較麻煩；
②背景設置時，需要得到每一個背景單元的精確位置；
③維護合成圖片時，最好只是向下加圖片，而不是更改已有圖片。
2.16 對CSS3有了解嗎？列舉幾個CSS3的新特性並簡要描述
CSS3作為CSS技術的升級版本，著力於模塊化發展，將規范分解為一些小的模塊，如選擇器、盒子模型、列表模塊、背景和邊框等；並加入了很多新的模塊和屬性，比如賦值選擇器、文字陰影、邊框圓角、邊框陰影、漸變、過渡、多欄布局、2D/3D轉換、動畫等。
其中，CSS3提供了一些復雜選擇器，用於實現頁面復雜情況下的元素選擇，如屬性選擇器，一些偽類和偽元素選擇器；漸變用於為元素設置漸變效果的背景；轉換可以實現元素的變換，比如位移、縮放、旋轉等；過渡可以實現簡單的動畫效果；動畫屬性則可以實現復雜的動畫，可以實現逐幀製作動畫。
2.17 過渡與動畫的區別是什麼？
過渡屬性transition可以在一定的事件內實現元素的狀態過渡為最終狀態，用於模擬一種過渡動畫效果，但是功能有限，只能用於製作簡單的動畫效果；
動畫屬性animation可以製作類似Flash動畫，通過關鍵幀控制動畫的每一步，控制更為精確，從而可以製作更為復雜的動畫。
2.18 什麼是CSS reset？
CSS reset，又叫做CSS重寫或者CSS重置，用於改寫HTML標簽的默認樣式。
有些HTML標簽在瀏覽器里有默認的樣式，例如p標簽有上下邊距，li標簽有列表標識符號等。這些默認樣式在不同瀏覽器之間也會有差別，例如ul默認帶有縮進的樣式，在IE下，它的縮進是通過margin實現的，而Firefox下，它的縮進是由padding實現的。著必然會帶來瀏覽器兼容問題。
因此，在CSS代碼中，可以使用CSS代碼去掉這些默認樣式，即重新定義標簽樣式，從而覆蓋瀏覽器的CSS默認屬性，即CSS reset。
需要注意的是，在進行樣式重寫時，不建議使用 * 選擇器進行重寫，這樣會降低效率，影響性能。
2.19 如何清除浮動元素所帶來的影響？
浮動定位是指將元素排除在普通流之外，並且將它放置在包含框的左邊或者右邊，但是依舊位於包含框之內。也就是說，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文檔的普通流中，所以元素浮動之後，其原有位置不再保留，其他元素的位置會受到影響。
如果需要清除左側或者右側浮動元素帶來的影響，則可以使用clear屬性來設置。另外，包含框呃逆的子元素浮動後，如果包含框沒有設置具體的高度，則其高度會發生變化，此時，可以使用overflow屬性來清除子元素浮動後帶來的影響。
2.20 談談你對瀏覽器兼容性問題的理解
瀏覽器的類型及版本的不同會造成CSS效果不盡相同，因此需要實現瀏覽器兼容，也可以針對不同的瀏覽器編寫不同的CSS。
目前，各主流瀏覽器的新版本，對應W3C的標准支持很好，因此，首先保證代碼符合W3C的標准，這是解決瀏覽器兼容問題的前提。
其次，對於某些支持受限的屬性，針對不同的瀏覽器添加相應的前綴，比如-webkit-、-o-、-moz-。
第三，對於IE的低版本，可以編寫帶有特定前綴的代碼，實現版本識別。比如：
.bb{
background-color:#f1ee18;/*所有識別*/
.background-color:#f1ee18\9;/*IE6 7 8識別*/
+background-color:#f1ee18;/*IE6 7識別*/
_background-color:#f1ee18;/*IE6識別*/
}
另外，對於特定的兼容性問題，特殊解決。常見的特殊問題有：
1.使用CSS reset：對於有些HTML標簽，瀏覽器默認的margin和padding不同，可以使用CSS代碼改寫默認的樣式效果，從而實現統一
2.IE低版本中，不能使用auto關鍵字實現塊級元素居中顯示，可以改用設置父元素的text-align；
3.子元素設置上外邊距時，父元素需要設置邊框或者外邊距；
4.外邊距合並問題。
⑤ 如何成為前端開發高手
web前端開發是個非常新的職業，對一些規范和最佳實踐的研究都處於探索階段。總有新的靈感和技術不時閃現出來，新的技術也給網頁增加了許多新的活力；瀏覽器大戰也越來越白熱化，跨瀏覽器兼容方案依然是五花八門。為了滿足「高可維護性」的需要，我們需要更深入，更系統地去掌握前端知識，選擇一家專業的Web前端培訓機構對發展很重要。
在國內大學課程裡面，幾乎沒有前端開發這門課程，無非就是一些網頁設計之類的課程，但那些課程無論是老師講還是學生聽，都是敷衍了事，這個我深有體會，我相信大家一定也有同感！所以，目前前端開發主要是通過自學，和參加正規的培訓！對於培訓來說，一般會分為初級、中級、高級等級別，因為憑我們自己很難掌握這些技能。但是自學是很困難的，畢竟是一個人自己摸索，網上看上去有很多視頻可以學習，但是那些視頻很多都是過時的，像js和h5這些想要自學根本學不會，更何況以後深入學習還要掌握框架構造！很多小夥伴就根本找不到學習的方向，最後白白浪費了自己的時間和精力！
那麼我們應該怎麼學習前端開發這門技術呢 ？ 現在很多小夥伴喜歡在互聯網上找視頻資料學習網頁製作，但是光看視頻你是不可能學會網頁製作的，沒有人指導你，而且很多視頻已經過時了 ，並沒有什麼用! 如果你真的想學習網頁製作這門技術，你可以來這個裙，前面是49四，中間是0六思，最後是9三思！ 在這里有最新的HTML課程 免費學習 也有很多人指導你進步，不需要你付出什麼，只要你是真心想學習的，隨便看看的就不要加了，加了也是浪費大家的時間 。
Web前端開發在產品開發環節中的作用變得越來越重要，而且需要專業的前端工程師才能做好。Web前端開發是一項很特殊的工作，涵蓋的知識面非常廣，既有具體的技術，又有抽象的理念。簡單地說，它的主要職能就是把網站的界面更好地呈現給用戶。聽起來比較復雜，但前端開發的門檻其實非常的低，與伺服器端語言先慢後快的學習曲線相比，前端開發的學習曲線是先快後慢。
所以，對於從事IT工作的人來說，前端開發是個不錯的初入點。也正因為如此，前端開發的領域有很多自學成「才」的同行，但大多數人都停留在會用的階段，因為後面的學習曲線越來越陡峭，每前進一步都很難。更系統的學習，做專業的人才更利於職業發展。當然學習的目的是為了就業，我們來看一下，web前端開發工程師前景如何？
行業發展好
從我們身邊的方方面面考慮，互聯網行業無疑是現在發展前景最好的行業之一。潭州教育致力於改變中國IT實踐教學模式，引領中國IT教學技術標准與人才培養標准。讓想學習的人隨時隨地都可以進行學習！
人才需求大
互聯網對人們的影響越來越大，各類職業也需求更多，前端的人才需求比以前也有了質的飛躍。我們希望從業者：「我們不是為了學技術而去學技術，我們學技術是為了能更好去做產品」。最後引用喬布斯的話，Web就是未來，我們作為前端開發工作者也是未來。相信Web前端開發的明天會更好。
就業薪資高
web前端開發工程師做為互聯網行業緊缺的職位之一，人才缺口巨大，每天還在不斷的更新。人才少，薪資自然也是很吸引人的，據某網站77939樣本統計從業人員平均月薪9690元，而且跟據經驗的增加，薪資也是在不斷的攀高的。渥瑞達就業環節擁有專業的就業團隊，對畢業學員全程指導，真正兌現萬元就業。
更容易進名企
專業的前端人才對口的大多數都是知名企業，像網路，淘寶，京東……都在急招，大企業對每個職業的專業化更加有要求，發展前景好。渥瑞達的Web前端培訓課程由眾多資深實戰老師精心設計，從實戰出發，教學質量更好，Web前端學習班課程針對企業用人標准設置，畢業前嚴格把關，更利於高薪就業。
年輕的時候，我們懶，我們三分鍾熱度;我們缺乏社會閱歷，我們沒車沒房。這都很正常。但，你的眼光比你現在掙的錢更重要。未來是互聯網的時代 你在做什麼並不重要，你即將做什麼才那是根本。網頁製作只要你想學， 敢學，有一天，那些現在比你位置高的人都會被你比下去。 命運在你手中！月薪過萬不是夢！
⑥ XD 怎麼配合前端切圖
切圖本應該是前端工程師的工作吧，設計師切的圖往往不專業，他們不知道把圖片壓縮，不知道把圖片合並，更不知道給圖片更好命名，這樣前端拿到切圖還是要重新處理。優秀的設計師會把圖層分類做的很好，圖層按照模塊化設計，很方便前端工程師來使用的。不會切圖的前端不是合格的前端。圖層亂七八糟的設計師也不是個合格的設計師
⑦ css scripte 中，如何計算某個背景的位置（求詳解）
background:url(pic.jpg) 10px 20px;
自己調整10px 和 20px 的值你就明白了
沒什麼復雜演算法，你那張有n個背景的圖，從圖的左上角開始是0坐標，你寫10px、20px就在水平和垂直方向上位移10px和20px開始顯示背景圖，你加大或減小這些值就跟著位移。你在ps裡面量下圖上每個你拿來顯示為背景的圖片的坐標就行了。
少用css scripte，看著時髦，最開始淘寶那個前端團隊從國外學回來的，他們自己也沒仔細研究過，說什麼能減少請求次數(淘寶這種大站還有點必要，你一小站，每天訪問量沒個100來萬，這個對你無意義，節約伺服器資源的方法多了，唯獨這個方法不實用)。
有高人對這個技術表示懷疑態度，人家拿訪問量高的大站做過n多很詳細的測試，包括伺服器端和前端的測試(數據我找不著了，某博客上看的)，得出的數據結果是把n個東西放一張圖上得不償失，但是這門技術一直還在誤導人。
⑧ 前端怎麼優化大數據頁面
來源:前端的性能優化都有哪些東西?作者:野次前端性能優化是個巨大的課題,如果要面面俱到的
⑨ 前端工程師都有用哪些比較靠譜的小工具
1. node.js + npm， 這個是前端工具的一個平台，沒有他們就沒有以下的工具，建立開發環境，下載開發工具，運行開發工具的利器
2. bower, 庫依賴管理器，類似於npm，但針對瀏覽器JavaScript的依賴管理，減少尋找庫，下載庫和升級庫的煩惱
3.grunt，流程自動化管理工具，將你非編程的開發步驟減到最小，grunt watch+liveReload或者grunt connect,可以使得免除你F5無盡地獄，發布和開發各種無壓力。以下大部分開發工具，都有grunt的相對應的插件，也就是說他們都能利用grunt進行自動化運行
5. 本人用less比較多，因為基本無縫兼容歷史遺留系統中的css，（而Sass語法比較特殊，還沒有專門用過，應該開發新系統的css比較好），一套css預編譯語言，可以把less語法轉成css語法，lessc是less語言編譯器，配合grunt less，編寫大型css文檔毫無壓力。
6.Phantomjs，沒有界面的瀏覽器，用js腳本控制其操作網頁。測試，抓圖，網頁流程自動化利器。配合casperjs的語法簡化功能真強庫後，控制Phantomjs就更加容易了
7. grunt PhotoBox, 利用phantomjs抓圖功能和ImageMagick圖片比較功能，在利用live-reload即時刷新功能，可以讓你開發css的時候，快速對n多個頁面進行觀察，看其前後變化。不過缺點也比較明顯，就是速度慢。但比起手動對比來看，還是非常快的。值得css開發時擁有。
8. phantomCSS，這個和grunt photobox類似，都用於css開發的，差別是photobox是全局觀察差別，而這個是單元組件觀察差別，它方便你就抓頁面中某一塊元素然後進行前後比較，更加註重細節上的差異，這個比較合適組件開發時候使用。
9. jshint，幫助你快速定位JavaScript的語法錯誤和潛在的跨瀏覽器兼容性問題。在部署你JS前，用jshint檢查一下是沒錯的 。
10.UglifyJS，壓縮JavaScript代碼，使你的JS代碼可以更加快速的載入。有grunt的插件
11. browserify允許你在瀏覽器裡面使用CMD標准模塊，但本人認為它的另外一個優勢是合並代碼，開發時候可以把代碼模塊化，分成很多很多小文件，然後有調理的放到相對應文件夾下，然後最後合成單一文件。本人曾經利用browserify開發greasemonkey代碼，大大簡化了greasemonkey的開發難度和增強了greasemonkey代碼的質量。browserify有grunt插件，這樣又減少的開發步驟。
12. Karma， google開發的一個單元測試運行器，這個自己本身不是一個單元測試框架，而是配合測試單元框架的一個工具。由於前端瀏覽器眾多，就算你有live-reload這樣自動化工具，但是還是要手動打開各種瀏覽器，手動把你的單元測試在各個瀏覽器都運行一遍。這個工具目的是目的就是讓電腦能自動化打開各種瀏覽器，然後把單元測試在各個瀏覽器中自動運行一遍，讓這個步驟也能自動化了。
13.clean-css (grunt cssmin)， 我用的是grunt cssmin，但是grunt cssmin實際上背後使用的是clean-css工具，這個工具就是用來壓縮精簡css的，讓css文件大小更小。
⑩ 前端工程師都有用哪些比較靠譜的小工具
1、TakeColor 取色器
對於前端開發來說，和顏色、圖片打交道是難免的，有的時候想要在ps外面獲取顏色.
2、CoolFormat 源代碼格式化工具
CoolFormat，不僅僅適用於前端，因為它支持很多語言源代碼的格式化，可以在上面的開始菜單中選擇你要格式化的語言種類，這里我選擇的是js，然後將一串很亂的js代碼粘貼到下面的文本框裡面，點擊快速格式化.
3、做筆記的小幫手——有道雲筆記
其實這有道雲筆記不算是小工具了，在這之前，我一直都是用txt記事本記東西的