CSS知识梳理之---margin

最新推荐文章于 2024-09-18 22:18:02 发布

原创最新推荐文章于 2024-09-18 22:18:02 发布 · 547 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#margin #css #应用

CSS知识理解专栏收录该内容

14 篇文章

订阅专栏

本文详细探讨了 CSS 中 margin 属性的各种应用场景，包括对不同显示类型元素的影响、如何利用负值实现元素重叠及特殊布局，以及对绝对定位元素的影响。

梳理完position，来到margin，每个知识点一个一个攻破啦~~
虽然margin可以应用到所有元素，但display属性不同时，表现也不同
1. block元素可以使用四个方向的margin值
2. inline元素使用上下方向的margin值无效
3. inline-block使用上下方向的margin负值看上去无效

Note：

inline-block使用上下方向的margin负值只是看上去无效，这与其默认的vertical-align:baseline有关系，当垂直对齐的属性值为其他值时，则会显示不同的视觉效果

负边距对这些由文档流控制的元素的作用是，会使它们在文档流中的位置发生偏移，但这种偏移不同于相对定位，通过相对定位偏移后，其仍然会坚守着它原来占据的空间，不会让文档流的其它元素乘虚而入。而通过负边距进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间。还要注意的是，文档流只能是后面的流向前面的，即文档流只能向左或向上流动，不能向下或向右移动。
一个没有设定高度的块状元素，其高度是自动的，具体来说就是由它里面的文档流最后的位置决定的。

左和右的负边距对元素宽度的影响

负边距不仅能影响元素在文档流中的位置，还能增加元素的宽度！这个作用能实现的前提是：该元素没有设定width属性（当然width:auto是可以的）。

<style>
       #first{
        margin: 0 auto;
        width: 200px;
        border: 1px solid red;
       }
       #second{
        height: 200px;
        border: 1px solid blue;
        margin-left: -10px;
        margin-right: -10px;
       }
    </style>
<body>
    <div id="first">
        <div id="second"></div>
    </div>
</body>

这里写图片描述

可以看到的是，蓝色边框的子元素的宽度变大了，而不是整体的移动了。

注意：
margin-top为负值不会增加高度，只会产生向上位移
margin-bottom为负值不会产生位移，会减少自身的供css读取的高度

理解一下上面的margin-bottom：
这里写图片描述

<style>
    #box {
        width: 50%;
        margin-bottom: -25px;
        background-color: rgba(90, 243, 151, 0.8);
        height: 50px;
    }
    </style>
<body>
    <div id="box">
        box
    </div>
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
    <script>
    var x = $('#box').height()
    console.log(x);
    </script>
</body>

实现如下布局：
这里写图片描述
虽然浏览器将整个box都渲染出来了，但是css能读取到的高度确是自身的一半。

<style>
        body,ul,li{
            padding: 0;
            margin:0;
        }
        .container{
            height: 210px;
            width: 460px;
            border: 5px solid #000;
        }
        ul{
            height: 210px;
            list-style: none;
            overflow: hidden;
            margin-right: -20px;
        }
        li{
            height: 100px;
            width: 100px;
            background: #09F;
            float: left;
            margin-right: 20px;
            margin-bottom: 10px;
        }
    </style>
<body>
   <div class="container">
    <ul>
        <li>子元素1</li>
        <li>子元素2</li>
        <li>子元素3</li>
        <li>子元素4</li>
        <li>子元素5</li>
        <li>子元素6</li>
        <li>子元素7</li>
        <li>子元素8</li>
    </ul>
</div>

负边距对浮动元素的影响

<style>
        #box1{
            width: 200px;
            height: 200px;
            float: left;
            border: 1px solid black;
            background: orange;
        }
        #box2{
            width: 200px;
            height: 200px;
            float: left;
            border: 1px solid black;
            background: red;
        }
        #box3{
            width: 200px;
            height: 200px;
            float: left;
            border: 1px solid black;
            background: yellow;
        }
    </style>
<div id="main">
    <div id="box1">元素1</div>
    <div id="box2">元素2</div>
    <div id="box3">元素3</div>
</div>

效果如下：
这里写图片描述
当然，因为设置了浮动，当将屏幕缩小的时候，最后一个元素被撑到了下面。

如果现在，我们给所有元素都设置一个margin-right负值呢？设置margin-right：-50px；

可以看到，元素发生了重叠啦。
将屏幕缩小试试看
这里写图片描述

然后因为宽度不够，元素3掉下来了。我们给元素3设一个margin-left:-80px；
这里写图片描述

基本原理就是这样，他的应用呢？
那些说得很好听的什么圣杯布局、双飞翼布局啊什么的，都是利用这个原理实现的。就是某个元素虽然是写在了后面，但可以通过负边距让它在浏览器显示的时候是在前面的。

负边距对绝对定位元素的影响

绝对定位的元素定义的top、right、bottom、left等值是元素自身的边界到最近的已定位的祖先元素的距离，这个元素自身的边界指的就是margin定义的边界，所以，如果margin为正的时候，那它的边界是向外扩的，如果margin为负的时候，则它的边界是向里收的。利用这点，就有了经典的利用绝对定位来居中的方法：

<style>
        body{padding: 0;
            margin:0;}
        div{
            width: 100px;
            height: 100px;
            background: #f00;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
    </style>
<body>
<div></div>
</body>