前端知識點回顧篇——是我當初剛轉(zhuǎn)行為了面試而將自己學(xué)過的前端知識整理成的一份筆記，個人目的性很強，僅供參考。

---

doctype 有什么用

doctype是一種標準通用標記語言的文檔類型聲明，目的是告訴標準通用標記語言解析器要使用什么樣的文檔類型定義（DTD）來解析文檔。

瀏覽器本身分為兩種模式，一種是標準模式，一種是怪異模式（混雜模式），瀏覽器通過doctype來區(qū)分這兩種模式，doctype在html中的作用就是觸發(fā)瀏覽器的標準模式，如果html中省略了doctype，瀏覽器就會進入到Quirks模式的怪異狀態(tài)，在這種模式下，有些樣式會和標準模式存在差異（頁面會以一種比較寬松的向后兼容的方式顯示），而html標準和dom標準值規(guī)定了標準模式下的行為，沒有對怪異模式做出規(guī)定，因此不同瀏覽器在怪異模式下的處理也是不同的，所以一定要在html開頭使用doctype。

容器級標簽？文本級標簽？塊級元素？行內(nèi)元素？

CSS的三種引用方式？

內(nèi)聯(lián)樣式(行間樣式):直接在標簽內(nèi)部通過使用style屬性添加CSS樣式　

<p style="color:red;font-size:12px;">這是一個段落</p>

內(nèi)部樣式:在

標簽里面通過使用<style>標簽來引進CSS樣式

外部樣式：先在外部新建一個外部樣式表，然后在

標簽里面通過標簽進行關(guān)聯(lián)

優(yōu)先級：內(nèi)聯(lián)樣式>內(nèi)部樣式>外部樣式

CSS命名規(guī)范

• 以字母開頭
• 必須以字母開頭命名選擇器,這樣可保證在所有瀏覽器下都能兼容;
• 不允許單個字母的類選擇器出現(xiàn);
• 允許命名帶有廣告等英文的單詞,例如ad,adv,adver,advertising,已防止該模塊被瀏覽器當成垃圾廣告過濾掉.
• 全小寫,并使用 - 連字符
• 下劃線 _ 禁止出現(xiàn)在class命名中,統(tǒng)一使用-連字符
• 禁止駝峰式命名
• 不要出現(xiàn)-數(shù)字連接

標準文檔流的微觀現(xiàn)象

空白折疊。比如，如果我們想讓img標簽之間沒有空隙需要緊密連接。

<img src="img/00.jpg"/><img src="img/02.jpg"/>

高矮不齊，底邊對齊。

如果又有圖片且圖片參差不齊的,又有文字。則會出現(xiàn)高矮不齊,底邊對齊的情況。

自動換行。

浮動的性質(zhì)

與標準文檔流的渲染定位（脫標），能互相貼靠且設(shè)置寬高（貼邊），字圍效果（字圍），默認寬為文本寬度（收縮）。

IE6的伴生屬性

css屬性前加下劃線是IE6認識的專有屬性，稱伴生屬性 hack

IE6瀏覽器兼容問題

IE6不支持小于12px的盒子，看起來都大

將盒子的字號設(shè)置小（小于盒子的高） **_font-size : 0px;**

IE6不支持用overflow:hidden;來清除浮動

追加一條 **_zoom:1;** (原義是放大倍數(shù)，追加是為了觸發(fā)瀏覽器的hasLayout機制)

IE6雙倍margin bug：當出現(xiàn)連續(xù)浮動的元素，攜帶和浮動方向相同的margin時，隊首的元素，會雙倍marign。

使浮動的方向和margin的方向相反；

單獨給隊首的元素，寫一個一半的margin：**ul li.no1{_margin-left:20px;}**

3px bug：兒子右浮動用margin-right踹了父親，結(jié)果IE6中多踹出3px。

不用管，因為根本不允許用兒子踹父親，出現(xiàn)了這個bug說明你的代碼不標準。

層疊順序

結(jié)構(gòu)性偽類選擇器

• li: first-of-type
• li: last-of-type
• li: only-of-type
• li: nth-of-type(n)
• li: nth-last-of-type(n)
• li: first-child
• li: last-child
• li: only-child
• li: nth-child(n)
• li: nth-last-child(n)
• p:not(.box)
• E:: selection

表單偽類

:focus+獲得焦點時/ :disabled+選取不能操控的/ :enabled+選取可以操控的/ :checked+選取被選擇的

opacity和rgba的區(qū)別？

rgba是透明顏色，頂多控制一個元素的背景顏色，父透子不透。 opacity是控制整個元素的透明程度，父透子也透。IE8以下：

filter: alpha(opacity=0~100);

iframe？

<!-- iframe通過name屬性與a標簽的target聯(lián)系，使得點擊a標簽可以讓iframe跳轉(zhuǎn)到指定的地址 --> <iframe src="http://www.tmall.com" frameborder="0" scrolling='auto' name="iframe"></iframe> <a href="http://www.baidu.com" target='iframe'>baidu</a>

動畫animation

div{/*動畫名稱 持續(xù)時間 延遲時間 */animation: move 2s; } /*自定義動畫*/ @keyframes move{from{width: 100px;background: red;}to{width: 500px;background: blue;}/*0%{} 100%{}*/ }

css變換

transform: rotate() 變換焦點：transform-origin: x y; （默認居中）

transform: scale() 放大倍數(shù)>0

transform: translate(x, y)

transform: skew()

CSS的background屬性

語法：background : bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

• position：left center right & top center bottom(只給一個值另外一個設(shè)置為center) / x% y%(以父元素的寬高作為參考，左上角為0%0%，右下角為100%100%) / xpos ypos 可理解為定位的left和top值

• size：xlen ylen(只給一個值另外一個設(shè)置為auto) / x% y%(相對于父元素的百分比) / cover(保持寬高比完全覆蓋定位區(qū)域) / contain(保持寬高比以適應(yīng)定位區(qū)域)

• origin：padding-box 默認 / content-box / border-box 指定position屬性的相對定位位置

• clip：border-box 默認 / padding-box / content-box 背景從哪里的外面減掉

• attachment: scroll 默認 / fixed 固定

彈性布局與em

來源：https://www.w3cplus.com/css/px-to-em

Web頁面中“body”的文字大小在用戶瀏覽器下默認渲染是“16px”，彈性設(shè)計有一個關(guān)鍵地方Web頁面中所有元素都使用“em”單位值。
em是一個相對于父元素font-size的一個垂直測量長度單位，1em等于一個任何字體中的字母所需要的垂直空間，可指定到小數(shù)點后三位。

• 設(shè)置body的font-size

在

中設(shè)置一個正文文本所需的字體大小，或者設(shè)置為“10px”，相當于（“0.625em或62.5%”），這樣為了方便其子元素計算
CSS設(shè)置： body{font-size: 0.625em;} 如果是IE瀏覽器要加上html{font-size: 62.5%;}

• 如何使用em作為單位

一個元素如果沒有設(shè)置font-size，則它的em都是指父元素的字體的大小
如果它設(shè)置了font-size，則font-size中em是指父元素的字體的大小，其他屬性的em是它自己字體的大小

響應(yīng)式布局

媒體類型

all 所有媒體/screen 彩屏設(shè)備/print打印機

關(guān)鍵詞

and 并且/not 排除某種指定媒體/only 僅限某種媒體

媒體特性

(width:600px) 寬/(max-width:600px) <=600px/(min-width：480px) >=480px/(orientation:portrait) 豎屏/(orientation:landscape) 橫屏

媒體查詢

• 方法1： @media [not|only] mediatype/all [and] (media feature-1) [and] (media feature-2…){CSS-Code;} 內(nèi)嵌式（寫在style里面）
  @media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0 auto;}}
• 方法2：@import url('index.css') [not|only] mediatype [and] (media feature) [and] (media feature); 內(nèi)嵌引用外部（寫在style里面）
  @import url("css/reset.css") screen;
• 方法3： 外部式引用
  

視口 viewport

在移動瀏覽器中，當頁面寬度超出設(shè)備，瀏覽器內(nèi)部虛擬的一個頁面容器，將頁面容器縮放到設(shè)備這么大，然后展示

<meta name='viewport' content='width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1 user-scalable=no'/> <--!將視口的寬度設(shè)置為移動端屏幕的寬度-->

width/height/initial-scale 初始比例/minimum-scale 允許縮放最小比例/maximum-scale 允許縮放最大比例/user-scalable 是否允許縮放（yes|no 或1|0）

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <--!視口兼容-->

視口改變后如何改變rem的大小：

(function(win,doc){ var docEl = doc.documentElement || document.body;//獲取HTML標簽 //判斷是移動端設(shè)備還是PC,移動 就采用'orientationchange',橫豎屏事件，PC端就采用onresize，窗口改變時間 var resize = 'orientationchange' in win ? 'orientationcha nge':'resize'; function rem(){ var w = docEl.clientWidth/720>1?720:docEl.clientWidth; docEl.style.fontSize= 100*(w/720)+'px'; } doc.addEventListener('DOMContentLoaded',rem,false); //監(jiān)聽'DOMContent事件:DOM加載完成執(zhí)行,如果DOMContent事件，那么 執(zhí)行rem函數(shù) win.addEventListener(resize,rem,false); //win下監(jiān)聽resize事件,如果resize事件，那么執(zhí)行rem函數(shù) })(window,document)

em和rem的區(qū)別

鏈接:http://caibaojian.com/rem-vs-em.html

• rem 單位翻譯為像素值是由 html 元素的字體大小決定的。 此字體大小會被瀏覽器中字體大小的設(shè)置影響，除非顯式重寫一個具體單位。
• em 單位轉(zhuǎn)為像素值，取決于他們使用的字體大小。 此字體大小受從父元素繼承過來的字體大小，除非顯式重寫與一個具體單位。

轉(zhuǎn)載于:https://www.cnblogs.com/simpul/p/11019964.html

總結(jié)

以上是生活随笔為你收集整理的前端知识点回顾——HTML，CSS篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。