Web从入门到放弃<8>

时间：2018-02-25 15:06:40 收藏：0 阅读：281

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;
            width: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>

View Code

如果要把绿色的立方体移动50px,把蓝色向右推动50px,在这种静态布局是不可能的.先试试position:relative.

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        .box {
            height: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>

View Code

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;

原文：https://www.cnblogs.com/gearslogy/p/8469362.html

Web从入门到放弃&lt;8&gt;

Web从入门到放弃<8>