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

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

JavaScript

明月笑刀無(wú)情 2019-05-23 11:00:01

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元素的最后一個(gè)子元素的marginBottom值不斷減少,并把div的元素的高度輸出到div的第一個(gè)子元素中其中當(dāng)div元素設(shè)置了邊框的時(shí)候,減少最后一個(gè)元素的marginBottom值會(huì)發(fā)現(xiàn)div這個(gè)父元素的高度在不斷減少當(dāng)div元素不設(shè)置邊框的時(shí)候,減少最后一個(gè)元素的marginBottom值會(huì)發(fā)現(xiàn)div這個(gè)父元素的高度不再變化而且下面定義的h1的hello在以上的兩種情況下都可以穿透div里面的文本請(qǐng)問一下如何解釋這種現(xiàn)象

查看完整描述

2 回答

小唯快跑啊

TA貢獻(xiàn)1863條經(jīng)驗(yàn) 獲得超2個(gè)贊

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

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

一只萌萌小番薯

TA貢獻(xiàn)1795條經(jīng)驗(yàn) 獲得超7個(gè)贊

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

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