前言

盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。它允许我们在其它元素和周围元素边框之间的空间放置元素。
目前盒模型主要分为两大门派：标准盒模型和怪异盒模型。其中早期的怪异盒模型是存在于IE内核浏览器。

一、标准盒模型

标准盒模型又称W3C标准盒模型，其中标准盒模型的 width 等于 content 的宽度，标准盒模型的 height 等于 content 的高度。
标准盒大小计算公式：width(content) + padding + border + margin

二、怪异盒模型

怪异盒模型又称IE盒子模型，其中怪异盒子模型的 width 等于 content + padding + border 的宽度，怪异盒子模型的 height 等于 content + padding + border 的高度。
怪异盒大小的计算公式：width(content + padding + border) + margin

三、css样式

在 css3 中添加了对盒模型设置的属性 box-sizing，可以根据需要自由调整。浏览器支持：IE8+

float 常用属性值

属性值	描述
content-box	默认值，盒子宽度高度等于content（标准盒模型）。
border-box	盒子宽度高度等于content + padding + border（怪异盒模型）。
padding-box	盒子宽度高度等于content + padding。
inherit	从父元素中继承 box-sizing 属性的值。

四、测试代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Document</title><style>.box {margin: 30px;padding: 20px;width: 80px;height: 40px;border: 10px solid #00007e;background: #fec997;box-sizing: border-box /* 设置盒子类型 */}</style></head><body><div class="box"></div></body>
</html>

总结

最后，IE浏览器中使用怪异盒子模型的是IE5.5及更早的版本，使用标准盒模型的是IE6及更新的版本，并且在编写html文件的时候应该设置 !DOCTYPE 声明，这样可以让IE浏览器遵循标准的兼容模式渲染。

最后，如果您有更好的方式，欢迎在留言区中分享；或者实际操作中遇到什么问题均可留言或者私信我，

标准盒模型与怪异盒模型的区别相关推荐

盒子模型（标准盒模型、怪异盒模型）
一.盒子模型的组成部分: 内容区域: content 边框 : border 内边距: padding 外边距 margin ✳ 图中的蓝色部分即为content区域二.盒模型的分类: 1.W3C盒 ...
盒子模型--标准盒模型和怪异盒模型
盒子模型由content(内容).margin(外边距).padding(内边距).border(边框)组成 <div style=" ...
CSS标准盒模型和怪异盒模型区别
盒模型都是由四个部分组成的,分别是margin.border.padding 和 content.即外边距,边框,内边距,内容. 一:标准盒模型 1. box-sizing: content-box ...
css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
【CSS】标准盒模型和怪异盒模型
盒模型的组成: content(内容) padding(内边距) border(边框) margin(外边距) 那常见的盒子模型有哪些呢? 主要是两种:标准盒模型和怪异盒模型. 它俩有什么区别呢?区别 ...
标准盒模型和怪异盒模型的区别？
什么是怪异盒模型?今天我帮大家整理一篇详细的有关于标准盒模型和怪异盒模型的区别在哪里. 首先要知道,什么是盒模型? 盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系.css定义所有 ...
【什么是盒模型】标准盒子模型、怪异盒子模型
一.上图标准盒子模型和IE盒子模型什么是盒子模型 CSS盒子模型(Box model)就是在网页设计中经常用到的CSS技术所使用的一种思维模型.网页中所有元素都具备以下四个属性: 内容(cont ...
标准盒模型和怪异盒模型
怪异盒子模型 box-sizing :border-content; 标准盒子模型,平常不设置就默认是标准盒子模型 box-sizing :border-box; 怪异盒子模型标准盒子模型与怪异盒子 ...
普通盒模型和怪异盒模型
一.什么是盒模型? 1.根据盒子模型的概念,每个在页面上的元素都是一个拥有宽,高,内边距,边框和外边距的长方形盒子. 2.盒模型分为两种:分别是W3C标准盒模型(普通盒模型)和IE盒模型(怪异盒模型) ...
前端学习-盒模型和怪异盒模型
盒模型图片出自网上侵权删. 从里到外:content(宽高) +padding (内填充) +border(边框)+margin(外边距) padding <style>p{//单方向p ...

标准盒模型与怪异盒模型的区别

文章目录

前言

一、标准盒模型

二、怪异盒模型

三、css样式

四、测试代码

总结

标准盒模型与怪异盒模型的区别相关推荐

最新文章

热门文章