Question

我正在使用内联样式和大量<table>构建为邮件客户端设计的HTML。在试验表时，我遇到了以下现象 -

嵌套在<td>内，<p>或<div>等块元素将按预期占用<td>父宽度的100％，除非其宽度属性为明确宣布。

例如：

以下代码是嵌套在<p> <table>内的简单<td>元素。 <table>的宽度为700px，带有50px填充的<p>元素占用<td>的全宽，没问题：

<div style="border-style: solid;">
  <table border="0" cellpadding="0" cellspacing="0" width="700" style="width: 700px; background: red;">
    <tr>
      <td>
        <p style="padding:50px; border-style: solid; border-color: blue;">something</p>
      </td>
    </tr>
  </table>
</div>

http://codepen.io/anon/pen/WwXQXY?editors=1000

明确指定<p>元素宽度为100％时，其大小会增加，但由于某种原因超出其<td>父级大小：

<div style="border-style: solid;">
  <table border="0" cellpadding="0" cellspacing="0" width="700" style="width: 700px; background: red;">
    <tr>
      <td>
        <p style="padding:50px; border-style: solid; border-color: blue; width: 100%;">something</p>
      </td>
    </tr>
  </table>
</div>

http://codepen.io/anon/pen/PNOZbV?editors=1000

然后，当应用＆＃34; box-sizing：border-box＆＃34;到<p>元素，它与<td>父对齐：

<div style="border-style: solid;">
<table border="0" cellpadding="0" cellspacing="0" width="700" style="width: 700px; background: red;">
  <tr>
    <td>
      <p style="padding:50px; border-style: solid; border-color: blue; width: 100%; box-sizing: border-box;">something</p>
    </td>
  </tr>
</table>
</div>

http://codepen.io/anon/pen/LNOGyQ?editors=1000

正如您所看到的，将宽度设置为100％会使<p>标记超过<td>大小。我首先想到的是<p>可能会从<td>父级继承旧的盒子模型属性，但是a）我没有看到它写在浏览器的开发者工具中，b）如果它确实继承了它，然后它因为填充而应该从头开始超过<td>的大小。

很想了解这里发生的事情

Answer 1

初始box-sizing值表示padding和border添加到整体宽度。

左边和右边的填充是30px，左边和右边的边框是3px，这意味着你的整体宽度是100％+ 30px + 30px + 3px + 3px，比100％的宽度大66px td元素本身。

表内的块元素超过父级大小

1 个答案: