margin负边距的使用

最新推荐文章于 2019-10-20 11:11:23 发布

guyunlongwstc

最新推荐文章于 2019-10-20 11:11:23 发布

阅读量431

点赞数 1

本文链接：https://blog.csdn.net/guyunlongwstc/article/details/77683172

版权

1.左右列固定，中间列自适应：

 body{
            margin:0;
            padding:0;
        }
        .main{
            float:left;
            width:100%;
            text-align: center;
        }
        .main_body{
            margin:0 110px;
            background:#888;
            height:200px;
        }
        .left,.right{
            text-align: center;
            float:left;
            width:100px;
            height:200px;
            background:#C40000;
        }
        .left{
            margin-left:-100%;
        }
        .right{
            margin-left:-100px;
        }

<div class="main">
    <div class="main_body">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>

效果：

.main设置float的原因是让负边距div能够和.main显示在一行。

或者使用绝对定位的方式：

   *{
            margin: 0px;
            padding:0px;
        }
        .main{
            width:100%;
            text-align: center;
        }
        .main_body{
            margin: 0px 110px;
            background:#888;
            height: 200px;
        }
        .left{
            position: absolute;
            width: 100px;
            height: 200px;
            text-align: center;
            left:0px;
            top:0px;
            background-color: #C40000;
        }
        .right{
            position: absolute;
            width: 100px;
            height: 200px;
            text-align: center;
            right: 0px;
            top:0px;
            background-color: #C40000;
        }

<div class="main">
    <div class="main_body">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>

效果和刚才一样，但不需要.main 设置float，注意浮动元素和absolute元素必须设置width和height，div元素不设置width的话会自动占满一行。

2.去除列表右边框

 *{
            margin: 0px;
            padding:0px;
        }
        #test{
            margin:auto;
            width: 320px;
            height: 210px;
            border:2px solid blue;
            overflow: hidden;
            position: absolute;
            top: 0px;
            left:0px;
            bottom: 0px;
            right: 0px;
         }
        ul{
            height: 210px;
            margin-right: -10px;
            background-color: #2da77a;
        }
        li{
            width: 100px;
            height:100px;
            margin-right:10px ;
            margin-bottom:10px;
            background-color: #C40000;
            list-style: none;
            float: left;
        }

<div id="test">
    <ul>
        <li>子元素1</li>
        <li>子元素2</li>
        <li>子元素3</li>
        <li>子元素4</li>
        <li>子元素5</li>
        <li>子元素6</li>
    </ul>
</div>

注意：

.ul一定要设置height,不然没法撑开，不要设置width,不然margin-right负边距不起作用,margin-right为负不会吧父元素撑开。float 元素不会脱离父元素的左边界

第一，父元素不浮动，子元素不浮动，子元素内容可以填充父元素

第二，父元素浮动，子元素不浮动，子元素内容可以填充父元素

第三，父元素浮动，子元素浮动，子元素内容可以填充父元素

第四，父元素不浮动，子元素浮动，子元素内容不可以填充父元素

3.去除列表的下边框

 body,ul,li{margin:0;padding:0;}
        ul,li{list-style:none;}
        #test{
            margin:20px;
            width:390px;
            background:#F4F8FC;
            border-radius:3px;
            border:2px solid #D7E2EC;
            overflow: hidden;
        }
        #test li{
            height:25px;
            line-height:25px;
            padding:5px;
            border-bottom:2px dotted #D5D5D5;
            margin-bottom: -2px;

        }

<body>
<ul id="test">
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
</ul>
</body>

注意：margin-bottom为负不会把父元素撑开，不设置overflow的话，最后一个下边框依然会出现在列表下面

guyunlongwstc

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
margin负边距的使用

1.左右列固定，中间列自适应： body{ margin:0; padding:0; } .main{ float:left; width:100%; text-align: center; } .main_bo
复制链接

扫一扫