css盒模型（标准模式和怪异模式）

最新推荐文章于 2024-05-11 12:06:13 发布
最新推荐文章于 2024-05-11 12:06:13 发布
阅读量3.1k 收藏 4
点赞数 2
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41999617/article/details/82842054
版权

css盒模型一共有两种模式：标准模式和怪异模式

只要完整定义DOCTYPE都会触发标准模式，如果DOCTYPE缺失则在ie6/ie7/ie8下将会触发怪异模式

标准模式：盒子总宽度=width+padding+border+margin

怪异模式：盒子总宽度=width(包含padding+border)+margin

说说css3的属性box-sizing吧，它有两个非常重要的值：

第一：值为content-box---------------------------会采用标准模式解析计算

第二：值为border-box-----------------------------会采用怪异模式解析计算

 

MandiGao
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS--怪异盒子模型
m0_56123958的博客
03-12 8075
CSS–怪异盒子模型 怪异盒子模型 标准盒子宽度计算方法（扩张主义） border-left-width+width+padding-left+padding-right+border-right-width <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 100px;
css盒模型，标准盒模型和怪异盒模型
weixin_72280817的博客
06-01 142
设置标准盒模型 box-sizing: content-box;设置怪异盒模型 box-sizing: border-box;(内容)(已经包含了。
【什么是盒模型】标准盒子模型、怪异盒子模型
weixin_43597801的博客
07-19 2426
标准盒子模型和IE盒子模型什么是盒子模型CSS盒子模型（Boxmodel）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。盒子模型主要是针对页面布局的时候来使用，它规范我们的页面的所有元素的一个布局标准是由外向内进行布局。盒子模型由外向内margin(外边距)—>border(边框)---->padding(内边距)---->content(元素)...
2024年Web前端最全前端提高篇（五十八）Html5概述(标准模式 VS 怪异模式)，新特性，2024年最新阿里 p7面试
最新发布
2401_84446963的博客
05-11 407
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？js的基本类型有哪些？
css盒模型：标准盒模型、怪异盒模型
m0_74114605的博客
03-22 807
目前大部分主流的浏览器支持的是W3C标准盒模型。
《八》浏览器的标准模式和怪异模式
花铛
03-13 362
浏览器解析CSS的两种模式标准模式和怪异模式。标准模式浏览器按W3C标准解析执行代码。怪异模式使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以称之为怪异模式。浏览器解析使用标准模式还是怪异模式，与doctype声明直接相关，DTD声明定义了标准文档的类型，使浏览器使用相应的方式加载网页并显示，忽略DTD声明，将进入怪异模式。...
深入讲解CSS中盒模型的用法
09-24
在CSS 2.1中，有两种盒模型：W3C盒模型（标准盒模型）和IE盒模型（怪异盒模型）。在标准盒模型中，`width`和`height`只包括内容区域的大小，而在IE盒模型中，这两个属性包含了内容、内边距和边框的总和。可以通过`...
浅谈CSS编程中的怪异模式
12-13
先不考虑css3的情况，盒模型一共有两种模式，一种是标准模式，另一种就是怪异模式。 当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签，例如： XML/HTML Code复制内容到剪贴板 <!...
深入理解css盒子模型1
08-03
在W3C标准盒模型中，元素的总宽度和总高度是内容宽度/高度加上左右内边距、左右边框和左右外边距。但在Internet Explorer 5.x和6.x的"怪异模式"中，元素的总宽度/高度包括了内容、内边距和边框，这导致了跨浏览器的...
JavaScript 盒模型 尺寸深入理解
10-27
W3C盒模型（也称为标准盒模型）遵循上述描述，即元素的总宽度和总高度由内容区的宽度和高度加上内边距和边框计算得出。而在IE的老版本（尤其是"怪异模式"）中，元素的宽度和高度会包含内容、内边距和边框，这种模式...
盒子模型（怪异模型）
qac的博客
12-17 642
文章目录1.什么是盒子模型？2.盒子模型能够为我们解决什么问题?3.标准盒子模型和怪异盒子模型（IE盒子模型）4.两种模式的转换（通过box-sizing） 1.什么是盒子模型？ CSS盒子模型（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性： 内容(content)，也就是元素的 width、height 内边距(padding) 边框(border) 外边距(margin) 2.盒子模型能够为我们解决什么问题? 盒子模型主要是针对页
CSS两种盒模型(标准盒模型&IE盒模型)
Kar29的博客
09-13 6986
CSS盒模型本质是一个盒子，由边距、边框、填充和实际内容组成。 CSS盒模型分为两种：标准盒模型、IE盒模型（也成为怪异盒模型）。 两种盒模型的区别在于他们的总宽度的计算公式不一样。 在文档首部加了 <!Doctype html>声明，即使用标准盒模型，若不加，则会由浏览器自己决定。 标准盒模型 width = 内容（content）的宽度 height = 内容（content）的高度 总宽度：width + margin（左右） + padding（左右） + border
标准盒模型（w3c标准）和 怪异盒模型（IE标准）
z980498059的博客
12-01 3663
盒模型的理解
CSS盒模型全面讲解，怪异模式盒模型，CSS3 box-sizing属性
quguang65265的博客
03-24 1万+
今天学习了一下css3的box-sizing属性，顺便又温习了一下css的盒模型，最后觉得有必要对盒模型做一个全面整理。 先不考虑css3的情况，盒模型一共有两种模式，一种是标准模式，另一种就是怪异模式。 当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签，例如： 以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式
关于CSS怪异盒子详细解剖
sxtweb的博客
09-15 2799
上一篇文章我们了解了盒子模型 盒子模型分为两种，一种是符合W3C规范的标准例子模型，另一种市IE的盒子模型，IE的盒子模型也被叫怪异盒子。 可以看到IE盒子模型也包括margin、border、padding、content，不过，和标准盒子模型不同的是：IE盒子模型的宽包含了border和padding。 怪异盒模型中的width指的是内容、边框、内边距总的宽度（content+border+padding）；height指的是内容、边框、内边距总的高度。padding和border被包含在定义的wid
CSS-标准盒模型 & 怪异盒模型
PT - Blog
04-29 3万+
CSS-标准盒模型 & 怪异盒模型
css的两种盒模型
热门推荐
zwkkkk1的博客
03-24 6万+
前言 初学 css 的时候 div 的一些宽高问题经常会引起一些不好理解的问题，这里做一个关于css盒模型的分享。 问题 下面的代码可以直接复制出去运行哦 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;titl
怪异模式
益达的小作坊
03-30 559
搬运地址：http://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/简单来说，就是一种兼容Quirks Mode 概述 定义 什么是 Quirks Mode? 简单来说，Quirks Mode 就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。 历史 由渲染引擎产生的两种文档
CSS标准盒子模型
zerlinda_c的博客
12-04 4349
CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border） 和 外边距（margin） 的方式。在HTML文档中，每个元素（element）都有盒子模型，所以说在Web世界里（特别是页面布局），Box Model无处不在。以FireFox标准盒子模型为例：
css盒模型标准和怪异
07-27
CSS盒模型有两种标准：标准盒模型和怪异盒模型。 标准盒模型是CSS的默认盒模型，它将元素的宽度和高度定义为内容区域的宽度和高度。也就是说，元素的宽度和高度不包括边框和内边距。 而怪异盒模型是一种老旧的盒...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值