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

创新互联公司自2013年起，是专业互联网技术服务公司，拥有项目成都网站设计、成都网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元马龙做网站,已为上家服务,为马龙各地企业和个人服务,联系电话:028-86922220

什么是盒子模型

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

盒子模型的构成

直接看这张图：

• Content：内容区域，也就是你代码中放在元素内的东西，比如说文字啊、子元素啊等等
• Border：边框，也就是HTML元素的边框，你可以使用border来设置边框的宽度、颜色、样式
• Padding：内边距，也就是Border（边框）和Content（内容）之间的距离
• Margin：外边距，也就是HTML元素和它旁边其他元素的距离

盒子模型的分类

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

• 标准盒模型：content-box，默认
• IE盒模型：border-box

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

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

举例

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

这个HTML的宽度=200

当前文章：看图学习CSS盒子模型，很简单但很重要的概念
标题来源：http://cdbrznjsb.com/article/cdieoec.html