css页面重构面试题

浏览数：32 / 时间：2015年06月09日

偶然间又看到博客园中这两道页面重构面试题。
题一:分别用2个DIV,3个DIV,5个DIV实现水平垂直均居中显示一个宽50px,高200px的正十字架.
思路:水平垂直均居中的实现,当然非absolute加外边距负值结合莫属.闲话略去,看代码及演示吧.
2个DIV实现的核心CSS代码:点此查看DEMO

.div_a{width:50px; height:200px; background:#a40000; position:absolute; left:50%; top:50%; margin:-100px 0 0 -25px}
.div_b{width:200px; height:50px; background:#a40000; position:absolute; left:50%; top:50%; margin:-25px 0 0 -100px}

3个DIV实现的核心CSS代码:点此查看DEMO

.div_a{width:200px; height:50px; background:#a40000; magin-top:75px}
.div_b{width:50px; height:200px; background:#a40000; margin:-125px 0 0 75px}
.div_c{width:200px; width:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -100px}

5个DIV实现的核心CSS代码:点此查看DEMO

.div_a{width:200px; width:200px; position:absolute; background:#a40000; left:50%; top:50%; margin:-100px 0 0 -100px}
.div_b,.div_c,.div_d,.div_e{width:75px; height:75px; background:#fff}
.div_b,.div_d{float:left}
.div_c,.div_e{float:right}
.div_b,.div_c{margin-bottom:50px}

题二:这是一道很费脑筋,但很有意思的一道题.这道题也能让你领略到CSS的博大精深.原题要求是,让某一图形水平垂直居中于当前可视页面,且图形是一个无限缩小的,就是四个角的正方形依次缩小,在用户体验上要满足尽最多用户.
思路:既然要求图形水平垂直居中,那最终它占的肯定是一个正方图形;从用户体验上,满足最多用户,主要是受限于用户的浏览器窗口大小.目前主流的显示器分辨率是1024*768,拿大陆用户量最大的IE来计算,其不安装插件的情况下可视高度约为590px,所以我们要实现的正方图形必须限制在590px*590px里面(分辨率宽大于高,所以以高为底线计算).按最中间的图形大小为200px*200px计算,200+100*2+50*2+25*2+12.5*2+6.25*2~=590.
题二思路借签自网络,原作者已无从考证,谨此感谢.
核心CSS代码:点此查看DEMO

.div_center{width:200px;height:200px;left:50%;top:50%;position:absolute;margin:-100px 0 0 -100px;background:#a40000}
.div_a,.div_b,.div_c,.div_d{width:50%;height:50%;position:absolute;background:#a40000;}
.div_a{left:-50%;top:-50%}
.div_b{right:-50%;top:-50%}
.div_c{left:-50%; bottom:-50%;}
.div_d{right:-50%; bottom:-50%;}

html部分:

<div class="div_center">
  <div class="div_a">
    <div class="div_a">
      <div class="div_a">
        <div class="div_a">
          <div class="div_a">
            <div class="div_a"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="div_b">
    <div class="div_b">
      <div class="div_b">
        <div class="div_b">
          <div class="div_b">
            <div class="div_b"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="div_c">
    <div class="div_c">
      <div class="div_c">
        <div class="div_c">
          <div class="div_c">
            <div class="div_c"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="div_d">
    <div class="div_d">
      <div class="div_d">
        <div class="div_d">
          <div class="div_d">
            <div class="div_d"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>