Question

我可以使用我的所有murkup（所有项目）box-sizing: border-box;吗？

例如：

html { 
   box-sizing: border-box; 
}, 
:before, *:after {
  box-sizing: inherit; 
}

因为更容易计算实际宽度，但这种方法有任何缺点吗？

Answer 1

我通常将它应用于一切。使用：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<table class=" table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Username</th>
      <th>Password</th>
      <th>Role</th>
      <th>Edit</th>
      <th>Delete</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="id edited">ID</td>
      <td class="id edited">Username</td>
      <td class="id edited">Password</td>
      <td class="id edited">Role</td>

      <td>
        <button type="button" class="updateUser btn btn-primary btn-xs" data-userId="<?php echo $id; ?>">
          EDIT BUTTON
        </button>
      </td>
    </tr>

    <!-- ROW 2 -->

    <tr>
      <td class="id edited">ID</td>
      <td class="id edited">UsernameText</td>
      <td class="id edited">PasswordText</td>
      <td class="id edited">RoleText</td>

      <td>
        <button type="button" class="updateUser btn btn-primary btn-xs" data-userId="<?php echo $id; ?>">
          EDIT BUTTON
        </button>
      </td>
    </tr>

  </tbody>
</table>

它使每一个g都变得更容易并得到广泛支持。

https://css-tricks.com/international-box-sizing-awareness-day/

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

修改

值得注意的是，CSS工作组认为这是CSS设计中的一个错误：

默认情况下，Box-sizing应该是border-box。

https://wiki.csswg.org/ideas/mistakes

Answer 2

我用

html * {
    box-sizing: border-box;
}

它对我来说非常好。

Answer 3

使用它是非常有益的

html {
  -webkit-box-sizing: border-box;
       box-sizing: border-box;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
      box-sizing: inherit;
}

您可以通过将特定CSS应用于任何元素来轻松覆盖它。

只是为了知识...... Bootstrap也使用这种技术。

根据caniuse.com

，IE6和IE7不支持此功能

我可以在全局框大小中使用：我的项目中的边框吗？

3 个答案:

修改