1、常見的塊級元素  內聯元素 div -最常用的塊級元素      dl - 和dt-dd 搭配使用的塊級元素      form - 互動表單      h1 -h6- 大標題      hr - 水平分隔線      ol – 有序列表      p - 段落      ul - 無序列表      fieldset - 表單欄位集      colgroup-col - 表單列分組元素      table-tr-td  表格及行-單元格      pre - 格式化文字  a –超連結（錨點）      br - 換行      i - 斜體      em - 強調      img - 圖片      input - 輸入框      label - 表單標籤      span - 常用內聯容器，定義文字內區塊      strong - 粗體強調      sub - 下標      sup - 上標      textarea - 多行文字輸入框      u - 下劃線      select - 專案選擇 2、實現文字三個點的幾個條件 text-overflow屬性僅是：當文字溢位時是否顯示省略標記，並不具備其它的樣式屬性定義，要實現溢位時產生省略號的效果還需定義： 1、容器寬度：width：value；（px、%，都可以） 2、強制文字在一行內顯示:white-space：nowrap; 3、溢位內容為隱藏：overflow：hidden； 4、溢位文字顯示省略號：text-overflow：ellipsis; 注：必須是單行文字才能設定本文溢位！！！ IE6+；chrome1.0+；safari3.1+（firefox,opera暫不支援） 3、垂直居中的幾個條件 設定一個元素在一個容器中垂直居中，必須更改預設的display屬性值為inline-block; 並加上同級元素（標尺）（同級元素[標尺]樣式設定為vertical-align:middle;width:0;height:100%;display:inline-block;） 。 三個條件： 1：必須給容器（父元素）加上text-align:center; 2:必須給當前元素轉成行內塊元素（display:inline-block;）再給當前元素加上vertical-align:middle; 3：在當前元素的後面（沒有回車）加上同級元素span;並對span進行vertical-align:middle;width:0;height:100%;display:inline-block 4、置換元素與非置換元素 置換元素與非置換元素 a) 置換元素：瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。 例如：瀏覽器會根據<img>標籤的src屬性的值來讀取圖片資訊並顯示出來，而如果檢視(x)html程式碼，則看不到圖片的實際內容；<input>標籤的type屬性來決定是顯示輸入框，還是單選按鈕等。 (x)html中的<img>、<input>、<textarea>、<select>都是置換元素。這些元素往往沒有實際的內容，即是一個空元素。 置換元素在其顯示中生成了框，這也就是有的內聯元素（img,input）能夠設定寬高的原因。 b) 不可替換元素（非置換元素）：(x)html 的大多數元素是不可替換元素，即其內容直接表現給使用者端（如瀏覽器）。 5、什麼是精靈圖？優勢是什麼？ 圖片整合，將小的單張背景圖整合到一張大的背景圖上。
圖片整合的優勢： 1）通過圖片整合來減少對伺服器的請求次數，從而提高 頁面的載入速度。 2）通過整合圖片來減小圖片的體積。
6、什麼是css層疊樣式表？優先順序演算法如何計算？ a.重要性和來源的優先順序排序從低到高是： 1）瀏覽器預設樣式 2）class/id.....選擇器的權重 3）行間樣式 4）內聯或者外聯 （書寫順序） 5）!important 最高的 7、display:none與visibility:hidden的區別 前者：隱藏不佔位  後者：隱藏但是佔位置 8、清除浮動的幾種方式 hack1：給父元素新增宣告overflow:hidden; hack2:   給父元素加height hack3:   在浮動元素下方新增空div,並給該元素新增         宣告：div{clear:both; height:0; overflow:hidden;} hack4:萬能清除浮動法 p:after{content:“.”;clear:both;display:block;height:0;overflow:hidden;  visibility:hidden;} 9、哪些屬性可以繼承？ 1）文字相關：font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing 2）列表相關：list-style-image、list-style-position、list-style-type、list-style 3）顏色相關：color 4）透明度（子元素會繼承祖元素的opacity，但是無法更改） 注：font-size繼承的是父元素的大小，而不是比例。line-height當父元素是百分比或px值得時候，子元素跟父元素相同，當父元素是normal或數字的時候，子元素的line-height是子元素的字型大小乘以數字。 10、定位的方式 position屬性值：static，relative，absolute，fixed 1）static static是預設值，元素位於文件流中，正常顯示，忽略元素的top，bottom，left，right屬性。z-index屬性始終為0. 2）relative 相對定位，保留元素在文件流中佔用的位置和尺寸，由left/right/top/bottom幾個屬性確定相對移動的距離，原來的位置保留 3）absolute 絕對定位，將物件從文件流中脫離出來，使用left/right/top/bottom等屬性相對其最接近的一個並有定位設定的父元素進行絕對定位；如果沒有，則依據body物件 4）fixed fixed和absolute差不多，但是他相對的是視窗的左上角，不會跟隨文件滾動。但是如果在多frame頁面裡面，他相對的是所在frame的左上角，而不是瀏覽器左上角。 11、link和@import區別？ 1、老祖宗的差別。link屬於XHTML標籤，而@import完全是CSS提供的一種方式。 2、link標籤除了可以載入CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連線屬性等，@import就只能載入CSS了 3、載入順序的差別。當一個頁面被載入的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被載入，而@import引用的CSS 會等到頁面全部被下載完再被載入。所以有時候瀏覽@import載入CSS的頁面時開始會沒有樣式（就是閃爍） 4、相容性的差別。由於@import是CSS2.1提出的所以老的瀏覽器不支援，@import只有在IE5以上的才能識別，而link標籤無此問題 5、使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標籤，因為@import不是dom可以控制的 12、定位的屬性值都有哪些？每個值得意思？ 各屬性值的作用： static：預設值。位置設定為 static 的元素會正常顯示，它始終會處於文件流給予的位置（static 元素會忽略任何 top、bottom、left 或 right 宣告）。 absolute：相對於父級元素的絕對定位，s浮出、脫離佈局流，它不佔據空間，就是我們所說的層，其位置相對於最近的已定位父元素而言的位置，可直接指定 “left”、“top”、“right” 以及 “bottom” 屬性。若父級都沒有定位，則以html（根元素）。(層疊的順序z-index:value) relative：是相對於預設位置的偏移定位，通過設定left、top、right、bottom值可將其移至相對於其正常位置的地方（相對於自己的開始的位置發生的位置上的移動，【不會破壞正常的佈局流】 fixed：相對瀏覽器的絕對定位，是相對於瀏覽器視窗的指定座標進行定位。此元素的位置可通過 "left"、"top"、"right" 以及"bottom" 屬性來規定。不論視窗滾動與否，元素都會留在那個位置。 13、寫出html5新增的標籤15個 header nav footer main aside article section figure datalist video audio fieldest  legend  label caption 14、一、BFC是什麼？作用？怎麼產生？ 1、塊級格式化上下文 2、自適應兩欄佈局、清除內部浮動、防止垂直margin重疊（放在兩個BFC裡） 3、根元素、 float屬性不為none、 position為absolute或fixed、 display為inline-block，table-cell，table-caption，flex，inline-flex、 overflow不為visible 15、.px，em，rem，pt的區別 1）px實際上就是畫素，用px設定字型大小時，比較穩定和精確 但是這種方法存在一個問題，當用戶在瀏覽器中瀏覽我們製作的web頁面時，如果對瀏覽器進行了縮放，這時會使我們的web頁面佈局被打破。因此，這時就提出了使用“em”來定義web頁面的字型。 2）em就是根據基準來縮放字型的大小 em是相對於其父元素來設定字型大小的，這樣就會存在一個問題，進行任何元素設定，都有可能需要知道他父元素的大小 3）rem是相對於根元素字型大小來顯示的 rem是相對於根元素<html>，這樣就意味著，我們只需要在根元素確定一個參考值 4）pt的大小等於1英寸的1/72 磅：他是作為文字的一種計量單位 這種度量方式來源於列印-設計背景，最適合於媒體，但同樣廣泛應用於顯示器 16、實現垂直+水平居中有哪些方法？ 1、div{width:200px;height:200px;background:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;} 2、div{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;} 17、漸進增強和優雅降級 漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。 優雅降級 graceful degradation：一開始就構建完整的功能，然後再針對低版本瀏覽器進行相容
18、css選擇符有哪些？ 1）通配選擇符      * 2）型別選擇符 /元素選擇符     a 3）屬性選擇符      input[type="button"] 4）包含選擇符     div .code a 5）子物件選擇符     ul.test>li 6）ID選擇符     # 7）類選擇符     . 8）群組選擇符     body,ul,li 9）偽類及偽物件選擇符     div:first-letter     a:hover 10）相鄰選擇符     li+li 19、animation和transition的區別 相同點：都是隨著時間改變元素的屬性值。 不同點： transition需要觸發一個事件(hover事件或click事件等)才會隨時間改變其 css屬性； 而animation在不需要觸發任何事件的情況下也可以顯式的隨著時間變化來改變元素css的屬性值，從而達到一種動畫的效果，css3的animation就需要明確的動畫屬性值。 20、什麼是標準盒模型和怪異盒模型。兩者的區別，如何實現怪異盒模型，和標準和模型 標準盒模型：content+border+padding       怪異盒模型：content 一個算盒子的寬度的時候加上border和padding另一個不加 怪異盒模型實現：box-sizing:border-box 標準盒模型：box-sizing:content-box 21、如何讓一個元素在父元素內上下左右居中 css： .box{display:flex;width:800px;height:300px;justify-content:center} .box div{align-self:center} html: <div class="box">      <div></div> </div> 22、video與audio常用的格式有哪些  用於視訊：video/ogg   video/mp4     video/webm 用於音訊：audio/ogg   audio/mpeg
23、簡單的解釋下彈性盒模型的屬性和屬性值（至少寫出6個屬性） display:flex; flex-direction: justify-content: align-items: align-self: align-content: flex-wrap: 23、簡單的介紹一下線性漸變和徑向漸變、重複漸變的用法 線性漸變：linear-gradient() 徑向漸變：radial-gradient() 重複線性漸變：repeating-linear-gradient() 重複徑向漸變：repeating-radial-gradient() 24、簡單介紹下animation的用法 animation有兩部分組成：animation:動畫名稱  動畫執行時間  動畫型別 動畫延遲時間  動畫重複次數 動畫方向； @keyframes 動畫名字 25、css3D的主要幾個屬性和屬性值 1、景深：perspactive:number;     想要看到的物體越大，那麼就把值設的較小，如果要看物體看的越小就把值設的越大 2、3D的舞臺：transform-style:preserve-3d; 3、translateZ()   rotateZ()   scaleZ() 26、2D中的主要幾個屬性 transform:translate()   rotate() skew()  scale() transform-origin: 27、簡單介紹過度動畫的屬性和屬性值 transition:屬性名稱（可以用all） 動畫執行的時間  動畫的型別  動畫的延遲時間 28、css3中新增的背景屬性 background-origin:背景原點 background-clip:背景裁切 background-size:背景影象的尺寸 以下為background-size的三個值 length 規定背景圖的大小。第一個值寬度，第二個值高度。 Percentage(%) 以百分比為值設定背景圖大小 cover 把背景影象擴充套件至足夠大，以使背景影象完全覆蓋背景區域 29、寫出5大瀏覽器的核心以及他們的代表作品 *Trident: IE、Maxthon(遨遊)、騰訊 、Theworld世界之窗、360瀏覽器 *Gecko：： 代表作品Mozilla Firefox 是開源的 *Webkit : 代表作品Safari、Chrome ， 是一個開源專案。 *Presto : 代表作品Opera ，Presto是由Opera Software開發的瀏覽器排版引擎。它也是世界上公認的渲染速度最快的引擎。 *Blink  ：由Google和Opera Software開發的瀏覽器排版引擎，2013年4月釋出。 30、寫出IE6裡面常見的幾種bug以及解決方案(最少4種) 1)圖片有邊框BUG         方案：給圖片加border:0;或者border:0    none; 2、雙倍浮向（雙倍邊距）   方案：display:inline 3、預設高度（IE6、IE7）  方案：給元素新增宣告：font-size:0;   方案2：給元素新增宣告：overflow:hidden; 4、按鈕元素預設大小不一   方案：用a標籤模擬 31、IE的過濾器有哪些？ 1、  _ 下劃線屬性過濾器 2、  \9 ：  IE版本識別；其他瀏覽器都不識別 語法：選擇符{屬性：屬性值\9;} 3、  \0  :   IE8及以上版本識別；其他瀏覽器都不識別     語法：選擇符{屬性：屬性值\0；} 32、元素高度塌陷解決方案（至少4種） hack1：給父元素新增宣告overflow:hidden; hack2:   給父元素加height hack3:   在浮動元素下方新增空div,並給該元素新增         宣告：div{clear:both; height:0; overflow:hidden;} hack4:萬能清除浮動法 p:after{content:“.”;clear:both;display:block;height:0;overflow:hidden;  visibility:hidden;}