margin-left 和 margin-right 同時設為負值的新認知

阿新 • • 發佈：2018-11-14

方向 right ack 認知 har :hover mar 圖片 lin

之前對margin的理解，都是用來改變容器位置的，今天發現在特定情況下，margin也可以改變容器的大小。

當不指定容器的寬度（這裏指的是具體值和百分比），即容器的寬度為width: auto時，同時給該容器的margin-left和margin-right設置一個負值，可以增大容器的寬度。（垂直方向上不是同理的）

案例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" />
        <style>
            .wrap {
                width: 500px;
                height: 500px;
                background: #ccc;
                margin: 0 auto;             
            }           
            .test {
                height: 50px;
                border: 1px solid #0000FF;
            }
            .test:hover {
                margin-left: -20px;
                margin-right: -20px;
            }
            .icon-color {
                color: blue;
            }
        </style>
    </head>
    <body class="icon-color">
        <div class="wrap">
            <div class="test">子級</div>
            父級
        </div>
    </body>
</html>

效果圖：
技術分享圖片

技術分享圖片

具體原理還不懂，學無止境，繼續加油......

參考文章：https://www.jianshu.com/p/549aaa5fabaa

margin-left 和 margin-right 同時設為負值的新認知

方向 right ack 認知 har :hover mar 圖片 lin 之前對margin的理解，都是用來改變容器位置的，今天發現在特定情況下，margin也可以改變容器的大小。當不指定容器的寬度（這裏指的是具體值和百分比），即容器的寬度為width: auto時

margin塌陷和 margin合併兩個BUG

Margin塌陷：正常情況：如上所示：.wrap設定了margin-left就相對與他的父級元素向右移動了100px; .box設定了margin-left就相對與他的父級元素(.wrap)向右也移動了100px 但是：如果在垂直方向設定margin-t

python subprocess模塊監控子進程的2種方式忙等待和立即返回同時設置子進程超時

code one imp select tof 子進程 cmd pipe end 下面的資料是關於python subprocess模塊監控子進程的2種方式忙等待和立即返回同時設置子進程超時時間的代碼。 import subprocess import os i

解決margin塌陷和margin合併

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> <meta n

行內元素可以設置padding和margin嗎

行內元素 padding第一：行內元素與寬度寬度不起作用span {width:200px;}沒有變化第二：行內元素與高度高度不起作用span{height:200px;}沒用變化第三：行內元素與padding,marginspan{padding:200px;}影響左右，不影響上下行內元素（inlin

CSS 中將margin設定為負值的原理和應用

現如今，負margin技術的應用可謂越來越廣，任一個大型站點驚鴻一瞥之下都會有其身影所在。個人認為負margin技術是學習css路上必不可缺少的課題之一，許多高階應用及疑難雜症修復都可以使用負margin技術進行實現。負margin理論：在說明什麼是負

CSS雙飛翼佈局和聖盃佈局margin-left:-100%;等內容理解

網上搜索雙飛翼佈局和聖盃佈局都會有許多不錯的文章，在這裡給大家推薦一篇部落格看完之後，我來補充一點細節的東西！！！如何理解margin-left:-100%及margin-left:300px；看完這個圖解，上面的問題就應該沒問題了！！具體的雙飛翼佈局方法請參

margin為負值產生的影響和常見佈局應用

所以今天整理些margin：負數會對哪些元素或者定位產生影響、margin為負值在web佈局中的應用做下總結。（不能說最全，我已經盡力收集整理）一、margin為負值產生的影響對於自身的影響當元素不存在width屬性或者（width：auto）的時候，負margin會

Windows10下python3和python2同時安裝 python2.exe、python3.exe和pip2、pip3設置

bsp net 運行安裝python all 能夠命令自動添加 exe 1、添加python2到系統環境變量打開，控制面板\系統和安全\系統，選擇高級系統設置，環境變量，選擇Path，點擊編輯，新建，分別添加D:\Python\python27和D:\P

Flex布局結合border:left/right; 來設置文字中間分割線

設置高度 com none eight 垂直有著 log 技術分享 border 今天設計給的稿件的分割線不是平常常見的那種，還給了兩條垂直的線。比如像這樣：看到這張圖，第一反應用兩條hr，再設置hr的border-left/right。然而這並不能實現這樣的效果。

margin值為負值

右移移動文檔流 www. log nbsp image 方法定位元素引用地址：http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 http://www.cnblogs.com/jsc

設置筆記本內網和外網同時使用

style 分享 blog print col mage 5.1 ont alt 保證外網已經連接並可上網的情況下, 插上內網網線,執行以下三步: 1.查看外網ip和內網ip及躍點數 cmd命令窗口輸入route print, 如下圖: 2.修改外網躍點數查看外網的In

HTML中padding和margin的區別和用法

布局語法 tom mil strong 替換元素它的一段 div 　 margin(外邊距) 定義:margin是用來隔開元素與元素的間距，發生在元素本身的外部，margin用於布局分開元素使元素與元素互不相幹。提示:margin: top right bottom

padding和margin的區別和作用及各種場合出現的bug

absolut 之間包括 net 無法 pfile .com 20px http 一、padding Padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制塊級元素內部, conte

vertical-align負值和margin-bottom負值的區別

ica clas 這一 width tro true utf class 怎樣先看一下vertical-align在W3C當中的值有哪一些：可是它有數值這一說確實很少提起，我們來看這麽一段代碼： <!DOCTYPE html> <html

Android中的padding和margin的區別

區別 you content and bsp schema out ring http 在Android的布局中，常常有人將padding和margin搞混，他們其實不一樣的，padding是該控件的內部距離。 magin是該控件與其他控件之間的距離。例如 <Line

VC將同一份代碼同時編譯為Dll和Exe的方法

導出函數接口 bool mod spa 新增 arpspoof 配置影響開發中經常遇到這樣的情況，需要開發一個某某功能的接口Dll，但是Dll不能直接調試，你至少需要一個Loader 但是Loader和Dll本身不在同一個工程裏，雖然都在本機的話並不影響源碼級調試，

Win2008、Win2012和Win2016操作系統設置多用戶同時遠程

會話遠程桌面輸入框運行鍵盤一個登錄用戶多用戶允許 Windows2008、Windows2012和Windows2016服務器版本操作系統默認情況下只能支持一個用戶遠程、如果第二個人遠程上去之後會直接把前面一個登錄用戶踢掉；所以我們需要解決這樣的事情。　　

Eclipse設置註釋模板和工作空間背景色為豆沙綠

scrip png col .com system eclipse 圖片 ons pear Eclipse Version: Photon Release (4.8.0)。首先上圖，根據圖上的步驟即可完成註釋模板的設置。 1 如何設置eclipse註釋模板的日期格式

mysql擷取字串函式left和right和substring和substring_index

15.擷取字串 (1)從左開始擷取字串 left(str,length) str:要擷取的字串 length:要擷取的長度 select left(t.szzbm, 6) from T_AEFIXX t (2)從右開始擷取字串 right(str,length) str:要擷取的字串 l

margin-left 和 margin-right 同時設為負值的新認知

之前對margin的理解，都是用來改變容器位置的，今天發現在特定情況下 ，margin也可以改變容器的大小。

相關推薦

之前對margin的理解，都是用來改變容器位置的，今天發現在特定情況下，margin也可以改變容器的大小。