你對position瞭解有多深？看完這2道有意思的題你就有底了...

時間 2019-11-30

標籤 position 瞭解看完有意思有底欄目 CSS 简体版

原文原文鏈接

想當年，css3還沒出來。css2大行其道的時候，就已經存在各類有趣的前端css實現。溫故而知新，也是一種不錯的體驗。
話很少說，先放一道大概7,8年前就遇到的問題。css

1.題目：有一個div 寬和高都是200px。只要往div裏面加任意的四個div，裏面的div寬和高都會是原來50%，分別在左右上下；任意加div，就會向四個角延伸。同時，整個div是垂直水平居中瀏覽器。（以下圖）
html

圖解：任意添加div，就分別向4個角延伸
注：請使用盡可能簡潔的代碼實現這個效果。

分析：這道題乍眼一看不知所云，其實考點就只有2個。前端

第一點是垂直水平居中。
想當年，垂直水平居中實現方式就是定位+負邊距，或者使用table的方法。
如今，除了這些，還能靈活使用flex佈局，或者使用translate(-50%, -50%)來達到垂直水平居中的目的。css3

第二點，就是定位了。這裏要注意的就是子元素要50%，仍是負100%了。（具體看實現代碼）瀏覽器

總的來講，要作到代碼簡潔，那麼子元素就應該要繼承父元素的樣式，這樣就能一勞永逸了。如今我就拋豬引肉，放出一種實現的方法，期待小夥伴更多的實現方法。佈局

<!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 class="rt"><div><div></div></div></div>
<div class="lb"><div><div></div></div></div>
<div class="rb"><div><div></div></div></div>
</div>
</body>
複製代碼

順便貼一下實現url：http://jsbin.com/picureporu/edit?html,output測試

題目2：flex

這是一道考對定位有多瞭解的題目。考點和題目一很相似，仍是考的定位和垂直水平居中。ui

1.難點是4張圖片要始終保持同一水平線，還要垂直水平於頁面。
2.其實只要把圖片做爲基準，去實現就行。其餘文字描述都根據這些圖片去定位就行。
3.可是因爲文字的多少是沒法肯定的，這裏的定位就比較考你對定位的瞭解了。話很少說，繼續拋豬引肉。url

<!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://photo.tuchong.com/1377265/f/31442058.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://photo.tuchong.com/1377265/f/31442058.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://photo.tuchong.com/1377265/f/31442058.jpg" width="150" height="100" />
<div class="lists-bottom">
	<p>內容內容內容內容內容內容內容的撒的撒大大薩達薩達撒大聲地德薩上大大聲的撒內打算點颯颯的撒大大2容內容內容內容內容內容內容內容內容內容內容內容</p>
</div>
</div>
</div>

</body>
</html>  
複製代碼

demo的url：jsbin.com/rezinofaje/…
總結：2道題目其實都是考察定位的知識，順帶蹭了一點垂直水平居中的點。我扔的例子並無使用css3的知識來實現，期待小夥伴們提供更多更好更簡潔的實現方法。

Author: Alone Antroduction: 高級前端開發工程師 Sign: 前端如逆水行舟，不進則退。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。