一、盒子模型的组成部分:

内容区域: content
边框 : border
内边距: padding
外边距 margin

✳ 图中的蓝色部分即为content区域

二、盒模型的分类:

1.W3C盒子模型(标准盒模型)

在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

2.IE盒子模型(怪异盒模型)

而IE盒模型或怪异盒模型，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

三、CSS3指定盒子模型种类:

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
*即 box-sizing 属性可以指定盒子模型种类

属性值:

content-box: 指定盒子模型为W3C（标准盒模型）
border-box: 为IE盒子模型（怪异盒模型）。
inherit: 规定应从父元素继承 box-sizing 属性的值。

盒子模型（标准盒模型、怪异盒模型）相关推荐

CSS中盒子模型、嵌套盒子中垂直外边距塌陷问题解决方案、标准盒模型、怪异盒模型
盒子模型(Box Model): 指把HTML页面中的元素看作是一个矩形的盒子,也称容器,这个盒子从内到外由:元素的内容(content).内边距(padding).边框(border).外边距(ma ...
盒子模型--标准盒模型和怪异盒模型
盒子模型由content(内容).margin(外边距).padding(内边距).border(边框)组成 <div style=" ...
css盒模型——标准盒子、怪异盒子
一.概念 CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型. 1.网页中所有元素都具备以下四个属性 (用来对元素进行布局): content,元素的 width.height p ...
css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
标准盒模型怪异盒模型
标准盒模型&怪异盒模型盒子模型的组成: 盒子模型一般由:内容(content).边框(border).左右外边距(margin-left+margin-right).左右内边距(padd ...
盒模型--标准盒模型---怪异盒模型
盒模型: .demo{overflow:hidden;/*超出隐藏*/width:300px;hight:300px;padding:background-color:blue;} 盒模型: 复合属性 ...
什么是盒模型（标准盒模型，怪异盒模型）
盒模型:(内容(content),内边距(padding),边框(border),外边距(margin)) CSS中的盒子模型分为两种: W3C标准盒模型和IE怪异盒模型. 标准盒模型下: 一个块的宽 ...
CSS标准盒模型和怪异盒模型区别
盒模型都是由四个部分组成的,分别是margin.border.padding 和 content.即外边距,边框,内边距,内容. 一:标准盒模型 1. box-sizing: content-box ...
css怪异盒子模型,CSS3弹性盒---怪异盒
怪异盒模型 box-sizing:content-box 标准盒模型总宽/高度=width+左右/上下padding+左右/上下border box- ...

盒子模型（标准盒模型、怪异盒模型）