假设边框和背景是可见的,元素可见部分的高度是多少?
Let's say the border and background are visible, what is the height of the visible part of the element?
我不知道如何计算。
非常感谢您的解释。
哪一个是正确的,为什么?
126.219px
89.219px
94px
谢谢。
请参考这张图
enter image description here
这取决于您是否使用 CSS 框大小调整 属性。
当设置 box-sizing 作为内容框时,这会给你默认的 CSS box-sizing 行为。如果一个元素的宽度为 400px,那么内容宽度将为 400px,填充和边框宽度将添加到最终呈现的宽度 - https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
body{
box-sizing: content-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
}
边框框 - 告诉浏览器考虑您为元素的宽度和高度指定的值中的任何边框和填充。如果将元素的宽度设置为 100 像素,这 100 像素将包括您添加的任何边框或填充,并且内容框将缩小以吸收额外的宽度。这通常使得调整元素的大小变得更加容易。 - https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
body{
box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
}
我不知道如何计算。 非常感谢您的解释。
哪一个是正确的,为什么?
谢谢。
请参考这张图
enter image description here
这取决于您是否使用 CSS 框大小调整 属性。
当设置 box-sizing 作为内容框时,这会给你默认的 CSS box-sizing 行为。如果一个元素的宽度为 400px,那么内容宽度将为 400px,填充和边框宽度将添加到最终呈现的宽度 - https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
body{
box-sizing: content-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
}
边框框 - 告诉浏览器考虑您为元素的宽度和高度指定的值中的任何边框和填充。如果将元素的宽度设置为 100 像素,这 100 像素将包括您添加的任何边框或填充,并且内容框将缩小以吸收额外的宽度。这通常使得调整元素的大小变得更加容易。 - https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
body{
box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
}