当应用div对齐中心时，为什么div内的div移动而不是居中

Question

有一天，我设法将一些文字发布在彩色div中，并在顶部放置了一些数字纸胶带（如cellotape）。但是，现在我想完全理解代码。

他们对我有所帮助，但即使它运作得很好，我也不能理解为什么它会这样做以及有些意思。我想完全理解那里写的所有内容，以便下次我不需要帮助;）

这是代码：

var picture = document.getElementById("picture");
var country = ''; // declare as a string
var message = document.getElementById("msg");

if (! (picture instanceof Element) || ! (message isntanceof Element) ) 
    return; // couldn't find the elements we need

switch (picture.alt.toLowerCase()) { // use toLowerCase() for robustness
    case 'usa':
        country = 'United States';
        break;
    case 'ecu':
        country = 'Ecuador';
        break;
    case 'hai':
        country = 'Haiti';
        break;
    default:
        country = 'Turkey';
}

message.textContent = "from " + country + ", Hello World!";

1）我得到的外部div是米色＆＃34;背景＆＃34;与阴影。我理解那里的所有代码

2）

我想如果我自己尝试过，我刚刚写过

3）

3.a）我不知道如何指定边距：

• 我得到保证金权利：5px; margin-top：5px;等。
• 如果我写保证金：5px;这意味着到处都有5个边距（右边，左边，顶边......）。
• 保证金：0自动;顶部和底部为0，左右自动
• 如果我只想指定顶部和底部怎么办？
• 为什么有时（像这里）说三个值？什么是保证金：-70px auto 0;？

3.b）什么是位置：绝对？

（是的，我已经读过它，绝对的，相对的，但我并没有真正理解其中的差异）

谢谢！ ：）

Answer 1

a。如果我只想指定顶部和底部怎么办？

.selector{
     margin-top:10px;
     margin-bottom:10px;
 }

b。为什么有时（像这里）说三个值？什么是margin: -70px auto 0;？

.selector{
    margin:-70px auto 0
} 
/*margin-top:-70px, margin-left:auto, margin-right:auto, margin-bottom:0*/

要了解它，请使用CSS Box Model正确介绍自己。

c。什么是position: absolute？

- 绝对：元素相对于其第一个定位（非静态）祖先元素定位。 Read more..

希望这有帮助。！

Answer 2

• 您可以在css中使用margin-top:和margin-bottom指定上边距和下边距。
• 使用边距和填充，当存在三个值时，它们代表顶部，左侧和右侧以及底部。因此margin: -70px auto 0为margin-top: -70px，margin-right: auto，margin-bottom: 0，margin-left: auto

绝对与相对定位：

绝对定位：从文档流中取出，并允许您访问top，right，bottom和{{ 1}}属性。相对于其最近定位的祖先，它是绝对，它是定义了left或position: absolute等的最近元素。最重要的是它从文件流like this中取出。

相对定位：布局元素，因为它通常在文档中布局，就好像它没有定位一样，然后相应地调整元素的位置而不改变布局， more like this

请注意，还有一些其他定位选项，例如静态（这是一个元素的正常行为）和固定（即使滚动时也会将元素保持在原位）。