Question

问题是这个 - ＆gt;＆gt;一个html元素有这些样式宽度：150px;填充：3px;边界：4px;保证金：7px;实际宽度是多少......

我无法得到这个问题，因为据说宽度是150像素..所以他们为什么要问这个？

有什么想法吗？

提前致谢

Answer 1

缺少box-sizing声明填充确实增加宽度和边框一样..

所以在你的例子中

150px 内部内容宽度+ 6px填充（右侧和左侧3px）加 8px边框（右侧和左侧4px）= 164px。

默认的大小调整设置为content-box

内容盒。这是CSS标准规定的默认样式。测量宽度和高度属性仅包括内容，但不包括填充，边框或边距。注意：填充，边框和保证金将在框外，例如IF .box {width：350px};然后你应用{border：10px solid black;} RESULT {在浏览器中呈现} .box {width：370px;}

MDN reference

＆＃13;

div {
  width: 150px;
  height: 25px;
  margin: 7px;
  border: 4px solid red;
  padding: 3px;
  background:lightblue;
}
.nopadding {
  padding: 0;
  border-color:green;
}
.box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-color:rebeccapurple;
}

＆＃13;

<div></div>

<div class="nopadding"></div>

<div class="box"></div>

＆＃13;

实际宽度是多少？

1 个答案: