一些web前端知识的疑惑问题陈列

CSS

• 子容器通过设置margin-right 调整与父元素的位置时的失效问题(现象)
  当子容器没有设置宽度时，即没有显示地设置 width: value; 时，margin-right 还是能有效果，但一旦子容器设置了宽度，margin-right 就失效了。除非设置浮动到右边，即 float: right; 。（可能还有其他特殊的情况，但还未能找出验证）

css 代码：

.box {
  margin-top: 10px;
  margin-right: 30px;  /* 尝试设置参数, 发现不会左右移动 */
  margin-bottom: 10px;
  margin-left: 10px;
  width: 80%; 
  box-sizing: border-box;
  border: 4px solid red;
  height: 80px;
  /* float: right; */
}
.container {
  width: 600px;
  border: 4px solid blue;
  height: 100px;
}

html 代码：

<div class="container">
  <div class="box">Change my margin.</div>
</div>