CSS盒子模型

最新推荐文章于 2026-01-08 23:43:28 发布

原创最新推荐文章于 2026-01-08 23:43:28 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

什么是盒模型呢？

盒模型是CSS的基础中的基础。因为它的重要性，所以很多面试中都会提到。当浏览器对一个HTML文档进行布局的时候，会把每一个元素都渲染成一个矩形的盒子，盒模型就是对这些元素的形状进行一个抽象。
盒模型的组成部分是由四个部分组成：content(内容区域) padding(内边距) border(边框区域) margin(外边距区域)
在这里插入图片描述

盒模型有多少种呢？

说到盒模型，就不得不说说IE盒模型和W3C标准盒模型（w3c盒模型又称标准盒模型）这两种盒模型。

它们主要的区别在与 width 属性所包含的大小
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            margin: 10px;
            padding: 20px;
            border: 30px solid red;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

当在标准盒子模型下，显示如下：
在这里插入图片描述
当在IE盒子模型下，显示如下：
我们发现标准盒模型的计算方式是：width = content
而IE盒模型是：width = 左右 border + 左右 padding + content

IE盒模型的width属性包括两倍的宽和两倍的边框再加上内容区域的宽度，标准盒模型width就是等于内容区域的宽度，padding和border属性依次撑开。两者的height属性亦是如此。

盒子模型的切换

box-sizing: border-box(IE盒模型)
box-sizing: content-box（标准盒模型）

content-box
描述：在宽度和高度之外绘制元素的内边距和边框。
border-box
描述：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制