前端知识点回顾——HTML，CSS篇
前端知識點回顧篇——是我當初剛轉行為了面試而將自己學過的前端知識整理成的一份筆記，個人目的性很強，僅供參考。
doctype 有什么用
doctype是一種標準通用標記語言的文檔類型聲明，目的是告訴標準通用標記語言解析器要使用什么樣的文檔類型定義（DTD）來解析文檔。
瀏覽器本身分為兩種模式，一種是標準模式，一種是怪異模式（混雜模式），瀏覽器通過doctype來區分這兩種模式，doctype在html中的作用就是觸發瀏覽器的標準模式，如果html中省略了doctype，瀏覽器就會進入到Quirks模式的怪異狀態，在這種模式下，有些樣式會和標準模式存在差異（頁面會以一種比較寬松的向后兼容的方式顯示），而html標準和dom標準值規定了標準模式下的行為，沒有對怪異模式做出規定，因此不同瀏覽器在怪異模式下的處理也是不同的，所以一定要在html開頭使用doctype。
容器級標簽？文本級標簽？塊級元素？行內元素？
CSS的三種引用方式？
內聯樣式(行間樣式):直接在標簽內部通過使用style屬性添加CSS樣式
<p style="color:red;font-size:12px;">這是一個段落</p>內部樣式:在
標簽里面通過使用<style>標簽來引進CSS樣式外部樣式：先在外部新建一個外部樣式表，然后在
標簽里面通過標簽進行關聯優先級：內聯樣式>內部樣式>外部樣式
CSS命名規范
- 以字母開頭
- 必須以字母開頭命名選擇器,這樣可保證在所有瀏覽器下都能兼容;
- 不允許單個字母的類選擇器出現;
- 允許命名帶有廣告等英文的單詞,例如ad,adv,adver,advertising,已防止該模塊被瀏覽器當成垃圾廣告過濾掉.
- 全小寫,并使用 - 連字符
- 下劃線 _ 禁止出現在class命名中,統一使用-連字符
- 禁止駝峰式命名
- 不要出現-數字連接
標準文檔流的微觀現象
如果又有圖片且圖片參差不齊的,又有文字。則會出現高矮不齊,底邊對齊的情況。
浮動的性質
與標準文檔流的渲染定位（脫標），能互相貼靠且設置寬高（貼邊），字圍效果（字圍），默認寬為文本寬度（收縮）。
IE6的伴生屬性
css屬性前加下劃線是IE6認識的專有屬性，稱伴生屬性 hack
IE6瀏覽器兼容問題
IE6不支持小于12px的盒子，看起來都大
將盒子的字號設置小（小于盒子的高） **_font-size : 0px;**
IE6不支持用overflow:hidden;來清除浮動
追加一條 **_zoom:1;** (原義是放大倍數，追加是為了觸發瀏覽器的hasLayout機制)
IE6雙倍margin bug：當出現連續浮動的元素，攜帶和浮動方向相同的margin時，隊首的元素，會雙倍marign。
使浮動的方向和margin的方向相反；
單獨給隊首的元素，寫一個一半的margin：**ul li.no1{_margin-left:20px;}**
3px bug：兒子右浮動用margin-right踹了父親，結果IE6中多踹出3px。
不用管，因為根本不允許用兒子踹父親，出現了這個bug說明你的代碼不標準。
層疊順序
結構性偽類選擇器
- 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的區別？
rgba是透明顏色，頂多控制一個元素的背景顏色，父透子不透。 opacity是控制整個元素的透明程度，父透子也透。IE8以下：
filter: alpha(opacity=0~100);iframe？
<!-- iframe通過name屬性與a標簽的target聯系，使得點擊a標簽可以讓iframe跳轉到指定的地址 --> <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{/*動畫名稱 持續時間 延遲時間 */animation: move 2s; } /*自定義動畫*/ @keyframes move{from{width: 100px;background: red;}to{width: 500px;background: blue;}/*0%{} 100%{}*/ }css變換
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(只給一個值另外一個設置為center) / x% y%(以父元素的寬高作為參考，左上角為0%0%，右下角為100%100%) / xpos ypos 可理解為定位的left和top值
size：xlen ylen(只給一個值另外一個設置為auto) / x% y%(相對于父元素的百分比) / cover(保持寬高比完全覆蓋定位區域) / contain(保持寬高比以適應定位區域)
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”，彈性設計有一個關鍵地方Web頁面中所有元素都使用“em”單位值。
em是一個相對于父元素font-size的一個垂直測量長度單位，1em等于一個任何字體中的字母所需要的垂直空間，可指定到小數點后三位。
- 設置body的font-size
在
中設置一個正文文本所需的字體大小，或者設置為“10px”，相當于（“0.625em或62.5%”），這樣為了方便其子元素計算CSS設置： body{font-size: 0.625em;} 如果是IE瀏覽器要加上html{font-size: 62.5%;}
- 如何使用em作為單位
一個元素如果沒有設置font-size，則它的em都是指父元素的字體的大小
如果它設置了font-size，則font-size中em是指父元素的字體的大小，其他屬性的em是它自己字體的大小
響應式布局
媒體類型
all 所有媒體/screen 彩屏設備/print打印機
關鍵詞
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;} 內嵌式（寫在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); 內嵌引用外部（寫在style里面）
@import url("css/reset.css") screen; - 方法3： 外部式引用
視口 viewport
在移動瀏覽器中，當頁面寬度超出設備，瀏覽器內部虛擬的一個頁面容器，將頁面容器縮放到設備這么大，然后展示
<meta name='viewport' content='width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1 user-scalable=no'/> <--!將視口的寬度設置為移動端屏幕的寬度-->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標簽 //判斷是移動端設備還是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); //監聽'DOMContent事件:DOM加載完成執行,如果DOMContent事件，那么 執行rem函數 win.addEventListener(resize,rem,false); //win下監聽resize事件,如果resize事件，那么執行rem函數 })(window,document)em和rem的區別
鏈接:http://caibaojian.com/rem-vs-em.html
- rem 單位翻譯為像素值是由 html 元素的字體大小決定的。 此字體大小會被瀏覽器中字體大小的設置影響，除非顯式重寫一個具體單位。
- em 單位轉為像素值，取決于他們使用的字體大小。 此字體大小受從父元素繼承過來的字體大小，除非顯式重寫與一個具體單位。
轉載于:https://www.cnblogs.com/simpul/p/11019964.html
總結
以上是生活随笔為你收集整理的前端知识点回顾——HTML，CSS篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网络流(3)——找到最小st-剪切
- 下一篇： IOS 浏览器端overflow：scr