【前端】：margin

WEBJ2EE

发布于 2020-01-17 15:51:54

1.1K0

发布于 2020-01-17 15:51:54

文章被收录于专栏：WebJ2EEWebJ2EE

目录
1. margin 特性总结
2. 几道笔试题

1. margin 特性总结

1.1. 横向格式化

横向格式化属性有 7 个，分别为 margin-left、border-left、padding-left、width、padding-right、border-right、margin-right。
- 这 7 个属性的值加在一起要等于元素容纳块的宽度。
- 这 7 个属性中，只有 margin-left、width、margin-right 能设置为 auto。
  - [3个auto] 如果 margin-left、width、margin-right 同时为 auto，则 margin-left、margin-right 将被设置为 0，width 则要多宽有多宽。
  - [2个auto] 如果 margin-left、margin-right 为 auto，则 margin-left、margin-right 长度相等，元素在父元素内居中显示。
  - [2个auto] 如果某一边的外边距和 width 为 auto，则设置为 auto 的那个外边距等于 0。
  - [1个auto] 如果把 margin-left、width、margin-right 其中一个设置为 auto，另外两个设为具体值，那么设为 auto 的那个属性的具体长度要能满足元素框的宽度等于父元素的宽度。
  - [0个auto] 如果这三个属性都不是 auto，用 CSS 术语来说就是过约束了，那么 margin-right 将被强制设置为 auto。
- 这 7 个属性中，只有 margin-left、margin-right 可以设置为负值。
- 这 7 个属性中，border-left、border-right 不能设置百分数，只能设置固定长度值。

示例1：利用 margin 实现块级元素水平居中；

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    body {
      background-color: rgba(0, 0, 0, 0.1);
    }

    .center {
      width: 300px;
      height: 300px;
      border: 5px solid red;

      margin: 0 auto;
    }
</style>
</head>
<body>
  <div class="center"></div>
</body>
</html>

示例2：利用负外边距实现竖直居中；

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    /* demo */
    .dateinput {
      border: 1px solid blue;
    }

    /* dateinput */
    .dateinput {
      position: relative;
      display: inline-block;
    }

    .dateinput label,
    .dateinput input {
      font-size: 16px;
    }

    .dateinput input {
      box-sizing: border-box;
      width: 150px;
      padding: 0;

      line-height: 1.5;

      padding-right: 20px;
    }

    .dateinput img {
      position: absolute;
      top: 50%;
      right: 5px;

      width: 16px;
      height: 16px;

      margin-top: -8px;
    }    
</style>
</head>
<body>
  <div class="dateinput">
    <label>日期：</label><input type="text" value="2020-01-01"/><img src="date.png">
  </div>
</body>
</html>

1.2. 纵向格式化

纵向格式化属性有 7 个，分别为 margin-top、border-top、padding-top、height、padding-bottom、border-bottom、marginbottom。
- 这 7 个属性的值加在一起必须等于块级的容纳块的高度。
- 这 7 个属性中的 margin-top、height、margin-bottom 可以设置为 auto。
  - 常规流动模式下，如果把块级框的 margin-top 或 margin-bottom 设置为 auto，二者都自动计算为 0。
  - height 属性要么设为 auto，要么设为某种类型的非负值，决不能小于零。
- 如果把块级框的高度设为百分数，百分数是相对框体的容纳块的高度而言的。
  - 如果未明确声明容纳块的高度，那么百分数高度将被重置为 auto。
- 百分数外边距、内边距值是相对于父元素的内容区宽度计算。
- 如果height=auto，那么默认的高度是从最上边那个块级子代元素的上边框外侧到最下边那个块级子代元素的下边框外侧之间的距离。因此，子元素的外边距“游离”在所属元素的外部。
  - 如果块级元素有上内边距或下内边距，或者有上边框或下边框，那么高度是从最上边那个子元素的上外边距的外边界到最下边那个子元素的下外边距的外边界之间的距离。
- 在正常流中相邻（兄弟或父子关系）块级元素的外边距，组合在一起编程单个外边距，而且只有上下外边距才会有这种特性。
  - 两个都是正数，取较大的值；
  - 两个都是负数，取绝对值较大的值；
  - 一正一负，取两个值相加的和；
- 对于行内非替换元素，margin-top、border-top、padding-top、margin-bottom、border-bottom、padding-bottom 不会对行高产生影响。

示例1：未明确声明容纳块高度，百分数高度将被重置为 auto；

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    .outer {
      border: 2px solid green;
    }
    .inner {
      border: 2px solid blue;
    }

    .inner {
      height: 100%;
    }  
</style>
</head>
<body>
  <div class="outer">
    <div class="inner">
      Hello Webj2ee!
    </div>
  </div>
</body>
</html>

示例2：百分比margin、padding都是相对于父元素的width；

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    .outer {
      border: 2px solid green;
      width: 400px;
      height: 200px;
    }
    .inner {
      border: 2px solid blue;
      margin: 10%;
      padding: 10%;
    }
</style>
</head>
<body>
  <div class="outer">
    <div class="inner">
      Hello Webj2ee!
    </div>
  </div>
</body>
</html>

示例3：非替换行内元素行高不会被上下边距、边框影响；

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    div {
      background-color: green;
      width: 200px;
      height: 200px;
    }
    span {
      padding: 30px 0;
      margin: 30px 0;
    }
</style>
</head>
<body>
  <div>
    <span>line-height,font-size 帮助我们确定行内框(inline box)的高度。
      line box的高度是最高的inline box的顶部到最低(这里指显示位置)的inline box的底部之间的距离。
    </span>
  </div>
</body>
</html>

2. 几道笔试题

题目01：