提问者:小点点

在确定元素的宽度或高度时,我们是否在css框模型中包含边距


事实上,当我在这些网站上读到两种不同的东西时,我感到困惑。我知道框的大小和它如何影响框模型,但如果我们不考虑大小和想要告诉元素的大小。请参阅以下URL:

http://www.w3schools.com/css/css_boxmodel.asp

元素的总宽度应该这样计算:

元素总宽度=宽度+左填充+右填充+左边框+右边框+左边框+右边框+左边框+右边框

元素的总高度应该这样计算:

元素总高度=高度+顶部填充+底部填充+顶部边框+底部边框+顶部边距+底部边距

https://css-tricks.com/the-css-box-model/

盒子本身的大小是这样计算的:

宽度=宽度+填充-左侧+填充-右侧+边框-左侧+边框-右侧高度=高度+填充-顶部+填充-底部+边框-顶部+边框-底部

我认为根据我的理解,我们计算宽度=宽度+填充+边框作为缺省框大小中元素的总宽度。


共1个答案

匿名用户

下面是我在Chrome中大致观察到的情况。

如果设置*{box-sizing:border-box;},则元素的宽度等于width+border+padding。width值与devtool中显示的width相当。

元素宽度(当然)包括其子元素的边距,但不包括它自己的边距。width值也等同于devtool中显示的width。但计算时需要注意边距收缩。

但是,如果对于exmaple,最顶部元素的margin-top折叠,呈现出body之外,那么额外的magin不会增加devtool中显示的框的元素高度。但是可以使用document.getElementsByTagName('html')[0].ScrollHeight获取整个高度。

回到你的问题:

在确定元素的宽度或高度时,我们是否在css框模型中包含边距?

我通常会说是的。

同样,使用boder-box,元素的width==content-width(包括元素子项的边距)+border+padding