css盒模型（W3C标准盒模型、IE怪异盒模型、box-sizing）

Predator117

于 2021-01-19 17:13:21 发布

阅读量348

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签： html css

本文链接：https://blog.youkuaiyun.com/Predator117/article/details/112847322

1 篇文章

订阅专栏

本文介绍了CSS盒模型的两种主要类型：W3C标准盒模型，其中width和height仅包含内容区域；以及IE怪异盒模型，其中width和height包含边框和内边距。还讨论了`box-sizing`属性，用于切换这两种模式，以及在实际布局中如何利用它来调整元素尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

所有的HTML元素都可以看作是盒子，每个盒子包括：
外边距（margin）、边框（border）、内边距（padding）、内容（content）
在这里插入图片描述

设定的height与width就是content的高度与宽度，

盒子总宽度=margin + border + padding + content/width
盒子总高度=margin + border + padding + content/height

设定的height与width是包括了border、padding、content的，

盒子总宽度=margin + width = margin + border + padding + content
盒子总高度=margin + height = margin + border + padding + content

box-sizing有三个值：

content-box：width和height分别应用到元素的content。在width和height之外绘制元素的padding和border。即W3C标准盒模型

border-box：为元素设定的width和height决定了元素的边框盒。为元素指定的任何padding和border都将在已设定的width和height内进行绘制。content=width/height - padding - border。即IE怪异盒模型

box-sizing应用场景：有时在width为100%时需要将content缩小，把box-sizing值设为border-box，增加padding的值。