• 【面试题】margin负值问题

    • margin-top和margin-left负值，元素向上、向左移动；
    • margin-right负值，右侧元素左移，自身不受影响；
    • margin-bottom负值，下方元素上移，自身不受影响；

    1. margin top left为负数

    <style>
	body{
	    margin: 20px;
	}
	
	.container{
	    border:1px solid #ccc;
	    padding: 10px;
	    width: 300px;
	    height: 300px;
	}
	.container .item{
	    width: 100px;
	    height: 100px;
	}
	.container .border-blue{
	    border: 1px solid blue;
	    margin-top: -20px;
	    margin-left: -20px;
	}
	.container .border-red{
	    border: 1px solid red;
	    
	}
style>

<body>
    <p>用于测试 margin top left 的负数情况p>
    <div class="container">
        <div class="item border-blue">
            this is item 1
        div>
        <div class="item border-red">
            this is item 2
        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
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    在这里插入图片描述

    2. margin bottom为负数

    <style>
	body{
	    margin: 20px;
	}
	
	.container{
	    border:1px solid #ccc;
	    padding: 10px;
	    width: 300px;
	    height: 300px;
	}
	.container .item{
	    width: 100px;
	    height: 100px;
	}
	.container .border-blue{
	    border: 1px solid blue;
	    margin-bottom: -20px;
	}
	.container .border-red{
	    border: 1px solid red;
	    
	}
style>

<body>
    <p>用于测试 margin top left 的负数情况p>
    <div class="container">
        <div class="item border-blue">
            this is item 1
        div>
        <div class="item border-red">
            this is item 2
        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
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    在这里插入图片描述

    3. margin right为负数

    <style>
    body{
        margin: 20px;
    }
    
    .float-left{
        float: left;
    }

    .clearfix:after{
        content: '';
        display: table;
        clear: both;
    }

    .container{
        border:1px solid #ccc;
        padding: 10px;
        width: 300px;
        height: 300px;
    }
    .container .item{
        width: 100px;
        height: 100px;
    }
    .container .border-blue{
        border: 1px solid blue;
        margin-right: -20px;

    }
    .container .border-red{
        border: 1px solid red;
    }
style>

<body>
    <p>用于测试 margin right 的负数情况p>
    <div class="container clearfix">
        <div class="item border-blue float-left">
            this is item 1
        div>
        <div class="item border-red float-left">
            this is item 2
        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
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    在这里插入图片描述

  • 相关阅读:
    水库大坝安全管理主要问题和维护措施
    （附源码）springboot 中小学餐饮配送系统 毕业设计645661
    MySQL 索引介绍和最佳实践
    贝壳找房上海研发全员被优化，公司回应来了！
    Linux关于gittee的远端仓库的连接和git三板斧
    什么是RDB和AOF？
    mysql基于SSM的自习室管理系统毕业设计源码201524
    NeurIPS 23 Spotlight丨3D-LLM：将3D世界注入大语言模型
    redis运维(十四) hash缓存案例
    解决RequestParam.value() was empty on parameter 0
  • 原文地址：https://blog.csdn.net/zx1041561837/article/details/127865065