标准盒子模型与怪异盒子模型

通俗的讲，盒模型是css布局的基础，它的作用是规定了网页元素在网页上如何显示以及元素之间的相互关系，css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)。

上图很明白的就可以看出来，盒模型由以下几部分组成：

内容区(content):元素的宽和高
补白（填充）(padding)：元素内容和外边缘之间的空间
边框(border)：盒子的外边缘
边界(外边距)(margin)：盒子外边缘以外的空间

这其实就是一个标准的盒模型。

那么接下来，我们再来看看什么是怪异盒模型吧。下图所示：

可以明显的看出，怪异盒模型的组成部分则只划分为了两个部分，分别为：

width/height(元素的内容宽或高)：内容区(content)、补白（填充）(padding)以及边框(border)的总和

边界(外边距)(margin)：盒子外边缘以外的空间

不难看出，怪异盒模型的一个构成形式为元素的宽高包含了填充以及边框所占有的空间，也就是说当我们页面元素为怪异盒模型的时候，给予元素padding或者border属性之后并不会改变元素原有宽高的值，而如果我们给标准盒模型的元素添加padding或者border属性之后，元素最终的宽高值会发生变化，盒子会变大，这也就是标准盒模型与怪异盒模型区别所在。（下面通过案例以及图片给与对比加深理解）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.box{width:300px;height:300px;background:#f00;border:10px solid #000;padding:20px;box-sizing: border-box;/* 转换成怪异盒模型 该属性下面有说明*/}</style></head><body><div class="box"></div></body>
</html>

标准盒模型的呈现形式为：

图片上可以看到，div的值由原始的300加上padding和border的值最后变为了360x360。

怪异盒模型的呈现形式为：

可以看到，加上padding和border值之后，div的宽度和高度依旧为300x300不变，填充以及边框属性值都包含在了元素的体内。

相信看到这里，大家应该能够理解他们的不同之处了吧？

PS : 我们可以通过CSS3属性进行盒模型之间的转换操作，下面是它的一个属性设置：

1 border-sizing: border-box/* 表示怪异盒模型 */
2 border-sizing: content-box/* 表示标准盒模型 */

通过设置该属性，我们可以转换元素的盒模型进行自己想要的效果呈现，当然我们常用的一些元素中也有自带怪异盒模型属性的，例如我们大家熟知的页面提交按钮，还有表格table，其实他们都是属于怪异盒模型的，所以在以后的工作中，应该明白为什么明明设置了填充元素高度依旧不够的缘故了吧？

标准盒子模型与怪异盒子模型相关推荐

盒子模型（标准盒模型、怪异盒模型）
一.盒子模型的组成部分: 内容区域: content 边框 : border 内边距: padding 外边距 margin ✳ 图中的蓝色部分即为content区域二.盒模型的分类: 1.W3C盒 ...
盒子模型--标准盒模型和怪异盒模型
盒子模型由content(内容).margin(外边距).padding(内边距).border(边框)组成 <div style=" ...
css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
标准盒子模型和怪异盒子模型（详解）
一.盒子模型定义盒子模型是css技术所使用的一种思维模型.盒子模型是指将网页设计页面中的内容元素看作一个个装了东西的矩形盒子.每个矩形盒子都由内容.内边距.边框和外边距4个部分组成.除去内容部分,其 ...
前端基础(八)_盒子模型（标准盒子模型和怪异盒子模型）
盒子模型什么是盒子模型网页设计中常听的属性名:内容(content).内边距(padding).边框(border).外边距(margin), CSS盒子模型都具备这些属性.这些属性我们可以用日常 ...
【什么是盒模型】标准盒子模型、怪异盒子模型
一.上图标准盒子模型和IE盒子模型什么是盒子模型 CSS盒子模型(Box model)就是在网页设计中经常用到的CSS技术所使用的一种思维模型.网页中所有元素都具备以下四个属性: 内容(cont ...
标准盒模型和怪异盒模型
怪异盒子模型 box-sizing :border-content; 标准盒子模型,平常不设置就默认是标准盒子模型 box-sizing :border-box; 怪异盒子模型标准盒子模型与怪异盒子 ...
CSS标准盒模型和怪异盒模型区别
盒模型都是由四个部分组成的,分别是margin.border.padding 和 content.即外边距,边框,内边距,内容. 一:标准盒模型 1. box-sizing: content-box ...
【CSS】标准盒模型和怪异盒模型
盒模型的组成: content(内容) padding(内边距) border(边框) margin(外边距) 那常见的盒子模型有哪些呢? 主要是两种:标准盒模型和怪异盒模型. 它俩有什么区别呢?区别 ...

标准盒子模型与怪异盒子模型

标准盒子模型与怪异盒子模型相关推荐

最新文章

热门文章