国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css-負(fù)margin總結(jié)

leap_frog / 2101人閱讀

摘要：為負(fù)時(shí)，屬性是元素本身的右下邊為參考線水平向右下位移。總結(jié)盒子最后的顯示大小等于盒子的正，而負(fù)不會(huì)影響其大小。

這篇文章是從原博客轉(zhuǎn)載過來的，是2013年寫的，有些不對(duì)的地方請(qǐng)指出。


原文地址


博客地址 , 歡迎訂閱

這是一篇我自己關(guān)于負(fù)margin的理解，今天因?yàn)樽鲰?xiàng)目用到了負(fù)margin，幾經(jīng)找資料，終于搞懂了，就趕緊記下來，免得忘記了！

margin為正時(shí)，top、left屬性是以content上（左）或垂直上方相連元素margin的下（右）邊為參考線垂直向下（右）位移。

margin為負(fù)時(shí)，right、bottom屬性是元素本身的border右（下）邊為參考線水平向右（下）位移。

總結(jié)

盒子最后的顯示大小等于盒子的border+padding+正margin，而負(fù)margin不會(huì)影響其大小。

margin為負(fù)且盒子static時(shí)：

若屬性為top、left，盒子將被拉進(jìn)指定的方向;

若屬性為bottom、right,將后續(xù)的元素拖拉進(jìn)來，覆蓋本來的元素。

若width沒有被設(shè)置，設(shè)定負(fù)margin-left/right會(huì)將元素拖向?qū)?yīng)的方向，并增加寬度，此時(shí)的margin的作用就像padding一樣

選項(xiàng)卡demo

怎么樣實(shí)現(xiàn)上面菜單欄的選中狀態(tài)下沒有下邊框的效果？
一般的思路是每個(gè)菜單欄設(shè)置邊框，選中的狀態(tài)沒有下邊框

其實(shí)還可以這樣，邊框不是上面菜單欄的，而是下面內(nèi)容塊的：

明白了把，所以只要給菜單欄設(shè)置margin-bottom:-1px就可以讓下面的內(nèi)容塊上移1px，剛好讓菜單欄的背景色蓋住那個(gè)1px的邊框。
如果選中狀態(tài)沒有背景色，就悲劇了：

請(qǐng)看 demo

現(xiàn)在看這個(gè)例子沒有明顯展示出負(fù)margin的能力，再看下面的

負(fù)margin加寬元素

再看一個(gè)width沒有設(shè)置，通過負(fù)margin加寬的元素的布局例子，這是很常見的例子，如果不用負(fù)margin，就會(huì)很麻煩呢
demo

圣杯布局

因?yàn)锽FC有這個(gè)特性：

元素在設(shè)定width時(shí)，添加border、padding、margin會(huì)導(dǎo)致元素變寬；但是在沒有設(shè)定width時(shí)，元素會(huì)自動(dòng)填滿父元素，添加padding、border、margin會(huì)使元素變窄，減少量等于他們?nèi)齻€(gè)之和。

demo

負(fù)margin實(shí)現(xiàn)兩列等高布局

demo

參考文章

負(fù)值之美

以上是網(wǎng)上資料總結(jié)，我的總結(jié)就一句話：left、top不論正負(fù)自己動(dòng)，right、bottom不論正負(fù)別的元素動(dòng)！正的向外，負(fù)的向內(nèi)！考慮問題的時(shí)候還要考慮到盒子的特性問題！！

PS:遇到問題只要先想想什么是margin，margin的作用是什么，則負(fù)margin的工作原理則迎刃而解！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/111134.html

相關(guān)文章

  • CSS布局十八般武藝都在這里了

    摘要：清單一些說明注意文檔的書寫順序，先寫兩側(cè)欄，再寫主面板，更換后則側(cè)欄會(huì)被擠到下一列圣杯布局和雙飛翼布局都會(huì)用到。可以通過設(shè)置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設(shè)置相對(duì)布局，以及對(duì)應(yīng)的和值。 本文首發(fā)于知乎專欄：前端指南 CSS布局 布局是CSS中一個(gè)重要部分，本文總結(jié)了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實(shí)現(xiàn)方式（包括傳統(tǒng)的...

    includecmath 評(píng)論0 收藏0

  • 那些年，奇妙的圣杯與雙飛翼，還有負(fù)邊距

    摘要：奇妙的圣杯與雙飛翼相信很多人和我在學(xué)習(xí)前端差不多的時(shí)候就聽說過了圣杯布局與雙飛翼布局。他往前移動(dòng)之后，文檔流也會(huì)跟著移動(dòng)元素寬度負(fù)邊距負(fù)邊距可以增加元素的寬度，對(duì)于沒有的元素，負(fù)邊距可以加寬他們。 [TOC] 沒錯(cuò)，題目就是模仿《那些年，我們一起清除過的浮動(dòng)》而來的。 奇妙的圣杯與雙飛翼 相信很多人和我在學(xué)習(xí)前端差不多的時(shí)候就聽說過了圣杯布局與雙飛翼布局。關(guān)于取名無非是覺得長得像圣杯，...

    tianhang 評(píng)論0 收藏0

  • CSS 布局經(jīng)典問題初步整理

    摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對(duì)布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對(duì) CSS 布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...

    Amos 評(píng)論0 收藏0

  • css實(shí)現(xiàn)元素水平垂直居中

    摘要：結(jié)構(gòu)如下實(shí)驗(yàn)結(jié)果如下實(shí)現(xiàn)了子元素的水平垂直居中，同時(shí)可觀察到兩張圖溢出的方式不同絕對(duì)定位的溢出或或的溢出 1.絕對(duì)定位，利用負(fù)邊距 利用負(fù)邊距實(shí)現(xiàn)子元素居中(相對(duì)于父元素(position:relative))，需已知子元素的width與height；且把子元素的position設(shè)為absolute，絕對(duì)定位；以及設(shè)置left和top為50%；再加上負(fù)邊距，margin-left值為w...

    ninefive 評(píng)論0 收藏0

  • 負(fù)margin的幾個(gè)問題

    摘要：可是這個(gè)籬笆的寬度偏偏可以是個(gè)負(fù)值。圖當(dāng)我們?nèi)サ舻拇a中的后，竟然超出了的范圍也就是說它把負(fù)的絕對(duì)值，加到了自身的內(nèi)容中，這無疑增大了元素本身的寬度。總結(jié)如果元素沒有設(shè)置負(fù)邊距方向上的長度或?qū)挾龋?fù)邊距會(huì)使負(fù)邊距方向上的長度或?qū)挾仍黾印? ??????此文持續(xù)更新，發(fā)現(xiàn)有趣的東西??????負(fù)邊距是一個(gè)比較奇葩的東西，為什么說它奇葩呢？padding在border的里面；margin在b...

    ddongjian0000 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<