Css 框大小和高度预期行为_Css

Css 框大小和高度预期行为

css

Css 框大小和高度预期行为,css,Css,我最近遇到了一个问题，在css中的box size:border box标记中，我的行为似乎非常不一致。例如，下面的代码块似乎完全忽略了标记 <!DOCTYPE html> <html> <head> <style> .one { margin-bottom:30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; marg

我最近遇到了一个问题，在css中的

box size:border box

标记中，我的行为似乎非常不一致。例如，下面的代码块似乎完全忽略了标记

<!DOCTYPE html>
<html>
<head>
<style>
.one {
margin-bottom:30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; 
margin-left:10px;
overflow:hidden; 
background-color:green; 
width:40px; 
height:40px;
}
.two {
height:30px; 
width:30px; 
background-color:black; 
}
</style>
</head>
<body>
<div class = 'two'></div>
<div class = 'one'></div>
<div class = 'two'></div>
</body>
</html>


.一{
边缘底部：30px；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
左边距：10px；
溢出：隐藏；
背景颜色：绿色；
宽度：40px；
高度：40px；
}
.二{
高度：30px；
宽度：30px；
背景色：黑色；
}

我必须假设这是预期的行为，但我还没有看到任何文章明确讨论框大小不起作用的实例，通过实验，我无法找到css属性似乎会影响它，除了基于像素的宽度/高度似乎对其影响很差。是否有人愿意澄清这是一个仅适用于百分比还是仅适用于水平的属性？

我不确定您是否理解

框大小：边框框

应该做什么。那个片段忽略标记呢？请解释你所期望的行为以及这两者之间的区别

至于房产本身，我假设你已经做了一些你熟悉的调查

例如，使用“普通”框模型向元素添加填充将在元素外部添加填充，但是，使用与

box size:border box

相同的填充将在元素内部添加填充，从而保留原始大小

这可以在下面说明

使用

边框框

将在元素内部添加填充，使每个元素保持33%，并确保无论您如何分隔元素，它们都将保持您最初告诉它的宽度。这样就不需要很多额外的、不必要的数学运算

<style>
.one {
    width:33%;
    background-color:#3e3e3e;
    float:left;
    padding:1em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}
</style>

<div class = "one">one1</div>
<div class = "one">one2</div>
<div class = "one">one3</div>


.一{
宽度：33%；
背景色：#3e3e；
浮动：左；
填充：1em；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
一
第二条
第三条

有关详细信息，请查看以下链接：

希望有帮助