• margin的特性和巧妙用法

    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>123p>
    div>
  div>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    向下传递案例：

    <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>testdiv>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 向下合并的时候有些特殊
    • 父元素的高度为auto的时候才会生效
    上下折叠
    • 上下兄弟之间
      • margin-top和margin-bottom在两个上下紧挨着的元素之间同时存在的时候会合并（保留值较大的）
      • 父子之间的也会折叠，（保留值较大的）

    利用margin做一些特殊的效果

    1. 内容居中显示
    {
    margin: 0 auto;
}

    • 1
    • 2
    • 3
    • 注意：只是针对于块级元素有效（display：block）
    • 原理
      • 因为block占据一整行
      • 块级元素的宽度 = 包裹元素的宽度
      • width + margin-left + margin-right + border + padding = 包裹元素的宽度
      • 在这种情况下margin左右设置为auto的时候会被等分
    2. 图片的中线总是 在视口中线显示（不同于margin：0 auto，类似于背景图片的居中）

    在这里插入图片描述

    是图片中线一直居中

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 原理
      • 利用了margin的值是相对于父元素的
    3. 利用magin的auto设置宽度

    案例：

    父元素1190px

    子元素1120px

    不使用width

    利用margin改变子元素的宽度

    利用第一次的公式

    设置margin-left: -10px;

    width就变成了1120px

  • 相关阅读:
    基于SpringBoot的大学城水电管理系统
    opencloudos容器镜像优化
    1200*B. BerSU Ball（贪心）
    python 视频抽帧
    渗透测试中的前端调试（上）
    Spark大数据分析与实战笔记（第三章 Spark RDD 弹性分布式数据集-05）
    解决SpringBoot项目war部署到tomcat下无法Nacos中注册服务问题
    前端vuePC端适配手机端最终方案详解(带源码)
    使用IDEA创建第一个Web项目（集成本地Tomcat）
    继电器的选型和英应用
  • 原文地址：https://blog.csdn.net/OnTheRoad_ING/article/details/125996571