css布局中負margin怎么用

小編給大家分享一下css布局中負margin怎么用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

員工經(jīng)過長期磨合與沉淀，具備了協(xié)作精神，得以通過團隊的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。成都創(chuàng)新互聯(lián)公司堅持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因為“專注所以專業(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供網(wǎng)站制作、做網(wǎng)站、微信公眾號開發(fā)、電商網(wǎng)站開發(fā)，成都微信小程序，軟件按需開發(fā)網(wǎng)站等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。

一、左右欄寬度固定，中間欄寬度自適應(yīng)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>左右欄寬度固定，中間欄寬度自適應(yīng)</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>

css布局中負margin怎么用

縮小窗口的效果：

css布局中負margin怎么用

二、除去列表右邊框

<!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>

效果：

css布局中負margin怎么用

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

容器有邊框，容器中的列表也有底邊框（border-bottom），導致最后一個li的border-bottom與容器的外邊框重疊，分類列表中通常會遇到這個情況；

如圖：

css布局中負margin怎么用

例：

<!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>女裝 /內(nèi)衣</li>
    <li>男裝 /運動戶外</li>
    <li>女鞋 /男鞋 /箱包</li>
    <li>化妝品 /個人護理</li>
    <li> 腕表 /珠寶飾品 /眼鏡</li>
    <li>零食 /進口食品 /茶酒</li>
    <li>生鮮水果</li>
    <li>大家電 /生活電器</li>
</ul>
</body>
</html>

效果：

css布局中負margin怎么用

注意：當容器邊框顏色和容器中列表邊框的顏色不一樣時，在容器元素上要添加overflow：hidden;將溢出部分隱藏起來；

看完了這篇文章，相信你對“css布局中負margin怎么用”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當前標題：css布局中負margin怎么用
文章URL：http://aaarwkj.com/article30/jesjpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、靜態(tài)網(wǎng)站、自適應(yīng)網(wǎng)站、建站公司、云服務(wù)器、App設(shè)計

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

css布局中負margin怎么用