成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css 的margin學(xué)習(xí)筆記

leiyi / 1751人閱讀

摘要：的特性始終是透明的。例如就等于如果只有兩個(gè)值，第一個(gè)值表示上下值，第二個(gè)值為左右的值。垂直外邊距合并問題外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

Margin的特性

margin始終是透明的。

margin通過使用多帶帶的屬性，可以對(duì)上、右、下、左的外邊距進(jìn)行設(shè)置。即：margin-top、margin-right、margin-bottom、margin-left。

外邊距的 margin-width 的值類型有：auto | length | percentage

也可以使用簡寫的外邊距屬性同時(shí)改變所有的外邊距：margin: top right bottom left;

  
1、如果margin只有一個(gè)值，表示上右下左的margin同為這個(gè)值。例如：margin:10px; 就等于 margin:10px

  10px 10px 10px;

  
  
2、如果 margin 只有兩個(gè)值，第一個(gè)值表示上下margin值，第二個(gè)值為左右margin的值。例如：margin:10px 20px;

  就等于 margin:10px 20px 10px 20px;

  
  
3、如果margin有三個(gè)值，第一個(gè)值表示上margin值，第二個(gè)值表示左右margin的值，第三個(gè)值表示下margin的值。例如：margin:10px

  20px 30px; 就等于 margin:10px 20px 30px 20px;

  
  
4、如果margin有四個(gè)值，那這四個(gè)值分別對(duì)應(yīng)上右下左這四個(gè)margin值。例如：margin:10px 20px 30px 40px;

在實(shí)際應(yīng)用中，不推薦使用三個(gè)值的margin，一是容易記錯(cuò)，二是不容易日后修改，一開始如果寫成margin:10px 20px 30px;日后需求改動(dòng)為上10px，右30px，下30px，左20px，你還是得把這個(gè)margin拆開為margin:10px 30px 30px 20px;費(fèi)力且不討好，不如一開始就老老實(shí)實(shí)的寫成margin:10px 20px 30px 20px;來的實(shí)在，不要為了節(jié)省倆字節(jié)而讓日后再次開發(fā)的成本上升。

垂直外邊距合并問題

外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

  
注釋：只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。

W3 CSS 外邊距合并
發(fā)生這個(gè)問題的原因是:根據(jù)規(guī)范，一個(gè)盒子如果沒有上補(bǔ)白(padding-top)和上邊框(border-top)，那么這個(gè)盒子的上邊距會(huì)和其內(nèi)部文檔流中的第一個(gè)子元素的上邊距重疊。

演示

要解決垂直外邊距合并，只需為父元素例子中的middle元素增加一個(gè)border-top或者padding-top即可解決這個(gè)問題。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110952.html

相關(guān)文章

  • 【學(xué)習(xí)筆記】CSS深入理解之margin

    摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記與容器的尺寸可視尺寸對(duì)于沒有設(shè)定的塊元素，可改變?cè)厮椒较虻目梢暢叽缯紦?jù)尺寸對(duì)于元素，可改變?cè)厮酱怪狈较虻恼紦?jù)尺寸與百分比單位普通元素的百分比都是相對(duì)于容器的寬度計(jì)算的絕對(duì)定位元素的百分比是相對(duì)于包含塊的寬 張?chǎng)涡竦腃SS深入理解之margin學(xué)習(xí)筆記 margin與容器的尺寸 可視尺寸：對(duì)于沒有設(shè)定width的塊元素，margin可改變?cè)厮椒较?..

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

  • 重學(xué)前端學(xué)習(xí)筆記（二十五）--CSS的正常流

    摘要：一正常流的行為正常流的排版行為依次排列，排不下了換行。在正常流基礎(chǔ)上，有相關(guān)規(guī)則，使得一些盒占據(jù)了正常流需要的空間，可以把理解為文字環(huán)繞。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請(qǐng)聯(lián)...

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

  • 重學(xué)前端學(xué)習(xí)筆記（二十五）--CSS的正常流

    摘要：一正常流的行為正常流的排版行為依次排列，排不下了換行。在正常流基礎(chǔ)上，有相關(guān)規(guī)則，使得一些盒占據(jù)了正常流需要的空間，可以把理解為文字環(huán)繞。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請(qǐng)聯(lián)...

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

  • 重學(xué)前端學(xué)習(xí)筆記（二十五）--CSS的正常流

    摘要：一正常流的行為正常流的排版行為依次排列，排不下了換行。在正常流基礎(chǔ)上，有相關(guān)規(guī)則，使得一些盒占據(jù)了正常流需要的空間，可以把理解為文字環(huán)繞。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請(qǐng)聯(lián)...

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

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

0條評(píng)論

leiyi

男|高級(jí)講師

TA的文章

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