CSS 之 margin的特性和巧妙用法

OnTheRoad_ING

已于 2022-08-07 17:28:23 修改

阅读量251

点赞数

分类专栏： HTML+CSS 文章标签： css css3 html

于 2022-07-26 15:51:49 首次发布

本文链接：https://blog.csdn.net/OnTheRoad_ING/article/details/125996571

版权

HTML+CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

margin的特性和巧妙用法

特性

向外传递

margin在被包裹的时候会向外传递

向上传递案例：

<style>
  .box {
    height: 400px;
    width: 800px;
    background-color: red;
  }
  .box .item {
    height: 200px;
    width: 300px;
    background-color: green;

    margin-top: 100px;
  }
</style>

<body>
  <div class="box">
    <div class="item">
      <p>123</p>
    </div>
  </div>
</body>

向下传递案例：

<style>
  .box1 {
    width: 300px;
    /*        
    height: 300px; 
    高度不设置的，默认为auto
    */
    background-color: #00f;
  }

  .item1 {
    width: 200px;
    height: 250px;
    background-color: #0ff;

    margin-bottom: 200px;
  }
</style>
<body>
  <div class="box1">
    <div class="item1"></div>
  </div>

  <div>test</div>
</body>

向下合并的时候有些特殊
父元素的高度为auto的时候才会生效

上下折叠

上下兄弟之间
- margin-top和margin-bottom在两个上下紧挨着的元素之间同时存在的时候会合并（保留值较大的）
- 父子之间的也会折叠，（保留值较大的）

利用margin做一些特殊的效果

1. 内容居中显示

{
    margin: 0 auto;
}

注意：只是针对于块级元素有效（display：block）
原理
- 因为block占据一整行
- 块级元素的宽度 = 包裹元素的宽度
- width + margin-left + margin-right + border + padding = 包裹元素的宽度
- 在这种情况下margin左右设置为auto的时候会被等分

2. 图片的中线总是在视口中线显示（不同于margin：0 auto，类似于背景图片的居中）

在这里插入图片描述

是图片中线一直居中

{
  transform: translate(-50%);
  /* 使图片左移一半 
  	 现在中线在屏幕最左边
  */

  margin-left: 50%;
 /* 使中线根据父元素的宽度向右移动一半，达到居中 */
}

原理
- 利用了margin的值是相对于父元素的

3. 利用magin的auto设置宽度

案例：

父元素1190px

子元素1120px

不使用width

利用margin改变子元素的宽度

利用第一次的公式

设置margin-left: -10px;

width就变成了1120px