今天在重構ui控件中3秒hint提示框樣式,發現了一個有趣的小事,特發個文章記錄一下,方便自己日后看一下
一 准備知識
①一個已設置寬高的塊狀元素設置position:absolute后會保持他原來寬高
②一個內聯元素設置position:absolute會自動轉為一個塊狀元素
那么我提出三個問題:
problem01:一個沒有設置寬高的塊狀元素position:absolute,top:0;left:0,它的寬高如何顯示?
problem02:一個內聯元素position:absolute,top:0;left:0,它的寬高如何顯示?
problem03:一個元素position:absolute,left:50%發生什么有趣小事?
二 針對 problem01:一個沒有設置寬高的塊狀元素position:absolute,top:0;left:0,它的寬高如何顯示? 的回答
首先給物體設置position:absolute,top:0;left:0
測試代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> .div1{ width: 300px; height: 300px; border: 1px #000 solid; overflow: hidden; position: relative; } .div2{ position: absolute; background-color: red; top:0; left:0; } </style> </head> <body> <div class="div1"> <div class="div2"> 我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試 </div> </div> </body> </html>
出現效果如下:
得出結論:沒有寬高的塊狀元素position:absolute,top:0;left:0后默認寬度是父的寬度
三針對 problem02一個內聯元素position:absolute,top:0;left:0,它的寬高如何顯示?的回答
首先給物體設置position:absolute,top:0;left:0
測試代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> .div1{ width: 300px; height: 300px; border: 1px #000 solid; overflow: hidden; position: relative; } .div2{ position: absolute; background-color: red; top:0; left:0; } </style> </head> <body> <div class="div1"> <span class="div2"> 我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試 </span> </div> </body> </html>
效果如下:
可得結論:內聯元素position:absolute,top:0;left:0后,效果和沒有寬高的塊狀元素效果一致,即默認寬度是父的寬度.
下面來延伸一段測試,看看:內聯元素position:absolute,top:0;left:0后是否真的轉為塊狀元素,最簡單的測試就是給浮動起來的內聯元素設置下寬高,看看是否起作用,測試代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> .div1{ width: 300px; height: 300px; border: 1px #000 solid; overflow: hidden; position: relative; } .div2{ width: 100px; height: 100px; position: absolute; background-color: red; top:0; left:0; } </style> </head> <body> <div class="div1"> <span class="div2"> 我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試 </span> </div> </body> </html>
效果如下:
得出結論:內聯元素position:absolute,top:0;left:0后會轉為塊狀元素,且高寬為程序員設置的寬高
四 針對 problem03:一個元素position:absolute,left:50%發生什么有趣小事?的回答
這個效果我之前都沒有注意到,如果沒有意識到這個效果存在,很有可能出現樣式重復或者其他一些小問題
注意為了方便研究我將top設置為了0,下面來看測試代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> .div1{ width: 300px; height: 300px; border: 1px #000 solid; overflow: hidden; position: relative; } .div2{ position: absolute; background-color: red; top:0; left:50%; } </style> </head> <body> <div class="div1"> <div class="div2"> 我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試 </div> </div> </body> </html>
效果如下:
這個效果很容易接受,但是請注意此時的div2的寬度已經被強制設置為父寬度(300px/2)的一般,用chrome自帶的審核元素查看
上圖並不能證明,可能會有人猜想是屏幕寬度限制了它的寬度,測試這個想法最簡單的方法就是當它position:absolute,left:50%后,讓它往左移足夠的空間,顯示它的全部寬度,我這里采用transform: translateX(-50%);對它進行移位
測試代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> .div1{ width: 300px; height: 300px; border: 1px #000 solid; overflow: hidden; position: relative; } .div2{ position: absolute; background-color: red; top:0; left:50%; transform: translateX(-50%); } </style> </head> <body> <div class="div1"> <div class="div2"> 我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試 </div> </div> </body> </html>
效果如下:
用Chrome審查元素發現:
我們可以看出這個沒有設置寬度的div在position:absolute,left:50%自動設置了自己的寬度為父寬度(300px)的一半.
當我把父寬度設置為400px的時候,再次測試上面的代碼,出現結果如下:
得出的結論是一致的,沒有設置寬度的div在position:absolute,left:50%自動設置了自己的寬度為父寬度(400px)的一半.
哈哈,這個效果一定要注意,要不然這個效果和其他樣式混在一起會出現很多難以解釋的效果.
下面再擴展一下,當有寬度的div設置了position:absolute,left:50%以后,它的寬度如何顯示,不要被繞暈哦,就是正常顯示啦
測試代碼如下:(設置父寬度400px,子寬度300px)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> .div1{ width:400px; height:400px; border: 1px #000 solid; overflow: hidden; position: relative; } .div2{ width: 300px; position: absolute; background-color: red; top:0; left:50%; transform: translateX(-50%); } </style> </head> <body> <div class="div1"> <div class="div2"> 我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試我是測試 </div> </div> </body> </html>
效果如下:
結論:當有寬度的div設置了position:absolute,left:50%以后,它的寬度正常顯示.