web前端面試基礎知識

HTML+CSS部分

瀏覽器內核介紹

常見的瀏覽器內核:
1) Trident內核:IE,30,搜狗等都在使用
2) Gecko 內核 :Netscape6及以上版本,火狐瀏覽器
3)Presto:Opera及以上
4)Webkit:Safari,Chrome等
5)EdgeHTML內核:：Microsoft Edge IE11本身的內核,刪除幾乎全部IE私有特性
複製代碼

html語義化的理解

1) HTML語義化讓頁面結構更加請求,瀏覽器在解析的時候,更加清晰
2) 即便在沒有css樣式的狀況下,也能正常顯示網頁的基本結構,有利於開發人員的閱讀
3)全部引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重,有利於SEO
4)是閱讀源代碼的人更容易的將網站分塊,便於閱讀、維護、理解
複製代碼

Doctype 做用?嚴格模式和混雜模式如何區分?有什麼意義

做用:Doctype用來聲明文檔類型,她的目的就是告訴瀏覽器,他應該以什麼樣的樣式解析文檔,只有肯定了文檔類型,文檔中的css和標籤才能別正確的解析出來

區別: 
    標準模式是指,瀏覽器按照W3C的標準解析瀏覽器的
    怪異模式是指瀏覽器按照本身的方式進行文檔的解析,因爲不一樣的瀏覽器廠商都有本身的解析方式,因此咱們稱之爲怪異模式
    
瀏覽器解析時,到底使用標準模式仍是怪異模式與文檔中聲明的類型有着直接的關係,若是文檔聲明瞭文檔類型,瀏覽器就會按照標準的形式進行解析,可是若是開發者沒有聲明文檔類型,會按照怪異模式進行解析
複製代碼

對web標準以及W3C的理解和認識

1. 標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率、使用外鏈 css 和 js 腳
本、結構行爲表現的分離，
2. 文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更普遍的設備所
訪問、更少的代碼和組件，
3. 容易維護、改版方便，不須要變更頁面內容、提供打印版本而不須要複製內容、提
高網站易用性 
複製代碼

盒模型的介紹

盒模型主要分爲標準盒模型(W3C)和怪異盒模型(IE)
主要區別:
複製代碼

總結:在w3c中定義了一個元素的寬度和高度,指的是元素 內容的寬度和高度,而在IE中,寬度和高度還包含了padding和border的值

常見的塊級元素和行內元素

塊級元素:

h1-h6標題標籤
    p段落標籤
    div塊級標籤
    ul 無序列表
    ol 有序列表
    li 列表項
複製代碼

行內元素:

a 超連接
    strong 強調語句
    i 傾斜標籤
    em 傾斜標籤
    del 刪除線標籤
    s 刪除線標籤
    ins文字下劃線
    u 文字下劃線
    span 文本標籤
複製代碼

行內塊元素:

img 圖片標籤
    input 輸入框
    td 單元格
複製代碼

樣式轉換:

display:block 行內元素轉爲塊級元素
 display:inline 塊級元素轉爲行內元素
 display:inline-block 轉爲內聯元素
 
複製代碼

知名的空標籤元素:

<br>換行
<hr>水平線
<img>圖片
<input>輸入框
<link>連接
<meta>元信息標籤
複製代碼

H5新增的標籤元素以及新特性,如何處理新標籤的瀏覽器兼容性問題

1. 拖拽釋放(Drag and drop)API ondrop
2.語義化更好的標籤
(header nav footer aside article section)
3.音頻視頻(audio video),若是瀏覽器不支持自動播放能夠設置一個muted靜態播放的屬性
4 Canvas(畫布):image是以對象的形式對圖像進行操做,Canvas是以畫布編碼的形式進行操做的
5. 地理(Geolocation)API
6.本地離線存儲localStorage長期存儲數據,瀏覽器關閉後數據不丟失
7.session的數據在瀏覽器關閉後自動刪除
8.表單控件,calendar date time email url ,search tel file number
9.新的技術webworker ,websocket
10.文件讀取
複製代碼

兼容性解決方法:
1)瀏覽器前綴
2)IE8/IE7/IE6支持經過document.createElement方法產生的標籤,能夠利用這一個新特性讓這些瀏覽器支持Html5新標籤,瀏覽器支持新標籤後,還須要添加默認的樣式
3)最好的方式是直接使用成熟的框架,使用最多的是Html5shim框架
4)使用條件註釋,判斷當前的瀏覽器是哪一個版本的,若是符合就執行

複製代碼

CSS3新增的新屬性

1. 顏色：新增 RGBA，HSLA 模式
2. 文字陰影（text-shadow）
3.邊框： 圓角（border-radius） 邊框陰影： box-shadow
4. 盒子模型：box-sizing
5.背景：background-size 設置背景圖片的尺寸 background-origin 設置背景圖片的
原點 background-clip 設置背景圖片的裁切區域，以」，」分隔能夠設置多背景，用於
自適應佈局
6.漸變：linear-gradient、radial-gradient
7. 過渡：transition，可實現動畫
8. 自定義動畫
9. 在CSS3 中惟一引入的僞元素是 ：selection.
10. 媒體查詢，多欄佈局
11. border-image
12.2D 轉換：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)
13. 3D 轉換
14.字體圖標
15.彈性佈局
複製代碼

link和@import的區別

區別:
1)@import是css提供的語法規則,只有導入樣式表的做用;link是html的標籤,不只能夠加載css文件,還能夠定義rel等屬性
2)加載頁面時,link標籤引入的css被同時加載,@import引入的css將在頁面加載完畢後被加載
3)link是html標籤,@import是css2.1出現的語法,存在兼容性問題
4)能夠經過js操做DOM,插入link標籤來改變樣式,因爲DOM方法是基於文檔的,沒法使用@import的方式插入樣式
複製代碼

css hack是什麼?

css hack就是針對不一樣的瀏覽器寫css代碼的過程
IE6:_color:red
IE7:+color:red
IE8:color:red
IE9: :root #test{color:red\9}
複製代碼

CSS選擇器及優先級

基礎選擇器:

通配符 * 0 0 0 0
標籤選擇器0 0 0 1
類選擇器 0 0 1 0
id選擇器0 1 0 0
行內樣式1 0 0 0
!important選擇器+00
複製代碼

複合選擇器

後代選擇器 ul li
子代選擇器 div >li
並集選擇器 p.one標籤+類名
相鄰選擇器 div+p必須是緊挨着的兩個元素
僞類選擇器::link

複製代碼

CSS的三大特性

三大特性:

層疊性:
1)、樣式衝突，遵循的原則是就近原則。 那個樣式離着結構近，就執行那個樣式。
2)、樣式不衝突，不會層疊
繼承性:
1) 子元素能夠繼承父元素的樣式
2) text-,font-,line-,color能夠被繼承
優先級:
    權重計算公式:
        通配符*0,0,0,0
        標籤選擇器0,0,0,1
        每一個類，僞類0,0,1,0
        每一個ID0,1,0,0
        每一個行內樣式 style=""1,0,0,0
        !important 無窮大   
    繼承的權重是0:
    若是子元素自身沒有樣式,會繼承父元素的樣式, 子元素的樣式和父元素的樣式發生衝突,永遠執行子元素自身的樣式, 父元素繼承的過來的樣式,權重爲0,
    權重是能夠疊加的
複製代碼

外邊距的合併

相鄰外邊距的合併(外邊距塌陷):

當上下相鄰的兩個塊元素相遇時，若是上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，
則他們之間的垂直間距不是margin-bottom與margin-top之和，而是二者中的較大者

解決方案:
1)能夠爲父元素定義1像素的上邊框或上內邊距。
2)能夠爲父元素添加overflow:hidden。
    
複製代碼

嵌套塊元素外邊距的合併:

對於兩個嵌套關係的塊元素，若是父元素沒有上內邊距及邊框，則父元素的上邊距會與子元素的上外邊距合併，合併以後的外邊距爲二者之間的較大值，合併到父元素身上，即便父元素的上外邊距爲0，也會發生合併

解決方案:
1能夠爲父元素設置定義一個1像素的上邊框或者是上內邊距
二、能夠爲父元素添加overflow：hidden觸發bfc塊級格式化上下文，獨立佈局區域，不會受到外部因素的干擾
複製代碼

rgba()和opacity的區別

1)rgba()和opacity都能實現透明效果,可是最大的不一樣時opacity做用域元素,以及元素內的全部內容的透明度
2)rgba()只做用域元素的顏色或者是其背景色,設置(rgba透明的元素的子元素不會繼承透明效果)
複製代碼

浮動元素的特色

一、浮動的元素會脫離標準流，不佔據原來的位置
二、浮動可使元素一行顯示
浮動只能浮動到父元素的左邊和右邊。浮動元素會受到父元素padding值得約束
四、浮動元素頂對齊
五、浮動元素只能影響下邊的元素，不會影響上邊的元素。
六、浮動元素有了行內塊的顯示特色
塊元素浮動以後又不設置寬度的時候呀不會默認父元素的寬度了，默認的寬高爲0，內容會撐開寬高，行內元素浮動以後，能夠設置寬高了
七、當文字，行內元素，行內塊元素遇到浮動元素，不會跑到浮動元素的底下，會環繞浮動元素
    1)、浮動元素有了行內塊的顯示特色
    	塊元素浮動以後又不設置寬度的時候呀不會默認父元素的寬度了，默認的寬高爲0，內容會撐開寬高，行內元素浮動以後，能夠設置寬高了
    2)、當文字，行內元素，行內塊元素遇到浮動元素，不會跑到浮動元素的底下，會環繞浮動元素
複製代碼

清除浮動的方法

1)手動定義父級元素的height
二、使用額外標籤法，一般是加<div style=」clear:both」></div>
優缺點:
    優勢：通俗易懂，書寫方便
    缺點：添加許多無心義的標籤，結構化較差，會形成代碼的冗餘
三、使用後僞元素法：
.clearfix:after {
    content:"";
    height:0; 
    display:block;
    clear:both;
    visibility:hidden;
}	
.clearfix {*zoom: 1;}表明網站：百度、淘寶網、網易
     優勢:符合閉合浮動思想  結構語義化正確
     缺點：因爲IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
四、使用before和after雙僞元素清除浮動.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  
}
.clearfix:after {
   clear:both;
}
.clearfix {
  *zoom:1;
}表明網站，小米，網易
優缺點:
    優勢：代碼更簡潔
    缺點：因爲IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
複製代碼

定位的方法和特色

position常見的四個屬性值,relative,absolute,fixed,static通常都要配合left,top,right,以及bottom的屬性使用 
    1)static:默認位置,設置爲static的元素,它始終會處於頁面流基於的位置(static元素會忽略任何top,bottom,left,right聲明)
    2)relative:位置被設置爲relative,可將其移至相對於正常位置的地方,意思就是若是設置了relative值,那麼,他的偏移top,right,bottom,left的值都是以它原來的位置爲基準偏移的,無論其餘元素會怎麼樣,
    注意relative移動的元素仍然在他原來的位置佔空間
    3)absolute設置爲absolute的元素,可定位於相對於他包含它的元素的指定座標,意思是若是他的父容器設置了position屬性,而且position的屬性值是absolute或者是relative,那麼就會依據父容器進行偏移,若是其父容器沒有設置position屬性,
    那麼偏移是以body爲依據的,注意設置absolute屬性的元素在標準流中不佔位置
    4)fixed位置被設置爲fixed的元素,可定義與相對於瀏覽器可視窗口的指定座標,不論窗口是否滾動,元素都會留在那個位置,他始終是以body爲依據的,
    注意設置fixed屬性在標準流中不佔位置
複製代碼

盒子居中顯示的方法

能夠設置寬高的狀況下:

方法一:

子絕父相
.p{
    width:200px;
    height:200px;
    background:#f00;
    position:relative;
}
.s{
    width:100px;
    height:100px;
    background:#00f;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}
複製代碼

方法二:

.p{
    width:200px;
    height:200px;
    background:#f00;
    position:relative;
}
.s{
    width:100px;
    height:100px;
    background:#00f;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-50px;
    mrigin-top:-50px;
}
複製代碼

不設置寬高的狀況下: 方法一:

.p{
    width:200px;
    height:200px;
    background:#f00;
    position:relative;
}
.s{
    width:100px;
    height:100px;
    background:#00f;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
複製代碼

方法二:

.p{
    display:flex;
    justify-content:center;
    align-items:center;
}
複製代碼

方法三:

.p{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}
.s{
    display:inline-block;
}
複製代碼

CSS3動畫及與js動畫的區別

css3動畫:

定義動畫
 @keyframes move {
      /* 動畫序列、又叫時間節點 */
      0% {
        transform: translate(0, 0);
      }
      50% {
        transform: translate(800px, 0);
      }
      100% {
        /* transform:基於上一個狀態的變化 */
        transform: translate(800px, 500px);
      }
    }
    
調用動畫:
 div {
      /* 調用 */
      animation-name: dong_hua;
      /* 動畫執行時間 */
      animation-duration: 2s;
    }
複製代碼

區別:

1 功能涵蓋面,js比css3大
    1)定義動畫的過程@keyframes不支持遞歸定義,若是有多種相似的動畫過程,須要調節多個參數來生成的話,將會有很大的冗餘,而js則自然能夠以一套函數實現多個不一樣動畫過
    2)時間尺度上,@keyframes的動畫粒度粗,而js的動畫粒度控制能夠很細
    3)css3動畫裏被支持的時間函數很是少,不夠靈活
    4)以現有的接口,css3沒法作到支持兩個以上的狀態轉化
2.實現/重構難度不一,css比js更簡單,性能調優方向固定
3.對個幀速表現很差的低瀏覽器版本,css3能夠作到天然降級,而js須要撰寫額外的代碼
4.css動畫有自然事件支持(transitionEnd,animationEnd),可是他們都須要針對瀏覽器加前綴.js則須要本身寫事件
5.css有兼容性問題,而js大多數沒有兼容性問題
複製代碼

iframe的做用

iframe是用來在網頁中插入第三方頁面，早期的頁面使用 iframe主要是用於導航欄
這種不少頁面都相同的部分，這樣能夠在切換頁面的時候避免重複下載。

優勢：
    便於修改，模塊分離，像一些信息管理系統會用到。
    但如今基本上不推薦使用。除非特殊須要，通常不推薦使用。
缺點：
    （1）iframe 的建立比通常的DOM 元素慢了 1-2個數量級
    （2）iframe 標籤會阻塞頁面的加載，若是頁面的 onload事件不能及時觸發，
    會讓用戶以爲網頁加載很慢，用戶體驗很差.在 Safari 和Chrome 中能夠經過js 動態設置
    iframe 的src 屬性來避免阻塞.
    (3)） iframe對於SEO不友好，替代方案通常就是動態語言的Incude機制和ajax
動態填充內容等.

複製代碼

描述一下CSS中的漸進加強,優雅降級之間的區別?

優雅降級和漸進加強印象中是隨着css3 流出來的一個概念。因爲低級瀏覽器不支持
css3，但 css3 的效果又太優秀不忍放棄，因此在高級瀏覽中使用 css3 而低級瀏覽器只保證
最基本的功能。咋一看兩個概念差很少，都是在關注不一樣瀏覽器下的不一樣體驗，關鍵的區別
是他們所側重的內容，以及這種不一樣形成的工做流程的差別。

「優雅降級」觀點認爲應該針對那些最高級、最完善的瀏覽器來設計網站。
「漸進加強」觀點則認爲應關注於內容自己。

複製代碼

對BFC的理解有哪些?

1）定義：
    BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，
    只有 Block-level box 參與，它規定了內部的Block-level Box 如何佈局，而且與這個區域
    外部絕不相干。
佈局規則：
    A. 內部的Box 會在垂直方向，一個接一個地放置。
    B. Box垂直方向的距離由 margin決定。屬於同一個 BFC的兩個相鄰 Box的 margin 會發
    生重疊。
    C. 每一個元素的 margin box 的左邊，與包含塊border box 的左邊相接觸(對於從左往右的
    格式化，不然相反)。即便存在浮動也是如此。
    D. BFC 的區域不會與 float box 重疊。
    E. BFC 就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反
    之也如此。
    F. 計算 BFC 的高度時，浮動元素也參與計算。
3）哪些元素會生成 BFC：
    A. 根元素
    B. float 屬性不爲 none
    C. position爲 absolute 或 fixed
    D. display爲inline-block， table-cell， table-caption， flex， inline-flex
    F. overflow 不爲 visible

複製代碼

CSS reset和CSS normalize.css的區別

Reset 重置瀏覽器的 css 默認屬性 ，瀏覽器的品種不一樣，樣式不一樣，而後重置，讓他們統
一。（暴力的，強制的）
  1)Normalize.css是 cssreset 的替代方案，保護有用的瀏覽器默認樣式而不是徹底去
掉它們（溫和的，根據瀏覽器特性的）
2) 通常化的樣式：爲大部分HTML元素提供
3) 修復瀏覽器自身的 bug並保證各瀏覽器的一致性
4) 優化 CSS 可用性：用一些小技巧
5) 解釋代碼：用註釋和詳細的文檔來。

複製代碼

常見的兼容性問題分析及解決方案

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

二、瀏覽器默認的margin 和padding不一樣。解決方案是加一個全局的{margin： 0;padding：
0;}來統一。

三、IE6雙邊距bug：塊屬性標籤float 後，又有橫行的margin狀況下，在 ie6 顯示 margin
比設置的大。浮動 ie 產生的雙倍距離 #itcast{ float：left; width：10px; margin：0 0 0
100px;} 這種狀況之下 IE會產生 20px 的距離，解決方案是在float 的標籤樣式控制中加入
_display：inline;將其轉化爲行內屬性。( 「_」 這個符號只有ie6 會識別)

四、 IE下,可使用獲取常規屬性的方法來獲取自定義屬性,
也可使用 getAttribute()獲取自定義屬性;
Firefox 下,只能使用 getAttribute()獲取自定義屬性。
解決方法：統一經過 getAttribute()獲取自定義屬性。

五、 IE下,even對象有 x,y屬性,可是沒有 pageX,pageY 屬性;
Firefox 下,event 對象有pageX,pageY 屬性,可是沒有 x,y屬性。
解決方法：（條件註釋）缺點是在 IE瀏覽器下可能會增長額外的 HTTP 請求數。

六、 Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,
可經過加入 CSS 屬性 -webkit-text-size-adjust：none; 解決。

七、超連接訪問事後hover 樣式就不出現了 被點擊訪問過的超連接樣式不在具備 hover 和
active了。解決方法是：改變CSS 屬性的排列順序：L-V-H-A 、 a： link {} a：visited{}a：
hover {} a：active {}

複製代碼

px em rem三者之間的區別

1）px 像素（Pixel）。絕對單位。像素px是相對於顯示器屏幕分辨率而言的，是一
個虛擬長度單位，是計算機系統的數字化圖像長度單位，若是 px要換算成物理長度，須要
指定精度 DPI。

2）em是相對長度單位，相對於當前對象內文本的字體尺寸。如當前對行內文本的字
體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小，因
此並非一個固定的值。

3）rem是 CSS3新增的一個相對單位（root em，根em），使用 rem 爲元素設定字
體大小時，仍然是相對大小，但相對的只是HTML根元素。

4）區別： IE沒法調整那些使用 px做爲單位的字體大小，而em 和rem能夠縮放， rem
相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既
能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖
反應。目前，除了 IE8及更早版本外，全部瀏覽器均已支持rem。

複製代碼

css sprite如何使用?

Css 精靈圖，把一堆小的圖片整合到一張大的圖片（png）上，減輕服務器對圖片的請
求數量。再利用css 的「background-image」、「background-repeat」、
「background-position」的組合進行背景定位

複製代碼

src和href的區別

1)src（source）指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在
請求 src資源時會將其指向的資源下載並應用到文檔中，如js 腳本，img圖片和iframe 等
元素。

2)當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行
完畢，相似於將所指向資源嵌入當前標籤內。

3)href（hypertext reference/超文本引用）指向網絡資源所在位置，創建和當前元素（錨點）
或當前文檔（連接）之間的連接，若是咱們在文檔中添加<link href="common.css" rel="stylesheet"/>那麼瀏覽器會識別該文檔爲 css 文件，就會並行下載資源而且不會中止
對當前文檔的處理。

複製代碼

overflow的屬性值

1)visible:默認值,內容不會被裁剪,會呈如今元素框以外
2)Hidden:內容會被修剪,而且其他內容是不可見的
3)Scroll內容會被修剪,可是瀏覽器會顯示滾動條以便查看其他內容
4)Inherit規定應該從父元素繼承overflow屬性的值
複製代碼

網頁重繪與重排以及重構

網頁重繪:

重繪是一個元素外觀的改變所觸發的瀏覽器行爲,例如改變visibility outline 背景色等屬性,瀏覽器會根據元素的新屬性從新繪製,使元素呈現新的外觀,重繪不會帶來從新佈局,並不必定伴隨着重排
複製代碼

網頁重排:

重排是一種更明顯的狀況,能夠理解爲DOM樹從新渲染計算,常見的網頁重排操做有:
    1)DOM元素的幾何屬性變化
    2)DOM樹的變化
    3)獲取某些元素
    4)此外,改變元素的一些樣式,如調整瀏覽器窗口大小等都發生重排
注意:重排對性能有很大的影響
複製代碼

網頁重構:

頁面重構:
編寫CSS,讓頁面結構更加合理化,提高用戶體驗,實現良好的頁面效果和提高性能
網站重構:
在不改變外部行爲的狀況下,簡化結構,添加可讀性,而在網站前端保持一致的行爲,也就是說在不改變UI的狀況下對網站進行優化,在擴展的同時保持UI一致

對傳統的網站重構:
    1)表格佈局改成div+css佈局
    2)使網站前端兼容性於現代瀏覽器(針對不合規範的css,如對IE6有效的)
    3)對於移動平臺的優化
    4)針對SEO進行優化
深層次的網站重構:
    1)減小代碼間的耦合
    2)讓代碼保持彈性
    3)嚴格按規範保持彈性
    4)設計可擴展的API
    5)代替舊有的框架,語言
    6)加強用戶體驗,優化響應速度
速度的優化重構:
    壓縮js,css,image等前端資源
    程序的性能優化
    採用CDN來加速資源加載
    對於js DOM的優化
    HTTP服務器的文件緩存

複製代碼

多個域名存儲網站資源會更有效的緣由

1)CDN緩存方便
2)突破瀏覽器併發限制
3)節約cookie帶寬
4)節約主域名的鏈接數,優化頁面響應速度
5)防止沒必要要的安全問題
複製代碼

去除圖片底邊三像素的方法

1)設置父元素的font-size的字號爲0
2)改變圖片的display屬性display: block(定位也能夠,只要脫標就會消失);  
3)給圖片設置垂直對齊方式virtical-align: middle;//設置爲任意值均可以  

複製代碼

移動端

視口的概念及相關知識

1.三種視口: 移動端瀏覽器一般寬度是 240px~640px，而大多數爲 PC 端設計的網站寬度至少爲 800px，若是仍以瀏覽器窗口做爲視口的話，網站內容在手機上看起來會很是窄。

所以，引入了佈局視口、視覺視口和理想視口三個概念，使得移動端中的視口與瀏覽器寬度再也不相關聯。

視口主要分爲三種:佈局視口(客戶端顯示的大小),視覺視口(用戶看到的大小),理想視口(視覺分辨率的值), 移動端視口元標籤:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">
複製代碼

viewport 標籤只對移動端瀏覽器有效，對 PC 端瀏覽器是無效的
當縮放比例爲 100% 時，dip 寬度 = CSS 像素寬度 = 理想視口的寬度 = 佈局視口的寬度
單獨設置 initial-scale 或 width 都會有兼容性問題，因此設置佈局視口爲理想視口的最佳方法是同時設置這兩個屬性
即便設置了 user-scalable = no，在 Android Chrome 瀏覽器中也能夠強制啓用手動縮放
複製代碼

flex佈局的相關知識總結

display:flex設置爲彈性盒子,設置了盒子以後浮動塊元素都沒有了 主軸身上的屬性:

1) flex-direction：確認主軸方向
	flex-direction:row
		主軸方向是行默認是從左到右
	flex-direction:row-reverse
		主軸方向是行從右到左
	flex-direction:column
		主軸方向是列默認從上到下
	flex-direction:column-reverse
		主軸方向是列從下到上
2) justify-content：控制主軸上（默認是x）的元素對齊方式，相似word中的左對齊、右對齊等相關屬性
	justify-content:flex-start
		默認值使從頭開始，若是主軸是x軸，則從左到右
	justify-content:flex-end
		從主軸的尾部開始排列
	justify-content:center
		在主軸居中對齊（若是主軸是x軸則水平居中）
	justify-content:space-around
		平分剩餘空間，左右兩邊也有空白
	justify-content:space-between
		先貼兩邊，再平分剩餘空間，兩邊沒有空白

3)flex-wrap：控制子元素是否換行
		flex-wrap：nowrap默認值
			默認不換行，子元素的總寬機上超過父親的寬度，不換行
		flex-wrap：wrap
4)flex-flow:複合屬性，設置主軸與換行
		flex-flow:row wrap;
複製代碼

側軸屬性:

1)align-items：子元素排列方向
	flex-start默認值從上到下
	flex-end 從下到上
	center擠在一塊兒垂直居中
	stretch拉伸
		這裏的拉伸的前提是子元素沒有高度，在側軸方向會拉伸，若是子元素自身有高度，不會拉伸，會按照自己的高度顯示

2)align-content設置子項在側軸上的排列方式這種方式與align-items的區別是設置換行，這種才生效
	align-content：flex-start 
		默認從側軸的頭部開始，默認側軸是Y軸，也就是從上到下垂直排列
	align-content：flex-end
		默認從側軸的底部開始，默認側軸是Y軸，也就是從下到上垂直排列
	align-content：center
		在側軸中間顯示
	align-content：space-between
		子項先在側軸的兩端緊貼着邊，再平分剩餘空間
	align-content：space-around
		設置子元素平分父元素高度，設置以後兩邊還有空白
複製代碼

移動端適配的解決方法

1.流式佈局:

流式佈局是：頁面元素的寬度按照屏幕分辨率進行適配調整，但總體佈局不變。表明做柵欄系統（網格系統）

網頁中主要的劃分區域的尺寸使用百分數（搭配min-、max-屬性使用）

佈局特色：屏幕分辨率變化時，頁面裏元素的大小會變化而但佈局不變。

缺點明顯：主要的問題是若是屏幕尺度跨度太大，那麼在相對其原始設計而言太小或過大的屏幕上不能正常顯示。由於寬度使用%百分比定義，可是高度和文字大小等大都是用px來固定，因此在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，可是高度、文字大小仍是和原來同樣（即，這些東西沒法變得「流式」），顯示很是不協調。

複製代碼

2.flex佈局

css3引入的，flex佈局；優勢在於其容易上手，根據flex規則很容易達到某個佈局效果，然而缺點是：瀏覽器兼容性比較差，只能兼容到ie9及以上；
複製代碼

3.自適應佈局

自適應佈局的特色是分別爲不一樣的屏幕分辨率定義佈局，即建立多個靜態佈局，每一個靜態佈局對應一個屏幕分辨率範圍。改變屏幕分辨率能夠切換不一樣的靜態局部（頁面元素位置發生改變），但在每一個靜態佈局中，頁面元素不隨窗口大小的調整發生變化。能夠把自適應佈局看做是靜態佈局的一個系列。

佈局特色：屏幕分辨率變化時，頁面裏面元素的位置會變化而大小不會變化。
複製代碼

本身寫一套前端適**配的方案

可使用rem佈局加上響應式佈局:

對於響應式佈局,核心就是媒體查詢,而咱們常說的rem是相對於根元素的字體大小而言的,咱們能夠利用媒體查詢劃分各個檔位,好比說如今市面上常見的方式分辨率大小:
     /* - 檔位1：w<540px w <=539px; */
    /* @media screen and (max-width:539px) {
      body {
        background-color: red;
      }
    } */
    
    @media screen and (min-width:0) {
      body {
        background-color: red;
      }
    }
    /* - 檔位2 : 540px<=w and w<640px; */
    /* @media screen and (min-width:540px) and (max-width:639px) {
      body {
        background-color: blue;
      }
    } */
    
    @media screen and (min-width:540px) {
      body {
        background-color: blue;
      }
    }
    /* - 檔位3 : 640px<=w */
    
    @media screen and (min-width:640px) {
      body {
        background-color: green;
      }
    }
而後再在各個檔位上把設計師給出的設計稿按照750的方式進行佈局,在每一個分隔段都是這樣寫,最後根據rem根元素的大小進行計算,計算方式就是:

    - 準備各個檔位下的rem：提早準備好各個檔位下的HTML 的font-size大小；
    - 拿到當前設計稿屏幕尺寸對應的rem：由於我如今是750px的設計稿，因此能夠獲得750px這個尺寸屬於的檔位下的HTML 的font-size大小，也就是750px設計稿下的1rem值。這裏咱們一般把屏幕分紅是10份,那麼10份(只是爲了好計算,也能夠是其餘的)就是,每一份就是1rem.因此這裏1rem=750px/10=75px;因此這裏要算一個元素寬爲82px的元素寬的rem值,1px=1/75rem;82px=82rem/75
    - 計算比例：把頁面剛纔全部的元素的PX值替換爲 rem 比例值；（82px=82rem/75）;
複製代碼

bootstrap響應式佈局的原理

響應式佈局的核心就是媒體查詢,根據各個檔位下頁面的佈局進行設計,除此以外,爲了應用響應式 Web 設計您須要建立一個包含適應各類設備尺寸樣式的 CSS。一旦頁面在特定的設備上加載，該頁面上使用了各類字體和 Web 開發技術，好比媒體查詢（Media Queries），此時，會先檢測設備的視口大小，而後加載特定於設備的樣式。

複製代碼

聖盃佈局以及雙飛翼佈局解決方案

左右固定中間自適應:

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .middle,
        .left,
        .right {
            position: relative;
            float: left;
            min-height: 130px;
        }
        .container {
            padding: 0 220px 0 200px;
            overflow: hidden;
        }
        .left {
            margin-left: -100%;
            left: -200px;
            width: 200px;
            background: red;
        }
        .right {
            margin-left: -220px;
            right: -220px;
            width: 220px;
            background: green;
        }
        .middle {
            width: 100%;
            background: blue;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div class='container'>
        <div class='middle'></div>
        <div class='left'></div>
        <div class='right'></div>
    </div>
</body>

複製代碼