margin負邊距的使用

阿新 • • 發佈：2019-01-11

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的話，最後一個下邊框依然會出現在列表下面

css margin負邊距之列布局（列表、聖杯、雙飛翼）

door ont oct class containe resp 固定寬度單元自適應技術服務於應用，技術來源於應用。應用1：當接到設計師給的設計圖時（如下圖），發現每列左右和上下文保持一致，頓時整個心情就不好了。因為要兼顧響應式，即沒辦法保證每個列表單元的具體位置，

margin 負邊距的知識點

知識點幫助聖杯布局一起學變寬 body 經典動態部分本文介紹了css負邊距在普通文檔流中的作用和效果、左和右的css負邊距對元素寬度的影響、css負邊距對浮動元素的影響、css負邊距對絕對定位元素的影響。懶人建站偶然瀏覽到這篇文章，感覺非常好，於是分享到這裏，

margin負邊距的使用

1.左右列固定，中間列自適應： body{ margin:0; padding:0; } .main{ float:left; width:1

探究負邊距（negative margin）原理

W3C規範在介紹margin時有這樣一句話： Negative values for margin properties are allowed, but there may be implementation-specific limits. 於是，聰明的開發者們就發現了很多負邊距的

絕對定位和負邊距的應用

gre 居中一半 ack int 情況 nbsp ima 結果　　 1、絕對定位+負邊距解決垂直居中的問題 1方法： a：父容器加相對定位 b：給字元素加絕對定位 c：top left：50% d：margintop（height），marginleft（widt

css負邊距之詳解(子絕父相)

來源 | http://segmentfault.com 原文 | The Definitive Guide to Using Negative Margins 自從1998年CSS2作為推薦以來，表格的使用漸漸退去，成為歷史。正因為此，從那以後CSS佈局成為了優雅程

content內容，padding內邊距，board邊框，margin外邊距

圖解CSS padding、margin、border屬性 W3C組織建議把所有網頁上的對像都放在一個盒(box)中，設計師可以通過建立定義來控制這個盒的屬性，這些對像包括段落、列表、標題、圖片以及層。盒模型主要定義四個區域：內容(content)、內邊距(p

web開發邊距屬性 margin

1.功能介紹：通過<body>元素中的topmargin,leftmargin,rightmargin,bottommargin屬性設定頁面邊距，調整頁面顯示內容與瀏覽器邊框的距離，使內容顯得更加美觀。 2.語法說明： <body topmargin="value"

HTML邊距設定之padding和margin

在CSS中margin是指從自身邊框到另一個容器邊框之間的距離，就是容器外距離。在CSS中padding是指自身邊框到自身內部另一個容器邊框之間的距離，就是容器內距離。下面講解 padding和margi

IE6下margin雙倍邊距

開始工作之後任務都是要求相容所有瀏覽器，之前都在IE8+版本上相容，大概瞭解些IE6的bug但一直也沒實際遇到過 .. 藉此機會，把我遇到的所有ie bug記錄下來～共勉！觸發條件

CSS中的外邊距margin與內邊距padding的用法

margin 清除周圍的（外邊框）元素區域。margin 沒有背景顏色，是完全透明的。margin 可以單獨改變元素的上，下，左，右邊距，也可以一次改變所有的屬性。auto設定瀏覽器邊距。這樣做的結果會依賴於瀏覽器length定義一個固定的margin（使用畫素，pt，em等

條款一：*{margin:0; padding:0;},清除有可能的預設髒邊距；

如何正確清除瀏覽器預設髒資料驗證平臺： WebKit ： chrome | safari Presto ：opera Gecko ：firefox Trident ：ie9 一、body髒外邊距第一個程式足以讓我困惑，簡單的給html和body分別設定背景色。

Android--邊距(margin)與內邊距(padding)

邊距屬性是佈局引數，決定了元件間的距離。而內邊距並非佈局引數，android:padding告訴元件，在繪製元件自身時，要比所含內容大多少。 <Button android:

IE6下margin雙倍邊距Bug的處理辦法

改了一天，我才發現了問題，除了IE6雙倍邊距之外，其他的瀏覽器都沒有問題，為此改了無數次的程式碼。為了修復雙倍邊距bug，整理了一下的資料。一、什麼是雙邊距Bug？先來看圖：我們要讓

清除子元素margin導致的父元素邊距異常

<html> <head> <style> *{margin:0;padding:0} .box { background-color:gray;

css教程系列9：內邊距（padding）和外邊距（margin）

1 css總結9：內邊距和外邊距通過css總結8：盒子模型可知：內邊距（padding），外邊距（margin）。可以影響盒子在瀏覽器的位置。1.1 padding使用：{padding：上右下左} 示例：div {padding: 50px 10px 20px 30p

css之去除html標籤預設的外邊距margin和內邊距padding,通用工具類 base.css

@charset "utf-8"; /*! * @名稱：base.css * @功能：1、重設瀏覽器預設樣式 * 2、設定通用原子類 */ /* 防止使用者自定義背景顏色對網頁的影響，新增讓使用者可以自定義字型 */ html { backgrou

第七天-css基礎（行高，盒子模型，邊距）

昨天固定整理 .com add 多行 png 居中 lin 摘要: 基礎知識-css第七天，昨天因為同學的婚禮，所以沒有整理，今天繼續，今天是css基礎的最後一天，知識點不多也不難，主要是後期多練習，鞏固前面學習的知識。還有2個案例的時候視頻，下周學習。下周也要開啟js

邊框和邊距

div title 設置期待 music 邊距 ng- add 屬性 1.盒子模型屬性 width：寬 height:高 border:邊框 padding:內邊框 margin:外邊框2.邊框 border:邊框 border-color:邊框顏色 border-wid

css 的包含塊、負外邊距，字體，文本行高

區別網站默認 lin 文檔 cal 一行 splay inline 一、包含塊目的：確定元素的位置和相對大小（%） 1.正常文檔流元素和浮動元素 ---- 父元素的 content-box 2.絕對定位元素 ---- 父元素的

margin負邊距的使用

1.左右列固定，中間列自適應：

2.去除列表右邊框

3.去除列表的下邊框

相關推薦