今天在前端羣裏面和羣友討論了一下幾道自己遇過的前端題目，雖然是小題目，但是還是挺好玩。所以今天還是寫下來，和大家分享一下。
1.一道大概4年前遇到的題目，知識點簡單，但是新奇又好玩。
題目：有一個div 寬和高都是250px； 只要往div裏面加任意的四個div，裏面的div寬和高都會是原來50%，分別在左右上下；任意加div，就會向四個角延伸。同時，整個div是垂直水平居中瀏覽器。
如下圖
圖解：任意添加div，就分別向4個角延伸
下面是出代碼，想試試的同學記得先不看代碼啦。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
div{padding:0;margin:0; background-color:#F00;position:absolute; }
.top{width:250px; height:250px; top:50%; left:50%; margin: -125px 0 0 -125px;}
.lt,.lt div{ width:50%; height:50%; left:-50%; top:-50%; }
.rt,.rt div{ width:50%; height:50%; right:-50%; top:-50%; }
.lb,.lb div{ width:50%; height:50%; left:-50%; bottom:-50%; }
.rb,.rb div{ width:50%; height:50%; right:-50%; bottom:-50%; }
</style>
</head>
<body>
<div class="top">
<div class="lt"><div><div><div><div></div></div></div></div></div>
<div class="rt"><div><div><div><div></div></div></div></div></div>
<div class="lb"><div><div><div><div></div></div></div></div></div>
<div class="rb"><div><div><div><div></div></div></div></div></div>
</div>
</body>
</html>原理：1.水平加垂直居中
2.定位
要看demo，請點這裏： http://jsbin.com/cerutibukagu/2/edit
題目2：
ps：這個題目是沒有經過林同學的同意就發上來的，希望他不要罵我，對不起啊。
下面來看代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>測試</title>
</head>
<style>
.mod-ju{ width:630px; margin: -50px 0 0 -315px; position:absolute; top:50%; left:50%; height:100px;}
.lists{ float:left; width:150px; margin-right:10px; background-color:#9C9; position:relative;}
.lists img{ position:relative; clear:both; zoom:1; z-index:1;}
.mr0{ margin-right:0;}
.lists-top{background-color:#9C9; position:absolute; left:0;top:0;}
.lists-top div{ position:absolute; left:0; bottom:100%;background-color:#9C9; width:150px; }
.lists-bottom{background-color:#9C9; position:absolute; left:0;top:100%; clear:both; zoom:1; width:150px;}
</style>
<body>
<div class="mod-ju">
<div class="lists">
<div class="lists-top">
<div>
<h3>副標題副標題副標題211111111111德薩阿薩德薩達薩達的撒的颯颯大的撒大颯颯的盛大阿薩德薩達薩達薩達薩達副標題副標題</h3>
<h2>大神進來卡薩丁進拉薩的就流口水大</h2>
</div>
</div>
<img src="http://tb1.bdstatic.com/tb/r/image/2014-08-15/e6e4db30b0798bb045fa1c9e4ac0787d.jpg" width="150" height="100" />
<div class="lists-bottom">
<p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
</div>
</div>
<div class="lists">
<div class="lists-top">
<div>
<h3>副標題副標題副標題副標題副標題副副標題副標題副標題副標題副標題副標題副標題副標題標題副標題副標題</h3>
<h2>大神進來卡薩丁進拉薩的就流口水大</h2>
</div>
</div>
<img src="http://tb1.bdstatic.com/tb/r/image/2014-08-15/e6e4db30b0798bb045fa1c9e4ac0787d.jpg" width="150" height="100" />
<div class="lists-bottom">
<p>內容內容內容內容內容內容內容內容內容內容內薩達薩達啊實打實的容內容內容內容內容內容內容內容內容</p>
</div>
</div>
<div class="lists">
<div class="lists-top">
<div>
<h3>副標題副標題副標題副標題副標題副標題副標題</h3>
<h2>大神進來卡薩丁進拉薩的就流口水大</h2>
</div>
</div>
<img src="http://tb1.bdstatic.com/tb/r/image/2014-08-15/e6e4db30b0798bb045fa1c9e4ac0787d.jpg" width="150" height="100" />
<div class="lists-bottom">
<p>容內容內容內容內容內容大薩頂頂的頂頂頂頂頂頂頂頂頂頂的頂頂頂頂頂大三十大撒的頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂內容內容內容</p>
</div>
</div>
<div class="lists mr0">
<div class="lists-top">
<div>
<h3>副標題副標題副標題副標題副標題副標題副標題副標題</h3>
<h2>大神進來卡薩丁進拉薩的就流口水大</h2>
</div>
</div>
<img src="http://tb1.bdstatic.com/tb/r/image/2014-08-15/e6e4db30b0798bb045fa1c9e4ac0787d.jpg" width="150" height="100" />
<div class="lists-bottom">
<p>內容內容內容內容內容內容內容的撒的撒大大薩達薩達撒大聲地德薩上大大聲的撒內打算點颯颯的撒大大2容內容內容內容內容內容內容內容內容內容內容內容</p>
</div>
</div>
</div>
</body>
</html>
原理：定位，垂直水平居中。
demo地址： http://jsbin.com/xisuvadaseme/1/edit
總結：兩道題其實差不多，好玩的就好好實現一下。
前端，真心好玩。
Author: Alone
Antroduction: 高級前端開發工程師
Sign: 人生沒有失敗，只有沒到的成功。
博主相關文章推薦：