html和css的面試知識點有哪些

這篇文章給大家分享的是有關html和css的面試知識點有哪些的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

CSS優先級算法

優先級就近原則，同權重情況下樣式定義最近者為準
載入樣式以最后載入的定位為準
優先級為: !important > id > class > tag important 比 內聯優先級高
important聲明比js的優先級要高

第一等：代表內聯樣式，如: style=””，權值為1000。
第二等：代表ID選擇器，如：#content，權值為0100。
第三等：代表類，偽類和屬性選擇器，如.content，權值為0010。
第四等：代表類型選擇器和偽元素選擇器，如p p，權值為0001。
通配符、子選擇器、相鄰選擇器等的。如*、>、+,權值為0000。
繼承的樣式沒有權值。

css定義的權重

/ 以下是權重的規則：標簽的權重為1，class的權重為10，id的權重為100，以下/// 例子是演示各種定義的權重值：

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

// 如果權重相同，則最后定義的樣式會起作用，但是應該避免這種情況出現

CSS3新增偽類

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

:after          在元素之前添加內容,也可以用來做清除浮動。
:before         在元素之后添加內容
:enabled        
:disabled       控制表單控件的禁用狀態。
:checked        單選框或復選框被選中

居中一個浮動元素

給div設置一個寬度，然后添加margin:0 auto屬性

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

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

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

讓絕對定位的div居中

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

CSS3有新特性

新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節點）
圓角 （border-radius:8px）
多列布局 （multi-column layout）
陰影和反射 （ShadowReflect）
文字特效 （text-shadow、）
文字渲染 （Text-decoration）
線性漸變 （gradient）
旋轉 （transform）
增加了旋轉,縮放,定位,傾斜,動畫，多背景
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;
媒體查詢 @media (max-width: 480px) {.box: {column-count: 1;}}
個性化字體 @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;
轉換
    旋轉 transform: rotate(20deg);
    傾斜 transform: skew(150deg, -10deg);
    位移 transform: translate(20px, 20px);
    縮放 transform: scale(.5);
平滑過渡 transition: all .3s ease-in .1s;
動畫 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

用純CSS創建一個三角形

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

瀏覽器的兼容性

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

2. 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一

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

4. IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性.Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性

BFC

塊級格式化上下文（內部元素不會影響外部元素）

渲染規則：
1.bfc元素的垂直方向邊距發生重疊
2.bfc區域不會與浮動元素重疊
3.獨立容器
4.計算bfc高度時，浮動元素也會參與計算

創建bfc：
1.overflow
2.浮動不為none
3.position不是static
4.display與table有關

display:inline-block 什么時候會顯示間隙

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

清除浮動

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

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

盒子模型

盒子模型構成：內容(content)、內填充(padding)、 邊框(border)、外邊距(margin)
IE8及其以下版本瀏覽器，未聲明 DOCTYPE，內容寬高會包含內填充和邊框，稱為怪異盒模型(IE盒模型)
標準(W3C)盒模型：元素寬度 = width + padding + border + margin
怪異(IE)盒模型：元素寬度 = width + margin
標準瀏覽器通過設置 css3 的 box-sizing: border-box 屬性，觸發“怪異模式”解析計算寬高

box-sizing: content-box; // 默認的標準(W3C)盒模型元素效果
box-sizing: border-box; // 觸發怪異(IE)盒模型元素的效果
box-sizing: inherit; // 繼承父元素 box-sizing 屬性的值

繼承

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

隱藏元素的方法

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

rgba() 和 opacity

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

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

當前樣式：getComputedStyle(el, null) VS el.currentStyle
事件對象：e VS window.event
鼠標坐標：e.pageX, e.pageY VS window.event.x, window.event.y
按鍵碼：e.which VS event.keyCode
文本節點：el.textContent VS el.innerText

li與li之間有看不見的空白間隔

li排列受到中間空白(回車/空格)等的影響，因為空白也屬于字符，會被應用樣式占據空間，產生間隔
解決辦法：在ul設置設置font-size=0,在li上設置需要的文字大小

px、em

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

FOUC(Flash of Unstyled Content)

當使用 @import 導入 CSS 時，會導致某些頁面在 IE 出現奇怪的現象： 沒有樣式的頁面內容顯示瞬間閃爍，這種現象稱為“文檔樣式短暫失效”，簡稱為FOUC
產生原因：當樣式表晚于結構性html加載時，加載到此樣式表時，頁面將停止之前的渲染。
等待此樣式表被下載和解析后，再重新渲染頁面，期間導致短暫的花屏現象。
解決方法：使用 link 標簽將樣式表放在文檔 head

CSS優化、提高性能

多個css合并，盡量減少HTTP請求
將css文件放在頁面最上面
移除空的css規則
避免使用CSS表達式
選擇器優化嵌套，盡量避免層級過深
充分利用css繼承屬性，減少代碼量
抽象提取公共樣式，減少代碼量
屬性值為0時，不加單位
屬性值為小于1的小數時，省略小數點前面的0
css雪碧圖

全屏滾動

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

響應式設計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標簽上四個偽類的執行順序

link > visited > hover > active

Chrome支持小于12px 的文字

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

TCP傳輸的三次握手四次揮手策略

為了準確無誤地把數據送達目標處，TCP協議采用了三次握手策略。用TCP協議把數據包送出去后，TCP不會對傳送 后的情況置之不理，它一定會向對方確認是否成功送達。握手過程中使用了TCP的標志：SYN和ACK

發送端首先發送一個帶SYN標志的數據包給對方。接收端收到后，回傳一個帶有SYN/ACK標志的數據包以示傳達確認信息。 最后，發送端再回傳一個帶ACK標志的數據包，代表“握手”結束。 若在握手過程中某個階段莫名中斷，TCP協議會再次以相同的順序發送相同的數據包

斷開一個TCP連接則需要“四次握手”：

第一次揮手：主動關閉方發送一個FIN，用來關閉主動方到被動關閉方的數據傳送，也就是主動關閉方告訴被動關閉方：我已經不 會再給你發數據了(當然，在fin包之前發送出去的數據，如果沒有收到對應的ack確認報文，主動關閉方依然會重發這些數據)，但是，此時主動關閉方還可 以接受數據。

第二次揮手：被動關閉方收到FIN包后，發送一個ACK給對方，確認序號為收到序號+1（與SYN相同，一個FIN占用一個序號）。

第三次揮手：被動關閉方發送一個FIN，用來關閉被動關閉方到主動關閉方的數據傳送，也就是告訴主動關閉方，我的數據也發送完了，不會再給你發數據了。

第四次揮手：主動關閉方收到FIN后，發送一個ACK給被動關閉方，確認序號為收到序號+1，至此，完成四次揮手。

HTTP和HTTPS

HTTP協議通常承載于TCP協議之上，在HTTP和TCP之間添加一個安全協議層（SSL或TSL），這個時候，就成了我們常說的HTTPS
默認HTTP的端口號為80，HTTPS的端口號為443

HTTPS安全
因為網絡請求需要中間有很多的服務器路由器的轉發。中間的節點都可能篡改信息，而如果使用HTTPS，密鑰在你和終點站才有。https之所以比http安全，是因為他利用ssl/tls協議傳輸。它包含證書，卸載，流量轉發，負載均衡，頁面適配，瀏覽器適配，refer傳遞等。保障了傳輸過程的安全性

GET和POST的區別，何時使用POST

GET：一般用于信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，一般在2000個字符
POST：一般用于修改服務器上的資源，對所發送的信息沒有限制。
GET方式需要使用Request.QueryString來取得變量的值，而POST方式通過Request.Form來獲取變量的值，也就是說Get是通過地址欄來傳值，而Post是通過提交表單來傳值。
然而，在以下情況中，請使用 POST 請求：

無法使用緩存文件（更新服務器上的文件或數據庫）

向服務器發送大量數據（POST 沒有數據量限制）

發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

感謝各位的閱讀！關于“html和css的面試知識點有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！