所有分辨率的 CSS 元素定位答案

【问题标题】：CSS element positioning for all resolutions所有分辨率的 CSS 元素定位
【发布时间】：2015-12-03 00:44:46
【问题描述】：

我现在正在寻找建立一个网站并使用 CSS 定位。但是对于每个分辨率，由于 margin 属性，它会将其放置在与边框不同的位置。但是，我怎样才能放置它对于所有屏幕分辨率都是等距的？

<!DOCTYPE html>
<html>
<head>
    <title>Demo Page</title>

    <style type="text/css">
    #homeHeader{
        text-align: center;
        font-family: Verdana;
    }
    #homeTabs{
        border: 1px solid black;
        height: 800px;
        width: inherit;
    }
    #tabOne{
        margin:50px 50px 20px 100px;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }
    #tabTwo{
        margin: 0px 50px 20px 250px;
        font-family: Arial;
        font-style: italic;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }
    #tabThree{
        margin: 0px 50px 20px 400px;
        font-family: Arial;
        font-style: italic;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }
    #tabFour{
        margin: 0px 50px 20px 550px;
        font-family: Arial;
        font-style: italic;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }
    #tabFive{
        margin: 0px 50px 20px 700px;
        font-family: Arial;
        font-style: italic;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }
    #tabSix{
        margin: 0px 50px 20px 850px;
        font-family: Arial;
        font-style: italic;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }
    #tabSeven{
        margin: 0px 50px 20px 1000px;
        font-family: Arial;
        font-style: italic;
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }s
    center{
        font-family: verdana;
    }
    </style>


</head>
<body>

<div id="homeHeader">

    <h1 id="headerH1">HOMELESS MONKEYS</h1>
</div>

<div id="homeTabs">

<div id="tabOne">
    <center><br>Fashion1</center>
</div>

<div id="tabTwo">
    <center><br>Fashion2</center>
</div>
<div id="tabThree">
    <center><br>Fashion3</center>
</div>
<div id="tabFour">
    <center><br>Fashion4</center>
</div>
<div id="tabFive">
    <center><br>Fashion5</center>
</div>
<div id="tabSix">
    <center><br>Fashion6</center>
</div>
<div id="tabSeven">
    <center><br>Fashion7</center>
</div>
</div>

</body>
</html>

我可以理解，由于边距距离，它对于不同的分辨率与边框的位置不同，但是如何使其对所有屏幕分辨率均等间隔？

【问题讨论】：

标签： html css position margin

【解决方案1】：

您可以尝试使用 % 代替 px。

【讨论】：

【解决方案2】：

您必须选择响应式布局还是固定布局。如果你想要一个固定的布局，你的主容器应该有一个固定的像素宽度，里面的元素也必须是像素。

如果您想要一个响应式布局，您应该使用相对单位（主要是 em/rem 和 %）和媒体查询在某些断点处更改您的布局。

链接：

Media queries

CSS units

【讨论】：