亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

關(guān)于子元素的margin-top對(duì)父級(jí)容器無(wú)效

fsmStudy / 2470人閱讀

摘要:其實(shí)合并還有其他的形式,比如說(shuō)父層的與一系列子層中第一個(gè)層的合并上層的與下層的合并,此時(shí)值為合并值中的最大值。至于負(fù),就從正相鄰的最大值中減去負(fù)相鄰的絕對(duì)值的最大值。

如果不想看那么長(zhǎng),看下面這句話就好了。

剛開(kāi)始我沒(méi)看到這個(gè)總結(jié)時(shí)一直是使用自己摸索出來(lái)paddin-top解決,發(fā)現(xiàn)該方式并不好。親測(cè)給父級(jí)加一個(gè)overflow不為visiable的屬性就直接解決了,簡(jiǎn)單明了。

這是在做布局時(shí)的一個(gè)經(jīng)典問(wèn)題。那這個(gè)問(wèn)題是怎么產(chǎn)生的呢?主要是合并margin的問(wèn)題,紅色層(子層)的margin-top與黃色層(父層)相合并,產(chǎn)生了共同的margin-top。其實(shí)合并margin還有其他的形式,比如說(shuō):

  1. 父層的margin-top與一系列子層中第一個(gè)層的margin-top合并
  2. 上層的margin-bottom與下層的margin-top合并,此時(shí)margin值為合并margin值中的最大值。至于負(fù)margin,就從正相鄰margin的最大值中減去負(fù)相鄰margin的絕對(duì)值的最大值。如果沒(méi)有正margin,就用0減去相鄰margin的絕對(duì)值的最大值
  3. 層高為0時(shí),自身的margin-top和margin-bottom合并

那如何解決這個(gè)問(wèn)題呢,w3.org給出了思路:

  1. 一個(gè)浮動(dòng)的盒與任何其它盒之間的margin不會(huì)合并(甚至一個(gè)浮動(dòng)盒與它的流內(nèi)子級(jí)之間也不會(huì))
  2. 建立了新的塊格式化上下文的元素(例如,浮動(dòng)盒與’overflow’不為’visible’的元素)的margin不會(huì)與它們的流內(nèi)子級(jí)合并
  3. 絕對(duì)定位的盒的margin不會(huì)合并(甚至與它們的流內(nèi)子級(jí)也不會(huì))
  4. 內(nèi)聯(lián)盒的margin不會(huì)合并(甚至與它們的流內(nèi)子級(jí)也不會(huì))
  5. 一個(gè)流內(nèi)塊級(jí)元素的bottom margin總會(huì)與它的下一個(gè)流內(nèi)塊級(jí)兄弟的top margin合并,除非兄弟有空隙
  6. 一個(gè)流內(nèi)塊級(jí)元素的top margin會(huì)與它的第一個(gè)流內(nèi)塊級(jí)子級(jí)的top margin合并,如果該元素沒(méi)有top border,沒(méi)有top padding并且該子級(jí)沒(méi)有空隙
  7. 一個(gè)’height’為’auto’并且’min-height’為0的流內(nèi)塊級(jí)盒的bottom margin會(huì)與它的最后一個(gè)流內(nèi)塊級(jí)子級(jí)的bottom margin合并,如果該盒沒(méi)有bottom padding并且沒(méi)有bottom border并且子級(jí)的bottom margin不與有空隙的top margin合并
  8. 盒自身的margin也會(huì)合并,如果’min-height’屬性為0,并且既沒(méi)有top或者bottom border也沒(méi)有top或者bottom padding,并且其’height’為0或者’auto’,并且不含行盒,并且其所有流內(nèi)子級(jí)的margin(如果有的話)都合并了

簡(jiǎn)單的來(lái)講,就是

  1. 都用float來(lái)定位(有條件要求,適用范圍較廣)
  2. 為父元素添加overflow不為visiable 的屬性 (適用范圍極廣,推薦使用)
  3. 為元素添加border(一般不用)
  4. 使用絕對(duì)定位(適用范圍較窄)
  5. 父元素增加padding-top屬性(改變尺寸,不建議使用)

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

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

相關(guān)文章

  • html+css 核心知識(shí)總結(jié)

    摘要:空元素,主要講下可算內(nèi)聯(lián)元素,因?yàn)榭膳c其他元素同行,且寬高對(duì)其起作用。提示對(duì)內(nèi)聯(lián)元素寬高起作用,請(qǐng)使用談?wù)剬?duì)定位的理解生成絕對(duì)定位的元素,相對(duì)于定位以外的第一個(gè)父元素進(jìn)行定位。 Html 1.解釋 ,主要從utf-8展開(kāi),utf-8是一種字符編碼,該編碼是全世界通用的,意思是假如項(xiàng)目涉及多語(yǔ)言,那么只能使用該編碼方式。 是使用html5文檔類型。告知瀏覽器的解析器,用什么文檔類型 ...

    jindong 評(píng)論0 收藏0
  • html+css 核心知識(shí)總結(jié)

    摘要:空元素,主要講下可算內(nèi)聯(lián)元素,因?yàn)榭膳c其他元素同行,且寬高對(duì)其起作用。提示對(duì)內(nèi)聯(lián)元素寬高起作用,請(qǐng)使用談?wù)剬?duì)定位的理解生成絕對(duì)定位的元素,相對(duì)于定位以外的第一個(gè)父元素進(jìn)行定位。 Html 1.解釋 ,主要從utf-8展開(kāi),utf-8是一種字符編碼,該編碼是全世界通用的,意思是假如項(xiàng)目涉及多語(yǔ)言,那么只能使用該編碼方式。 是使用html5文檔類型。告知瀏覽器的解析器,用什么文檔類型 ...

    szysky 評(píng)論0 收藏0
  • margin詳解

    摘要:二的賦值普通元素的百分比都是相對(duì)于容器的寬度計(jì)算。絕對(duì)定位元素的百分比,絕對(duì)定位元素的百分比是相對(duì)于第一個(gè)定位祖先元素的寬度計(jì)算應(yīng)用寬高自適應(yīng)矩形傳送門之所以會(huì)是,是因?yàn)榇怪狈较蛏习l(fā)生重疊。 一. margin對(duì)尺寸的影響 1.可視尺寸 a.適用于沒(méi)有設(shè)定width/height的普通block水平元素float元素、absolute/fixed元素、inline元素、table-ce...

    darry 評(píng)論0 收藏0
  • 浮動(dòng)

    摘要:浮動(dòng)會(huì)導(dǎo)致父元素高度坍塌示例代碼效果如上圖所示,浮動(dòng)元素脫離了文檔流,并不占據(jù)文檔流的位置,自然父元素也就不能被撐開(kāi),所以沒(méi)了高度,導(dǎo)致父元素高度坍塌。 最近在學(xué)浮動(dòng)的知識(shí),下面總結(jié)了一些浮動(dòng)的一些特征 1. 塊級(jí)元素浮動(dòng)將并排顯示,不再獨(dú)占一行 示例代碼: Document .box2{ w...

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

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

0條評(píng)論

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