什么是盒模型（标准盒模型，怪异盒模型）

盒模型：（内容（content）,内边距（padding）,边框（border）,外边距（margin））

CSS中的盒子模型分为两种：

W3C标准盒模型和IE怪异盒模型。

标准盒模型下：

一个块的宽度 = width+padding(左右内边距)+border(左右边框)+margin(左右外边距)；

怪异盒模型下：

一个块的宽度 = width + margin(左右)（即width已经包含了padding和border值）

CSS3的box-sizing：

box-sizing语法：
box-sizing: content-box || border-box || inherit || initial

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；

个人理解：

用box-sizing:border-box;写移动端的代码有一个好处！
一般情况下用百分比布局，
如果用正常的标准盒模型写的话，给元素添加一个1px边框的边框，元素的宽度是百分百的话，那么这个元素就超出屏幕的宽度，
如果用box-sizing:border-box;这个属性的话，就会把1px像素的边框算在总宽度百分百上这样就不会超出屏幕的宽度了。同样内边距也会算在总宽度里

什么是盒模型（标准盒模型，怪异盒模型）相关推荐

css盒模型——标准盒子、怪异盒子
一.概念 CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型. 1.网页中所有元素都具备以下四个属性 (用来对元素进行布局): content,元素的 width.height p ...
盒子模型(标准盒子和怪异盒子)
盒子模型盒子模型(Box Model): 盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素. 不同部分 ...
自学前端第十天 : CSS怪异盒子模型
一.怪异盒子模型怪异盒模型是IE盒子模型我们可以通过 css 样式 box-sizing来进行切换 select {box-sizing: border-box; /* 怪异盒子模型 */box- ...
盒子模型和怪异盒子模型
content的width 元素宽度 height 元素高度可设置像素或者百分比或者其他单位盒子模型的总宽度和总高度: 外总宽度 = width + padding + border + ma ...
CSS中盒子模型、嵌套盒子中垂直外边距塌陷问题解决方案、标准盒模型、怪异盒模型
盒子模型(Box Model): 指把HTML页面中的元素看作是一个矩形的盒子,也称容器,这个盒子从内到外由:元素的内容(content).内边距(padding).边框(border).外边距(ma ...
盒子模型（标准盒模型、怪异盒模型）
一.盒子模型的组成部分: 内容区域: content 边框 : border 内边距: padding 外边距 margin ✳ 图中的蓝色部分即为content区域二.盒模型的分类: 1.W3C盒 ...
标准盒模型怪异盒模型
标准盒模型&怪异盒模型盒子模型的组成: 盒子模型一般由:内容(content).边框(border).左右外边距(margin-left+margin-right).左右内边距(padd ...
盒模型--标准盒模型---怪异盒模型
盒模型: .demo{overflow:hidden;/*超出隐藏*/width:300px;hight:300px;padding:background-color:blue;} 盒模型: 复合属性 ...
怪异盒模型和标准盒模型
对怪异盒模型的介绍怪异模式主要表现在IE内核的浏览器. 当不对doctype进行定义时,会触发怪异模式. 在标准模式下(box-sizing:content-box;),一个块的总宽度= width ...