2020-12-17 html、css面試題3: 水平垂直居中，左右固定中間自適應 三欄佈局，靜態佈局、自適應佈局、流式佈局、響應式佈局、彈性佈局，IE中常見的相容性問題，清空陣列的方法

11.如何讓一個盒子水平垂直居中

1、 如何讓一個盒子水平垂直居中

①定位：（常用方法,推薦）
position:absolute;
position:relative;
left:值;
top:值;
②display:table-cell;
③外邊距：margin-left:值;
margin-top:值;
④margin:auto;（不相容低版本的IE瀏覽器）
⑤彈性盒模型：display:flex;
justify-content:conter;
align-itens:center;
⑥用transform的屬性translate平移，不僅能實現絕對居中同樣的效果，也支援聯合可變高度方式使用。
使用top:50%; left:50%;時，是以盒子的左上角為原點定位，是左上角的原點居中，但是元素本身並不居中。
transform：translate(-50%，-50%):分別向左向上移動自身長寬的50%，使其位於中心。
transform: translate(-50%,-50%)導致的畫素模糊問題解決辦法：
  /** 這 0.5px加或者減都可以 */
transform: translat(calc(-50% + 0.5 px), calc(-50% + 0.5 px))；
⑦用calc計算

12.左右固定中間自適應 三欄佈局（聖盃、雙飛翼、彈性盒子…）

聖盃佈局：

缺點：當皮膚的main部分比兩邊的子皮膚寬度小的時候，佈局就會亂掉。

雙飛翼佈局:

與聖盃佈局很像，也是全部往左浮動，但是在內容div裡再巢狀一個div，設定子div的margin為左右div預留位置，左右div只設定margin負值即可實現。
 相似點：
1.給main設定width: 100%，佔滿視窗，從而自適應。
2.為了形成在一行三欄佈局，給三個方塊都加上浮動float: left;（注意清除浮動，因為浮動會導致父元素高度塌陷）
3.利用負margin-left把三個方塊拉到一行，margin-left負多少就是往左移動多少，左邊需要相對父元素的-100%，移到父元素的最左邊，右邊只需要移動本身寬度的負值，即可在最右邊。
 區別：
1.雙飛翼佈局給主皮膚新增了一個父標籤用來通過margin給子皮膚騰出空間。
2.聖盃採用的是padding，而雙飛翼採用的margin，解決了聖盃佈局的問題。
3.雙飛翼佈局不用設定相對佈局，以及對應的left和right值。

flex佈局

思路：順著主軸依次放3列，內容在最前，通過order控制顯示順序，通過flex-grow讓中間佔據全部剩餘空間，通過flex-basis設定左、右div的寬度。
缺點：相容性。

13.靜態佈局、自適應佈局、流式佈局、響應式佈局、彈性佈局（rem、em）

靜態佈局（Static Layout）

 即傳統Web設計，對於PC設計一個Layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；
 對於移動裝置，單獨設計一個佈局，使用不同的域名如wap.或m.。

自適應佈局（Adaptive Layout）

自適應佈局（Adaptive）的特點是分別為不同的螢幕解析度定義佈局。佈局切換時頁面元素髮生改變，但在每個佈局中，頁面元素不隨視窗大小的調整發生變化。
你可以把自適應佈局看作是靜態佈局的一個系列。

流式佈局（Liquid Layout）

流式佈局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照螢幕進行適配調整，主要的問題是如果螢幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的螢幕上不能正常顯示。

響應式佈局（Responsive Layout）

分別為不同的螢幕解析度定義佈局，同時，在每個佈局中，應用流式佈局的理念，即頁面元素寬度隨著視窗調整而自動適配。
可以把響應式佈局看作是流式佈局和自適應佈局設計理念的融合

彈性佈局（rem/em佈局）

包裹文字的各元素的尺寸採用em/rem做單位，可以使包裹文字的元素隨著文字的縮放而縮放；而頁面的主要劃分割槽域的尺寸仍使用百分數或px做單位。
css 中的 px 是css設定自己大小，元素長寬的單位
瀏覽器中em和px關係是 **16px** = **1em** 
rem是根據根節點，也就是html預設字型大小來設定大小的。所以改變了html根

節點字型大小，em的預設值也會改變。向上面html設定為12px，那麼**1rem=12px**了
rem不是子節點繼承父節點大小，而是所有的節點都繼承html節點，所有當html節點設定成10px時候，所有整個頁面1rem就等於10px了

1.靜態佈局：

**佈局特點：**寬高固定

2.自適應佈局：

**佈局特點：**不同解析度下，頁面元素位置變化，大小不變

**實現方法:**針對不同解析度建立對應的樣式表，使用 @media 媒體查詢給不同尺寸的裝置切換不同的樣式

**缺點：**IE8及以下不支援媒體查詢；只能相容主流解析度

3.流式佈局（百分比佈局）:

**佈局特點：**不同的解析度下顯示相同的排版；高度固定，寬度自適應

**實現方法:**網頁中主要區域的尺寸使用百分比；

**缺點：**大螢幕上元素被拉長，但是文字，高度還是固定大小，不協調

經典流式佈局：左側固定，右側自適應；兩側固定，中間自適應

4.彈性佈局（rem/em佈局）：

**佈局特點：**頁面元素寬度，高度，字型大小會跟著螢幕大小縮放

**實現方法:**使用js監聽當前螢幕大小，設定html的字型大小

**缺點：**IE678不相容；需要計算；

5.響應式佈局：一個網站能夠相容多個終端——而不是為每個終端做一個特定的版本

**佈局特點：**每個螢幕解析度下面會有一個佈局樣式，即元素位置和大小都會變，響應式設計的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、手錶等等）都能顯示出令人滿意的效果

**實現方法：**媒體查詢(css3中的Media Query)+流式佈局

媒介查詢：通過不同的媒介型別和條件定義樣式表規則，媒介查詢讓CSS可以更精確作用於不同的媒介型別和同一媒介的不同條件。

**優點：**適應pc和移動端

1.面對不同解析度裝置靈活性強

2.能夠快捷解決多裝置顯示適應問題

**缺點：**要匹配足夠多的螢幕大小，工作量大，設計也需要多個版本

1.會出現隱藏無用的元素

2.載入時間加長

14.說一下在IE（IE6）中常見的幾個相容性問題

一、頭文件所引起的怪異盒模型問題

產生條件：不設定文件宣告，頁面就會陷入怪異盒模型解析模式

解決方法：加入文件宣告

二、IE6下雙邊距BUG

產生條件：在IE6下，塊元素有浮動有橫向的margin，橫向的margin值
會被放大成兩倍浮動方向與margin方向一致時，該方向會出現雙倍邊距

解決方法：display:inline

三、圖片間隙問題

產生條件：給父容器設定寬度後，圖片會在原來基礎上把父元素撐大3-5px

解決方法：1.給父元素新增font-size：0；
2.給圖片新增display：block；

四、li的間距問題

產生條件：IE6瀏覽器 li標籤設定寬高，且li裡面的元素髮生了浮動
解決方法：1. li不設定寬高；

               2. li內部的標籤不進行浮動

五、塊狀元素預設高度問題

產生條件：部分塊狀元素會有預設高度（一般為16px-18px之間）
解決方法： 1.給元素新增overflow:hidden;
​ 2.font-size：0；

六、表單行高不一致

產生條件：一行中的文字輸入框和按鈕不在同一高度
解決辦法：給表單元素新增float：left；並去掉預設邊框border：0；

七、圖片元素img下高度超出,出現多餘空白

解決方法：1.設定img為display:block;
​ 2.父級設定overflow:hidden;

八、左浮元素margin-bottom失效

解決方法：1.顯示設定高度
​ 2.父標籤設定_padding-bottom代替子標籤的margin-bottom
​ 3.再放個標籤讓父標籤浮動，子標籤margin- bottom，即(margin-bottom與float不同時 作用於一個標籤)

九、position下的left，bottom錯位

解決方法：為父級(relative層)設定寬高或新增*zoom:1

十、子級中有設定position，則父級overflow失效

解決方法：為父級設定position:relative

十一、塊元素中有文字及右浮動的行元素，行元素換行

解決方法：將行元素置於塊元素內的文字前

十二、透明rgba與opacity

產生條件：IE6不支援此兩種透明的設定方法
解決方法：使用IE6當中的濾鏡filter替代掉，
如：opacity:0.6;filter:alpha(opacity=60)異盒模型問題

15.清空陣列的方法

1.splice

var ary = [1,2,3,4];
ary.splice(0,ary.length);
console.log(ary); // 輸出 []，空陣列，即被清空了

2.length賦值為0

var ary = [1,2,3,4];
ary.length = 0;
console.log(ary); // 輸出 []，空陣列，即被清空了

3.賦值為[]

var ary = [1,2,3,4];
ary = []; // 賦值為一個空陣列以達到清空原陣列