網上一搜很多面試題，但是有時候感覺繁瑣，現在自己也試著將其整理下，後續慢慢新增，希望能給需要的你有所幫助，（初次發文，有些沒注意到的，還請見諒~）

 

1、一個200*200的div在不同解析度螢幕上下左右居中，用css實現

　　a、方法一

<div style="width: 500px;height: 500px;margin: 0 auto;"> 　　<div style="width:200px;height: 200px;position: absolute;top:0;bottom:0;right:0;left:0;border: 1px solid #ddd;margin:auto;">上下左右居中測試</div> </div>   b、方法二   <div style="width:500px;height:500px;border:1px solid green;display:flex;justify-content:center;align-items:center;"> <div style="">上下左右居中</div> </div>  

2、寫一個左中右佈局佔滿螢幕，其中左右兩塊是固定寬度200，中間自適應寬，要求先載入中間塊，請寫出結構及樣式

　　a、方法一（我自己寫的）

<div style="display: flex;"> <div calss="left" style="width:200px;height:200px;">left</div> <div calss="center" style="flex:1;">center</div> <div calss="right" style="width:200px;height:200px;">right</div> </div>   b、方法二 　　 css:

　　<style> 　　　　 #left,#right {width: 200px; height: 200px;background-color: #ffe6b8;position: absolute;top: 120px;}                #left { left: 0px;} #right {right: 0px;} #center {margin: 2px 210px;background-color: #eee;height: 200px;}　　 　　</style>   html:

  <div id="left">left</div> <div id="center">center</div> <div id="right">right</div>    

 3、闡述清除浮動的方式（常見）

a、方法一 

直接給父元素設定高度（不推薦）

b、方法二  （父元素設定overflow：hidden ；*zoom：1）

<div style="overflow:hidden;*zoom:1;"> <div style="float:left">test left</div> <div style="float:right;">test right</div> </div> c、方法三  （父元素內部末尾新增空div  設定clear:both 屬性）   <div> <div style="float:left;">測試test文字闡述清楚浮動</div> <div style="float:right">測試test文字闡述清楚浮動的幾種方式</div> <div style="clear:both;"></div> </div>

d、方法四  （css偽類::after實現清除浮動）

css:

<style>

.clearfix{ zoom: 1; } .clearfix::after{ content:"020"; height:0; display:block; visibility: hidden; clear: both; }

</style>

html:

<div class="clearfix"> <div style="float:left;">left元素</div> <div style="float:right;">right 元素</div> </div>