神明 ` 2021-11-16 23:51 采纳率: 100%
浏览 79
已结题

HTML CSS盒子模型 属性意思求解

img


有大佬能简短的阐述一下吗?

  • 写回答

1条回答 默认 最新

  • 在下月亮有何贵干 前端领域优质创作者 2021-11-17 09:17
    关注

    我们都知道div可以通过width设定宽度，但是设置的仅仅是内容区的宽度，一个盒子的宽度你所看见的宽度不止有内容区，还有padding和border，至于margin应该不属于盒子本身了我们不考虑。

    而设定盒子模型就是box-sizing这个属性，盒子的默认模型是content-box。有时候我们想要固定一个盒子的宽度为100px，如果padding和border都为20一左一右共计就占了80px，那么盒子的实际宽度就成了180px。如果我们想要它实际为100px我们只能设置width为20px，每次padding和border存在时我们可能得去计算它们的宽度再用100减去之后再赋值给width，太麻烦了。这时候不同的盒子模型就能帮我们解决。

    而box-sizing这个属性，设定为border-box以后，你只要固定了width为100px，你接下来如何设置padding和border，盒子都会自动计算内容区还剩多少可用，反正会让这个盒子固定为100px。

    一般用的最多的就是默认box-sizing为content-box和设置box-sizing为border-box

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题？

问题事件

  • 系统已结题 11月25日
  • 已采纳回答 11月17日
  • 创建了问题 11月16日

悬赏问题

  • ¥100 如何用js写一个游戏云存档
  • ¥15 ansys fluent计算闪退
  • ¥15 有关wireshark抓包的问题
  • ¥15 需要写计算过程，不要写代码，求解答，数据都在图上
  • ¥15 向数据表用newid方式插入GUID问题
  • ¥15 multisim电路设计
  • ¥20 用keil，写代码解决两个问题，用库函数
  • ¥50 ID中开关量采样信号通道、以及程序流程的设计
  • ¥15 U-Mamba/nnunetv2固定随机数种子
  • ¥30 C++行情软件的tick数据如何高效的合成K线