Web從入門到放棄<8>
阿新 • • 發佈：2018-02-25
div round lap mage inf .com line gpo 布局 
Ref:
Cameron D. - HTML5, JavaScript and jQuery (Programmer to Programmer) - 2015
<1> CSS Responsive box
關鍵字:display:inline-block;
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> .box { height:200px; widthView Code:200px; display:inline-block; } </style> </head> <body> <div class="box" style="background:red"></div> <div id="middleBox" class="box" style="background:green"></div> <div id="thirdBox" class="box" style="background:blue"></div> <div id="lastBox" class="box" style="background:yellow"></div> </body> </html>
如果要把綠色的立方體移動50px,把藍色向右推動50px,在這種靜態布局是不可能的.先試試position:relative.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> .box { heightView Code:200px; width:200px; display:inline-block; } #middleBox{ position: relative; left:50px; } </style> </head> <body> <div class="box" style="background:red"></div> <div id="middleBox" class="box" style="background:green"></div> <div id="thirdBox" class="box" style="background:blue"></div> <div id="lastBox" class="box" style="background:yellow"></div> </body> </html>
position設置為relative,意思就在現在的位置作為基礎，然後再做移動。
position設置為absolute:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> .box { height:200px; width:200px; display:inline-block; } #middleBox{ position: absolute; left:150px; top:150px; } </style> </head> <body> <div class="box" style="background:red"></div> <div id="middleBox" class="box" style="background:green"></div> <div id="thirdBox" class="box" style="background:blue"></div> <div id="fourthBox" class="box" style="background:yellow"></div> <div id="lastBox" class="box" style="background:black"></div> </body> </html>View Code
要把綠色放入下面寫:z-index:-1;
Web從入門到放棄<8>