html和css的面試知識(shí)點(diǎn)總結(jié)（附示例）

CSS優(yōu)先級(jí)算法

優(yōu)先級(jí)就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn)
載入樣式以最后載入的定位為準(zhǔn)
優(yōu)先級(jí)為: !important > id > class > tag important 比 內(nèi)聯(lián)優(yōu)先級(jí)高
important聲明比js的優(yōu)先級(jí)要高

第一等：代表內(nèi)聯(lián)樣式，如: style=””，權(quán)值為1000。
第二等：代表ID選擇器，如：#content，權(quán)值為0100。
第三等：代表類(lèi)，偽類(lèi)和屬性選擇器，如.content，權(quán)值為0010。
第四等：代表類(lèi)型選擇器和偽元素選擇器，如p p，權(quán)值為0001。
通配符、子選擇器、相鄰選擇器等的。如*、>、+,權(quán)值為0000。
繼承的樣式?jīng)]有權(quán)值。

css定義的權(quán)重

/ 以下是權(quán)重的規(guī)則：標(biāo)簽的權(quán)重為1，class的權(quán)重為10，id的權(quán)重為100，以下/// 例子是演示各種定義的權(quán)重值：

/*權(quán)重為1*/
div{
}
/*權(quán)重為10*/
.class1{
}
/*權(quán)重為100*/
#id1{
}
/*權(quán)重為100+1=101*/
#id1 div{
}
/*權(quán)重為10+1=11*/
.class1 div{
}
/*權(quán)重為10+10+1=21*/
.class1 .class2 div{
}

// 如果權(quán)重相同，則最后定義的樣式會(huì)起作用，但是應(yīng)該避免這種情況出現(xiàn)

CSS3新增偽類(lèi)

p:first-of-type 選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素。
p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素。
p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個(gè) <p> 元素。
p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素。

:after 在元素之前添加內(nèi)容,也可以用來(lái)做清除浮動(dòng)。
:before 在元素之后添加內(nèi)容
:enabled
:disabled 控制表單控件的禁用狀態(tài)。
:checked 單選框或復(fù)選框被選中

居中一個(gè)浮動(dòng)元素

給div設(shè)置一個(gè)寬度，然后添加margin:0 auto屬性

div{
 width:200px;
 margin:0 auto;
 }

//確定容器的寬高 寬500 高 300 的層
//設(shè)置層的外邊距

 .div {
 width:500px ; height:300px;//高度可以不設(shè)
 margin: -150px 0 0 -250px;
 position:relative; //相對(duì)定位
 background-color:pink; //方便看效果
 left:50%;
 top:50%;
 }

讓絕對(duì)定位的div居中

 position: absolute;
 width: 1200px;
 background: none;
 margin: 0 auto;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;

CSS3有新特性

新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節(jié)點(diǎn)）
圓角 （border-radius:8px）
多列布局 （multi-column layout）
陰影和反射 （ShadowReflect）
文字特效 （text-shadow、）
文字渲染 （Text-decoration）
線(xiàn)性漸變 （gradient）
旋轉(zhuǎn) （transform）
增加了旋轉(zhuǎn),縮放,定位,傾斜,動(dòng)畫(huà)，多背景
transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)Animation:

新增選擇器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
彈性盒模型 display: flex;
多列布局 column-count: 5;
媒體查詢(xún) @media (max-width: 480px) {.box: {column-count: 1;}}
個(gè)性化字體 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
顏色透明度 color: rgba(255, 0, 0, 0.75);
圓角 border-radius: 5px;
漸變 background:linear-gradient(red, green, blue);
陰影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
倒影 box-reflect: below 2px;
文字裝飾 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
邊框效果 border-image:url(bt_blue.png) 0 10;
轉(zhuǎn)換
 旋轉(zhuǎn) transform: rotate(20deg);
 傾斜 transform: skew(150deg, -10deg);
 位移 transform: translate(20px, 20px);
 縮放 transform: scale(.5);
平滑過(guò)渡 transition: all .3s ease-in .1s;
動(dòng)畫(huà) @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

用純CSS創(chuàng)建一個(gè)三角形

// 把上、左、右三條邊隱藏掉（顏色設(shè)為 transparent）
#demo {
 width: 0;
 height: 0;
 border-width: 20px;
 border-style: solid;
 border-color: transparent transparent red transparent;
}

瀏覽器的兼容性

1. png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.

2. 瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來(lái)統(tǒng)一

3. IE下,可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性。解決方法:統(tǒng)一通過(guò)getAttribute()獲取自定義屬性

4. IE下,even對(duì)象有x,y屬性,但是沒(méi)有pageX,pageY屬性.Firefox下,event對(duì)象有pageX,pageY屬性,但是沒(méi)有x,y屬性

BFC

塊級(jí)格式化上下文（內(nèi)部元素不會(huì)影響外部元素）

渲染規(guī)則：
1.bfc元素的垂直方向邊距發(fā)生重疊
2.bfc區(qū)域不會(huì)與浮動(dòng)元素重疊
3.獨(dú)立容器
4.計(jì)算bfc高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算

創(chuàng)建bfc：
1.overflow
2.浮動(dòng)不為none
3.position不是static
4.display與table有關(guān)

display:inline-block 什么時(shí)候會(huì)顯示間隙

移除空格、使用margin負(fù)值、使用font-size:0、letter-spacing、word-spacing

清除浮動(dòng)

.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}

1.可用a標(biāo)簽 設(shè)置display：inline-block；width：100%， 把含浮動(dòng)元素的div撐起來(lái)（div不用設(shè)計(jì)高度）
2.overflow：hidden(BFC)
3.可用a標(biāo)簽 設(shè)置display：block；width：100%，clear：both
4.div=》display：table
5.div=》display：table-cell
6.div=》display：flow-root（觸發(fā)BFC）
7.div::after代替a標(biāo)簽=》content:’’ display:block; clear:both;(最下方存在一個(gè)沒(méi)有高度的元素)
8.使用.clearfix:after{content:’’ display:block; clear:both;}
9.讓div也浮動(dòng)（BFC）

盒子模型

盒子模型構(gòu)成：內(nèi)容(content)、內(nèi)填充(padding)、 邊框(border)、外邊距(margin)
IE8及其以下版本瀏覽器，未聲明 DOCTYPE，內(nèi)容寬高會(huì)包含內(nèi)填充和邊框，稱(chēng)為怪異盒模型(IE盒模型)
標(biāo)準(zhǔn)(W3C)盒模型：元素寬度 = width + padding + border + margin
怪異(IE)盒模型：元素寬度 = width + margin
標(biāo)準(zhǔn)瀏覽器通過(guò)設(shè)置 css3 的 box-sizing: border-box 屬性，觸發(fā)“怪異模式”解析計(jì)算寬高

box-sizing: content-box; // 默認(rèn)的標(biāo)準(zhǔn)(W3C)盒模型元素效果
box-sizing: border-box; // 觸發(fā)怪異(IE)盒模型元素的效果
box-sizing: inherit; // 繼承父元素 box-sizing 屬性的值

繼承

可以繼承的樣式：font-size、font-family、color、list-style、cursor
不可繼承的樣式：width、height、border、padding、margin、background

隱藏元素的方法

visibility: hidden; 這個(gè)屬性只是簡(jiǎn)單的隱藏某個(gè)元素，但是元素占用的空間任然存在
opacity: 0; CSS3屬性，設(shè)置0可以使一個(gè)元素完全透明
position: absolute; 設(shè)置一個(gè)很大的 left 負(fù)值定位，使元素定位在可見(jiàn)區(qū)域之外
display: none; 元素會(huì)變得不可見(jiàn)，并且不會(huì)再占用文檔的空間。
transform: scale(0); 將一個(gè)元素設(shè)置為縮放無(wú)限小，元素將不可見(jiàn)，元素原來(lái)所在的位置將被保留
<div hidden="hidden"> HTML5屬性,效果和display:none;相同，但這個(gè)屬性用于記錄一個(gè)元素的狀態(tài)
height: 0; 將元素高度設(shè)為 0 ，并消除邊框
filter: blur(0); CSS3屬性，將一個(gè)元素的模糊度設(shè)置為0，從而使這個(gè)元素“消失”在頁(yè)面中

rgba() 和 opacity

opacity 作用于元素以及元素內(nèi)的所有內(nèi)容（包括文字）的透明度
rgba() 只作用于元素自身的顏色或其背景色，子元素不會(huì)繼承透明效果

## 瀏覽器的JS兼容性 ##

當(dāng)前樣式：getComputedStyle(el, null) VS el.currentStyle
事件對(duì)象：e VS window.event
鼠標(biāo)坐標(biāo)：e.pageX, e.pageY VS window.event.x, window.event.y
按鍵碼：e.which VS event.keyCode
文本節(jié)點(diǎn)：el.textContent VS el.innerText

li與li之間有看不見(jiàn)的空白間隔

li排列受到中間空白(回車(chē)/空格)等的影響，因?yàn)榭瞻滓矊儆谧址瑫?huì)被應(yīng)用樣式占據(jù)空間，產(chǎn)生間隔
解決辦法：在ul設(shè)置設(shè)置font-size=0,在li上設(shè)置需要的文字大小

px、em

px 相對(duì)于顯示器屏幕分辨率，無(wú)法用瀏覽器字體放大功能
em 值并不是固定的，會(huì)繼承父級(jí)的字體大小： em = 像素值 / 父級(jí)font-size

FOUC(Flash of Unstyled Content)

當(dāng)使用 @import 導(dǎo)入 CSS 時(shí)，會(huì)導(dǎo)致某些頁(yè)面在 IE 出現(xiàn)奇怪的現(xiàn)象： 沒(méi)有樣式的頁(yè)面內(nèi)容顯示瞬間閃爍，這種現(xiàn)象稱(chēng)為“文檔樣式短暫失效”，簡(jiǎn)稱(chēng)為FOUC
產(chǎn)生原因：當(dāng)樣式表晚于結(jié)構(gòu)性html加載時(shí)，加載到此樣式表時(shí)，頁(yè)面將停止之前的渲染。
等待此樣式表被下載和解析后，再重新渲染頁(yè)面，期間導(dǎo)致短暫的花屏現(xiàn)象。
解決方法：使用 link 標(biāo)簽將樣式表放在文檔 head

CSS優(yōu)化、提高性能

多個(gè)css合并，盡量減少HTTP請(qǐng)求
將css文件放在頁(yè)面最上面
移除空的css規(guī)則
避免使用CSS表達(dá)式
選擇器優(yōu)化嵌套，盡量避免層級(jí)過(guò)深
充分利用css繼承屬性，減少代碼量
抽象提取公共樣式，減少代碼量
屬性值為0時(shí)，不加單位
屬性值為小于1的小數(shù)時(shí)，省略小數(shù)點(diǎn)前面的0
css雪碧圖

全屏滾動(dòng)

原理類(lèi)似圖片輪播原理，超出隱藏部分，滾動(dòng)時(shí)顯示
可能用到的CSS屬性：overflow:hidden; transform:translate(100%, 100%); display:none;

響應(yīng)式設(shè)計(jì)ie

$(window).resize(function () {
 screenRespond();
});
screenRespond();
function screenRespond(){
var screenWidth = $(window).width();
if(screenWidth <= 1800){
 $("body").attr("class", "w1800");
}
if(screenWidth <= 1400){
 $("body").attr("class", "w1400");
}
if(screenWidth > 1800){
 $("body").attr("class", "");
}
}

a標(biāo)簽上四個(gè)偽類(lèi)的執(zhí)行順序

link > visited > hover > active

Chrome支持小于12px 的文字

.shrink{
 -webkit-transform:scale(0.8);
 -o-transform:scale(1);
 display:inline-block;
 }

TCP傳輸?shù)娜挝帐炙拇螕]手策略

為了準(zhǔn)確無(wú)誤地把數(shù)據(jù)送達(dá)目標(biāo)處，TCP協(xié)議采用了三次握手策略。用TCP協(xié)議把數(shù)據(jù)包送出去后，TCP不會(huì)對(duì)傳送 后的情況置之不理，它一定會(huì)向?qū)Ψ酱_認(rèn)是否成功送達(dá)。握手過(guò)程中使用了TCP的標(biāo)志：SYN和ACK

發(fā)送端首先發(fā)送一個(gè)帶SYN標(biāo)志的數(shù)據(jù)包給對(duì)方。接收端收到后，回傳一個(gè)帶有SYN/ACK標(biāo)志的數(shù)據(jù)包以示傳達(dá)確認(rèn)信息。 最后，發(fā)送端再回傳一個(gè)帶ACK標(biāo)志的數(shù)據(jù)包，代表“握手”結(jié)束。 若在握手過(guò)程中某個(gè)階段莫名中斷，TCP協(xié)議會(huì)再次以相同的順序發(fā)送相同的數(shù)據(jù)包

斷開(kāi)一個(gè)TCP連接則需要“四次握手”：

第一次揮手：主動(dòng)關(guān)閉方發(fā)送一個(gè)FIN，用來(lái)關(guān)閉主動(dòng)方到被動(dòng)關(guān)閉方的數(shù)據(jù)傳送，也就是主動(dòng)關(guān)閉方告訴被動(dòng)關(guān)閉方：我已經(jīng)不 會(huì)再給你發(fā)數(shù)據(jù)了(當(dāng)然，在fin包之前發(fā)送出去的數(shù)據(jù)，如果沒(méi)有收到對(duì)應(yīng)的ack確認(rèn)報(bào)文，主動(dòng)關(guān)閉方依然會(huì)重發(fā)這些數(shù)據(jù))，但是，此時(shí)主動(dòng)關(guān)閉方還可 以接受數(shù)據(jù)。

第二次揮手：被動(dòng)關(guān)閉方收到FIN包后，發(fā)送一個(gè)ACK給對(duì)方，確認(rèn)序號(hào)為收到序號(hào)+1（與SYN相同，一個(gè)FIN占用一個(gè)序號(hào)）。

第三次揮手：被動(dòng)關(guān)閉方發(fā)送一個(gè)FIN，用來(lái)關(guān)閉被動(dòng)關(guān)閉方到主動(dòng)關(guān)閉方的數(shù)據(jù)傳送，也就是告訴主動(dòng)關(guān)閉方，我的數(shù)據(jù)也發(fā)送完了，不會(huì)再給你發(fā)數(shù)據(jù)了。

第四次揮手：主動(dòng)關(guān)閉方收到FIN后，發(fā)送一個(gè)ACK給被動(dòng)關(guān)閉方，確認(rèn)序號(hào)為收到序號(hào)+1，至此，完成四次揮手。

HTTP和HTTPS

HTTP協(xié)議通常承載于TCP協(xié)議之上，在HTTP和TCP之間添加一個(gè)安全協(xié)議層（SSL或TSL），這個(gè)時(shí)候，就成了我們常說(shuō)的HTTPS
默認(rèn)HTTP的端口號(hào)為80，HTTPS的端口號(hào)為443

HTTPS安全
因?yàn)榫W(wǎng)絡(luò)請(qǐng)求需要中間有很多的服務(wù)器路由器的轉(zhuǎn)發(fā)。中間的節(jié)點(diǎn)都可能篡改信息，而如果使用HTTPS，密鑰在你和終點(diǎn)站才有。https之所以比http安全，是因?yàn)樗胹sl/tls協(xié)議傳輸。它包含證書(shū)，卸載，流量轉(zhuǎn)發(fā)，負(fù)載均衡，頁(yè)面適配，瀏覽器適配，refer傳遞等。保障了傳輸過(guò)程的安全性

GET和POST的區(qū)別，何時(shí)使用POST

GET：一般用于信息獲取，使用URL傳遞參數(shù)，對(duì)所發(fā)送信息的數(shù)量也有限制，一般在2000個(gè)字符
POST：一般用于修改服務(wù)器上的資源，對(duì)所發(fā)送的信息沒(méi)有限制。
GET方式需要使用Request.QueryString來(lái)取得變量的值，而POST方式通過(guò)Request.Form來(lái)獲取變量的值，也就是說(shuō)Get是通過(guò)地址欄來(lái)傳值，而Post是通過(guò)提交表單來(lái)傳值。
然而，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：

無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）

向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒(méi)有數(shù)據(jù)量限制）

發(fā)送包含未知字符的用戶(hù)輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com