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