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;}

總結

以上是生活随笔為你收集整理的web前端常用知识点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。