神明 ` 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日

悬赏问题

  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）
  • ¥15 AIC3204的示例代码有吗，想用AIC3204测量血氧，找不到相关的代码。