盒模型概念
浏览器盒模型(Box Model)是CSS中的基本概念,它描述了元素在布局过程中如何占据空间。盒模型由内容(content)、内边距(padding)、边框(border)、和外边距(margin)四个部分组成。分为标准盒模型 和 IE盒模型 。
-
标准盒模型(W3C盒模型):在这个模型中,元素的总宽度等于左右margin + 左右border + 左右padding + width,总高度等同于上下margin + 上下border + 上下padding + height的和。
盒宽度=内容宽度(content)+ border + padding + margin
-
IE盒模型:在这个模型中,宽度和高度不仅包括内容的尺寸,还包括内边距和边框。这意味着,元素的实际宽度等于width(内容宽度 + 左右内边距 + 左右边框),高度同理。
盒宽度=内容宽度(content+border+padding)+ margin
盒模型设置
通过CSS的box-sizing属性,可以在标准盒模型与IE盒模型之间进行切换。
- content-box(默认值):应用标准盒模型,元素的宽度和高度只包括内容区域。
- border-box:应用IE盒模型,元素的宽度和高度还包括内边距和边框。
举个例子
css代码示例
<body><div class="content-box base-box"></div><div class="border-box base-box"></div></body><style>.base-box {width: 100px;height: 100px;padding: 10px;border: 2px solid red;margin: 5px;}.content-box {box-sizing: content-box;}.border-box {box-sizing: border-box;}</style>
渲染示例
设置为content-box时,元素宽度:100 + 10 x 2 + 2 x 2 = 124;设置为100最终是124。
设置为border-box时,元素宽度:76 + 10 x 2 + 2 x 2 = 100;设置为100就是100。