重温两道页面重构面试题

最近一直在研习JavaScript,CSS方面的知识关注的甚少.偶然间又看到这两道页面重构面试题,心血来潮,重温一下,呵.其实这两道题之前就做过,挺有意思.
题一:分别用2个DIV,3个DIV,5个DIV实现水平垂直均居中显示一个宽50px,高200px的正十字架.
思路:水平垂直均居中的实现,当然非absolute加外边距负值结合莫属.闲话略去,看代码及演示吧.
2个DIV实现的核心CSS代码:点此查看DEMO

.div _ a { width: 50 px ; height: 200 px ; background: #a40000 ; position: absolute ; left: 50 % ; top: 50 % ; margin: - 100 px 0 0 - 25 px }
.div _ b { width: 200 px ; height: 50 px ; background: #a40000 ; position: absolute ; left: 50 % ; top: 50 % ; margin: - 25 px 0 0 - 100 px }

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

.div _ a { width: 200 px ; height: 50 px ; background: #a40000 ; magin-top: 75 px }
.div _ b { width: 50 px ; height: 200 px ; background: #a40000 ; margin: - 125 px 0 0 75 px }
.div _ c { width: 200 px ; width: 200 px ; position: absolute ; left: 50 % ; top: 50 % ; margin: - 100 px 0 0 - 100 px }

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

.div _ a { width: 200 px ; width: 200 px ; position: absolute ; background: #a40000 ; left: 50 % ; top: 50 % ; margin: - 100 px 0 0 - 100 px }
.div _ b , .div _ c , .div _ d , .div _ e { width: 75 px ; height: 75 px ; background: #fff }
.div _ b , .div _ d { float: left }
.div _ c , .div _ e { float: right }
.div _ b , .div _ c { margin-bottom: 50 px }

题二:这是一道很费脑筋,但很有意思的一道题.这道题也能让你领略到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: 200 px ; height: 200 px ; left: 50 % ; top: 50 % ; position: absolute ; margin: - 100 px 0 0 - 100 px ; 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部分:

1. <div class="div_center">
2.   <div class="div_a">
3.     <div class="div_a">
4.       <div class="div_a">
5.         <div class="div_a">
6.           <div class="div_a">
7.             <div class="div_a"></div>
8.           </div>
9.         </div>
10.       </div>
11.     </div>
12.   </div>
13.   <div class="div_b">
14.     <div class="div_b">
15.       <div class="div_b">
16.         <div class="div_b">
17.           <div class="div_b">
18.             <div class="div_b"></div>
19.           </div>
20.         </div>
21.       </div>
22.     </div>
23.   </div>
24.   <div class="div_c">
25.     <div class="div_c">
26.       <div class="div_c">
27.         <div class="div_c">
28.           <div class="div_c">
29.             <div class="div_c"></div>
30.           </div>
31.         </div>
32.       </div>
33.     </div>
34.   </div>
35.   <div class="div_d">
36.     <div class="div_d">
37.       <div class="div_d">
38.         <div class="div_d">
39.           <div class="div_d">
40.             <div class="div_d"></div>
41.           </div>
42.         </div>
43.       </div>
44.     </div>
45.   </div>
46. </div>

个人觉得题一有一定的实用价值,题二只是对思维的一个考验,可能并不会在实际应用中用到.题二还可以用JS来实现,略过.

转载于:https://www.cnblogs.com/mrthink/archive/2010/07/02/1769673.html