box-sizing的用法（笔记）

最新推荐文章于 2023-09-13 17:24:53 发布

weixin_30244681

最新推荐文章于 2023-09-13 17:24:53 发布

阅读量71

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Guhongying/p/10775019.html

本文详细解析了CSS盒模型中的box-sizing属性，特别是在border-box模式下如何计算元素的宽度和高度，包括内容、内边距和边框的总和，但不包含外边距。

关于盒子布局的box-sizing的使用

border-box width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。

尺寸计算公式：width = border + padding + 内容的宽度height = border + padding + 内容的高度

转载于:https://www.cnblogs.com/Guhongying/p/10775019.html