浅谈css布局中负margin的使用方法

【推荐教程：CSS视频教程 】

一、左右栏宽度固定，中间栏宽度自适应

!DOCTYPE htML>
    html>
    head>
        meta charset="UTF-8">
        tITle>
    左右栏宽度固定，中间栏宽度自适应/title>
        style>
        body{
                margin: 0;
                padding: 0;
                min-width:600px;
                color: #fff;
                font-weight: bold;
                font-Size: 30px;
                text-align: center;
        }
        .main{
                width: 100%;
                float:left;
        }
        .content{
                margin:0 250px;
                background: #000;
                height: 200px;
        }
        .fl,.fr{
                float: left;
                width:240px;
                height:200px;
        }
        .fl{
                margin-left: -100%;
                background: red;
        }
        .fr{
                margin-left: -240px;
                background: green;
        }
        /style>
    /head>
    body>
    div>
        div>
    main/div>
    /div>
    div>
    left/div>
    div>
    right/div>
    /body>
    /html>
    

缩小窗口的效果：

二、除去列表右边框

!DOCTYPE html>
    html>
    head>
        meta charset="UTF-8">
        title>
    除去列表右边框/title>
        style>
        *{
    margin:0;
    padding: 0;
}
        body{
background: #000000}
        ul,li{
    list-style: none;
}
        #content{
                width:630px;
                height:400px;
                background: #ccc;
                margin:30px auto;
        }
        #content ul{
    margin-right:-10px;
}
        #content ul li{
                float: left;
                width:150px;
                height:195px;
                margin-right: 10px;
                margin-bottom: 10px;
                background: #e4004e;
                color:#fff;
                font-weight:bold;
        }
        /style>
    /head>
    body>
    div id="content">
        ul>
            li>
    除去列表右边框/li>
            li>
    除去列表右边框/li>
            li>
    除去列表右边框/li>
            li>
    除去列表右边框/li>
            li>
    除去列表右边框/li>
            li>
    除去列表右边框/li>
            li>
    除去列表右边框/li>
            li>
    除去列表右边框/li>
        /ul>
    /div>
    /body>
    /html>
    

效果：

@H_777_34@

三、除去列表最后一个li的底边框（border-bottom）

容器有边框，容器中的列表也有底边框（border-bottom），导致最后一个li的border-bottom与容器的外边框重叠，分类列表中通常会遇到这个情况；

如图：

例：

!DOCTYPE html>
    html>
    head>
        meta charset="UTF-8">
        title>
    除去列表最后一个li的底边框/title>
        style>
        *{
    padding: 0;
    margin:0;
}
        ul,li{
    list-style: none;
}
        #category{
                margin:30px auto;
                width:350px;
                background: #eee;
                border: 1px solid #ccc;
                overflow: hidden;
    /*将超出的部分隐藏,最后一个li的border-bottom超出，被隐藏了;
*/        }
        #category li{
                width:100%;
                height:49px;
                line-height:49px;
                text-indent: 30px;
                border-bottom: 1px dashed #e4007e;
                margin-bottom: -1px;
        }
        /style>
    /head>
    body>
    ul id="category">
        li>
    女装 /内衣/li>
        li>
    男装 /运动户外/li>
        li>
    女鞋 /男鞋 /箱包/li>
        li>
    化妆品 /个人护理/li>
        li>
     腕表 /珠宝饰品 /眼镜/li>
        li>
    零食 /进口食品 /茶酒/li>
        li>
    生鲜水果/li>
        li>
    大家电 /生活电器/li>
    /ul>
    /body>
    /html>
    

效果：

注意：当容器边框颜色和容器中列表边框的颜色不一样时，在容器元素上要添加overflow：hidden; 将溢出部分隐藏起来；

更多编程相关知识，请访问：编程视频！！

以上就是浅谈css布局中负margin的使用方法的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！