看图学习CSS盒子模型，很简单但很重要的概念

发布时间：2025-11-05 07:51:07 来源：码上建站 作者：IT科技

今天这篇笔记聊聊CSS中一个非常基础但是看图很重要的概念——盒子模型：

顾名思义，就是学习HTML的元素在网页上的展示都是一个一个的盒子，四四方方的模型在页面上排列着，比如像下面这样，简单学习了盒子模型，但重的概为我们学习定位和布局等等高级样式技巧打下基础。看图

直接看这张图：

根据盒子宽度和高度的计算方式，我们可以把它分为两类，并通过box-sizing属性来设置

标准盒模型（content-box）的特点是：HTML元素真正的宽度=你设置的CSS宽度（width）+padding+border，高度同理

IE盒模型（border-box）的特点是：HTML元素的真正宽度=你设置的CSS宽度（width），高度同理

这个HTML的宽度=200+152+102=250

这个HTML的宽度=200

相关文章