首頁猿問如何解釋下面這個css現(xiàn)象

如何解釋下面這個css現(xiàn)象

JavaScript

海綿寶寶撒 2019-05-23 11:11:45

Documentdiv{/*border:1pxsolid#000;*/width:50%;margin:0auto;font-size:16px;text-align:center;}#dot{margin-bottom:50px;}h1{margin:0auto;width:20px;}123456789.hellowindow.onload=function(){functionanimate(){document.getElementById('height').innerHTML=window.getComputedStyle(document.body.firstElementChild).height;vardot=document.getElementById('dot');varm=window.getComputedStyle(dot).marginBottom;console.log(m);m=parseInt(m);m-=1;document.getElementById('dot').style['margin-bottom']=m+'px';requestAnimationFrame(animate);}animate();}腳本的內(nèi)容是把div元素的最后一個子元素的marginBottom值不斷減少,并把div的元素的高度輸出到div的第一個子元素中其中當(dāng)div元素設(shè)置了邊框的時候,減少最后一個元素的marginBottom值會發(fā)現(xiàn)div這個父元素的高度在不斷減少當(dāng)div元素不設(shè)置邊框的時候,減少最后一個元素的marginBottom值會發(fā)現(xiàn)div這個父元素的高度不再變化而且下面定義的h1的hello在以上的兩種情況下都可以穿透div里面的文本請問一下如何解釋這種現(xiàn)象

查看完整描述

2 回答

滄海一幻覺

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超5個贊

個人認(rèn)為這是外邊距合并的問題。如果在父元素與其最后一個子元素之間不存在邊框、內(nèi)邊距、行內(nèi)內(nèi)容、height、min-height、max-height將兩者的margin-bottom分開，那么這兩對外邊距之間會產(chǎn)生折疊。此時子元素的外邊距會“溢出”到父元素的外面。問題一div元素不設(shè)置邊框的時候,減少最后一個元素的marginBottom值會發(fā)現(xiàn)div這個父元素的高度不再變化。這是因?yàn)樵O(shè)置在dot元素上的外邊距相當(dāng)于轉(zhuǎn)移到父元素上，所以通過window.getComputedStyle(document.body.firstElementChild).height取到的div的content-box高度是不會發(fā)生變化的。問題二當(dāng)div元素設(shè)置了邊框的時候,減少最后一個元素的marginBottom值會發(fā)現(xiàn)div這個父元素的高度在不斷減少。設(shè)置邊框后外邊距不再合并，所以div父元素content-box為子元素的border-box高度總和，會隨著dot元素的marigin-bottom減少而減少。問題三下面定義的h1的hello在以上的兩種情況下都可以穿透div里面的文本。有邊框時因?yàn)閐iv高度減少所以h1的布局位置上移；沒有邊框時，因?yàn)閐iv有負(fù)的margin-bottom所以布局位置上移。

反對回復(fù) 2019-05-23

叮當(dāng)貓咪

TA貢獻(xiàn)1776條經(jīng)驗(yàn) 獲得超12個贊

你應(yīng)該是理解上出現(xiàn)了偏差，設(shè)置元素的margin-bottom，并不會改變元素的height的應(yīng)用值，height屬性只是其內(nèi)容區(qū)的高度。對于現(xiàn)象解釋，首先要知道：塊級元素正常布局時，盒子間的距離是由margin邊決定的。第一個情況：因?yàn)橥膺吘嗪喜?，兩個盒子的距離就是負(fù)數(shù)了，效果就是hello上移（為什么負(fù)margin會上移，我也沒找到相關(guān)介紹，可能因?yàn)槭歉鞔鬄g覽器廠商的共識吧），所以會穿透文本第二個情況：因?yàn)榈谝粋€盒子高度是auto,根據(jù)布局規(guī)則#dot設(shè)置負(fù)margin會導(dǎo)致它的高度變矮，然后hello和它距離不會變化，但它的overflow為visible所以內(nèi)容會溢出，看起來也是hello穿透文本

反對回復(fù) 2019-05-23