答案：CSS盒模型由content、padding、border、margin组成，标准模型宽高不包含padding和border，IE模型（box-sizing: border-box）则包含，推荐使用border-box以便更直观控制布局。
在CSS中，元素的总宽高由盒模型决定。理解盒模型的组成和计算方式，能准确控制页面布局。
盒模型的组成部分
一个元素的实际占用空间包括以下四个部分：
内容区域（content）：实际内容的宽高，由 width 和 height 设置内边距（padding）：内容与边框之间的空间边框（border）：元素的边框线，包含宽度、样式和颜色外边距（margin）：元素与其他元素之间的距离
标准盒模型下的宽高计算
默认情况下，CSS使用标准盒模型（box-sizing: content-box）。此时设置的 width 和 height 只表示内容区域大小，不包含padding和border。
总宽度计算公式为：
立即学习“前端免费学习笔记（深入）”；
总宽度 = width + 左右padding + 左右border + 左右margin
总高度计算公式为：
总高度 = height + 上下padding + 上下border + 上下margin
例如：
博思AIPPT
博思AIPPT来了，海量PPT模板任选，零基础也能快速用AI制作PPT。
117 查看详情
div { width: 200px; height: 100px; padding: 10px; border: 5px solid #000; margin: 20px;}
该div的总宽度为：200 + 10×2 + 5×2 + 20×2 = 270px
总高度为：100 + 10×2 + 5×2 + 20×2 = 170px
IE盒模型（替代盒模型）
当设置 box-sizing: border-box 时，元素进入IE盒模型模式。此时 width 和 height 包含了内容、padding 和 border，但不包含 margin。
在这种模式下：
你设置的 width = 内容宽 + 左右padding + 左右border总宽度 = width + 左右margin总高度 = height + 上下margin
这种方式更直观，推荐在项目中全局设置：
* { box-sizing: border-box;}
如何选择合适的盒模型
多数现代开发中建议使用 border-box，原因如下：
设定的宽高就是视觉上的尺寸，更容易控制布局添加padding或border不会意外撑大元素响应式设计中表现更稳定
只要记住：margin 始终不参与 width/height 的定义，它是在最外层额外增加的空间。
基本上就这些。关键在于明确当前元素的 box-sizing 属性值，然后按规则累加即可准确计算出元素在页面中占据的实际空间。
以上就是css盒模型计算元素总宽高方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1030330.html
微信扫一扫 
支付宝扫一扫 
