Css 分区定位混乱_Css - Fatal编程技术网

Css 分区定位混乱

css

Css 分区定位混乱,css,Css,我是Css新手。我有一个HTML页面 <body> <div id="viewer"> <div id="flow"> <img src="images/beatles.jpg"> <img src="images/blink.jpg"> <img src="images/doves.jpg"> &

我是Css新手。我有一个HTML页面

 <body>

    <div id="viewer">

        <div id="flow">

            <img src="images/beatles.jpg">
            <img src="images/blink.jpg">
            <img src="images/doves.jpg">
            <img src="images/flash.jpg">
            <img src="images/floyd.jpg">
            <img src="images/jurassic.jpg">
            <img src="images/naked.jpg">
            <img src="images/prodigy.jpg">
            <img src="images/xx.jpg">
            <img src="images/zabiela.jpg">

        </div> <!--end of <div id="flow">  -->

        <ul>
            <li id="left">
                <a href="#" title="Move Left">Left</a>
            </li>

            <li id="right">
                <a href="#" title="Move Right">Right</a>
            </li>
        </ul>

    </div> <!--end of <div id="viewer">  -->

</body>

你们定义主Div的宽度和高度。定义填充，意味着放置在Div内部的每个元素将从顶部开始放置200px，从左到右不放置sapce，从Div底部开始放置30px的空间。我想问一下这里我们定义相对位置。它是相对于正文还是html的？我们没有定义flow div的宽度和高度。所以它是通过填充来计算的。flow div宽度与查看器宽度相同，但从查看器div顶部向下放置30px，其高度为190px，从底部向上放置30px。如果我错了，请告诉我

#flow:after {
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

现在，我们正在定义要在flow div之后输入的内容。我们将其可见性设置为隐藏，这意味着它在那里，占用空间但不显示。它是？我想问的是，我们使用的是clear：两者都在这里。我们在这里清理什么？我们没有在查看器div中设置任何float属性

现在是令人困惑的部分

#flow img {
    display:block;
    margin-left:-165px;
    position:relative;
    top:-15px;
    left:245px;
    float:left;
    background-color:#fff;
}

现在我们正在设置flow Div中的图像。我注意到的第一件事是，如果我将它的top属性设置为1px，这会令人困惑。然后它与flow div对齐，这很好，因为它的位置是相对的，它在flow div内部，所以它与flow div对齐。但当我把它的left属性改为1px时。然后它超越了divsviewer和flow。在屏幕左角中间和div左边的某个地方对齐。为什么会这样。如果它的位置是相对的，那么它应该留在flow div中。这是我的困惑。此外，图像也缩小，以适应内部的div。我想这是因为dov的大小。每个图像都是200x200。我们的流量宽度仅为700px

另一件事我们设置了左边的边距：-165px；。现在图像是水平排列的，也会缩小以适应div。但是如果我改为左边距：165px；。然后图像垂直展开并显示所有图像。图像不会收缩。此外，我们还设置了顶部：-15px；。我们什么时候设置负值？这不是作业或家庭作业。我只是在练习，我想知道事情是如何进行的。下面是剩下的css

#viewer li {
    list-style-type:none;
    position:absolute;
    bottom:10px;
}

#left {
    left:20px;
}

#right {
    right:20px;
}

谢谢

了解css工作原理的一个好的开始是安装firefox和firebug。在firebug中，您可以将鼠标悬停在元素上以查看其样式

其次，为了更好地组织，我会将图像放在li标签中。

你能告诉我问题是什么吗：@jsfiddle，我的问题是我的问题。当我将left设置为1px时，为什么图像会超出div。它应该留在分区内。我告诉过你我对css是全新的：。是的，我有firebug，我已经应用了这些更改，在看到这些更改之后，我不明白我在问什么。

#viewer li {
    list-style-type:none;
    position:absolute;
    bottom:10px;
}

#left {
    left:20px;
}

#right {
    right:20px;
}