关于IE6盒模型的想法

最新推荐文章于 2025-06-30 10:28:13 发布
原创 最新推荐文章于 2025-06-30 10:28:13 发布 · 628 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文揭示了IE6在盒模型算法上的独特之处，指出其宽度设定的灵活性，以及如何通过W3C模式进行调整。探讨了W3C在CSS3中引入的box-sizing属性，提供了两种模式供开发者选择，进一步解释了IE6在某些方面引领技术潮流的事实。

以前一直埋怨IE6的盒模型算法不科学，不如w3c，现在才发现自己错啦，IE6的宽度一旦拟定，任何方式都改变他的宽度，除非在开始的时候定义w3c模式 例如

<!DOCTYPE html> 开始在w3c模式下，其实对待w3c来说，他们已认识到自己的错误啦，开始在css3中加入box-sizing;有两个选项， 让其自由选择哪种模式 一个是 content-box 

w3c模式 一个是IE模式 border-box，现在才知道IE6有些地方也是走在时代的炕沿上--时代在炕上躺着

前端面试——盒子模型详解
DW14687的博客
10-12 2473
盒子模型是css中的一种思维模型，即把网页内容看成一个盒子，这个盒子由外到内包括margin、border、padding、content。根据浏览器计算方式不同分为两种模型：标准模型（w3c模型）和怪异模型（又称IE模型）。他们的主要区别是：标准模型的宽度不包含padding和border，怪异模型的宽度包含padding和border(个人认为主要表现在内容区域的大小变化)。以上就是今天要讲的内容，本文仅仅简单介绍盒子模型原理和转换方式，简单的描述了一下使用场景，如果有更好的想法告诉我吧~。
了解CSS盒模型、页面布局在UI设计中的作用
qq_38170252的博客
12-11 718
我司实行UI规范已过去一段时间，页面风格已逐渐实现统一。但近期在实际业务开发中发现，在UI验收环节不断出现小数值调整情况，极大的延长验收时间。 在和UI设计人员探讨后发现设计者对前端盒模型概念不甚了解，故此篇介绍了css盒模型和组件的概念，以及简单的前端布局思路，UI设计人员在设计时也能结合代码层面考虑，规范前端页面UI标准，减少双方沟通和开发成本。 安卓、iOS、Web布局基本是互通的，因为本人为Web开发，所以从CSS盒模型的角度进行分享。如果你是web前端的初学者，相信这个分享也能给你带来帮助。 CS
[转载] IE6很邪恶，但我爱它的盒子模型
hellonickco的专栏
06-12 242
IE6很邪恶，但我爱它的盒子模型 matrix 发表于 2010年6月12日 11时12分 星期六 Printer-friendly Email story 来自中国盒部门 Internet Explorer 锐商企业CMS 写道 "盒子模型（Box Model）是 CSS 的核心，现代 Web 布局设计简单说就是一堆盒子的排列与嵌套，掌握了盒子模型与它们的摆放控制，会发现再复...
那些盒模型在IE6中的BUG们，工程狮的你可曾遇到过？
懂点君
05-28 639
随着HTML5技术的快速发展，IE6逐渐的退出了历史的舞台。回想过往，人们在XP系统上，使用着IE6浏 览器，前端工程师们痛恨着IE6的存在，满怀期待的希望IE6的市场占有率能有所下降。在过往的今天，前 端工程师终于梦想成真的。小编总结罗列了一下IE6的问题，跟大家分享一下。
IE6盒子模型
VooleBoy的专栏
09-08 310
盒子模型（Box Model）是 CSS 的核心，现代 Web 布局设计简单说就是一堆盒子的排列与嵌套，掌握了盒子模型与它们的摆放控制，会发现再复杂的页面也不过如此，然而，任何美好的事物都有缺憾，盒子模型有两 种不同的诠释，一种来自 IE6，一种来自 W3C 标准浏览器。 盒子模型 下图就是一个典型的盒子模型示意图 在内容区外面，依次围绕着 padding 区，border...
IE6混杂模式盒模型
zyz00000000的博客
10-02 710
1. w3c标准中的盒模型：border + padding + content 其中在设置的width 和 height 是content内容区的宽和高； box-sizing：content-box；盒子的宽高大小是到内容区 2. IE6混杂模式的盒模型：width和height是指：border+padding+content box-sizing：border-box；盒子的宽高大...
IE6 很邪恶，但我爱它的盒子模型
COMSHARP CMS 专栏
06-12 3279
盒子模型（Box Model）是 CSS 的核心，现代 Web 布局设计简单说就是一堆盒子的排列与嵌套，掌握了盒子模型与它们的摆放控制，会发现再复杂的页面也不过如此，然而，任何美好的事物都有缺憾，盒子模型有两种不同的诠释，一种来自 IE6，一种来自 W3C 标准浏览器。
SocraticLM: Exploring Socratic Personalized Teaching with Large Language Models
weixin_43961909的博客
01-05 2527
大型语言模型(LLM)被认为是推进智能教育的一项关键技术，因为它们展示了深入理解教学场景和为学生提供个性化指导的潜力。然而，当前个性化教学中基于LLM的应用主要遵循“问答”范式，学生被动地获得答案和解释。在本文中，我们提出了苏格拉底式教学模式(SocraticLM ),它实现了一种苏格拉底式的“发人深省”的教学范式，实现了真正的课堂教师的角色，让学生积极参与到真正掌握解决问题所需的思考过程中。
八 信息系统基础知识(考点篇)
辣香牛肉面的博客
08-03 1028
信息系统是由计算机硬件、网络和通信设备、计算机软件、信息资源、信息用户和规章制度组成的以处理信息流为目的的人机一体化系统。信息系统的5个基本功能：输入、存储、处理、输出和控制。信息系统的性质影响着系统开发者和系统用户的知识需求。“以计算机为基础”要求系统设计者必须具备计算机及其在信息处理中的应用知识。“人机交互”要求系统设计者还需要了解人作为系统组成部分的能力以及人作为信息使用者的各种行为。诺兰模型：信息系统进化的阶段模型。将计算机信息系统的发展道路划分为6 个阶段：1.初始阶段：计算机刚进入。
7、网络解聚合与网络操作系统选择深度解析
最新发布
sony5的博客
06-30 166
本文深入解析了网络解聚合与网络操作系统（NOS）的选择，重点介绍了ONIE的工作原理、网络解聚合中的硬件参与者、相关标准组织以及常见误区。同时，文章探讨了云原生数据中心网络对NOS的新需求，并对不同NOS模型进行了比较，为网络运营商提供了部署最佳实践和选择建议。
从所谓“IE6盒子模型”说起
dgk62408的博客
08-10 220
起因[TOP] 事情要从6月份锐商企业发的那篇《IE6 很邪恶，但我爱它的盒子模型》[1]说起，这篇文章已经被转了又转（Google的搜索结果相当多，百度倒是挺“干净”的），此文对于盒模型是这么描述的： “可以看出，IE6 盒子模型中，盒子的尺寸包含了 内容区，padding， border 和 margin 这四个部分，而 W3C 的盒子模型中，盒子的尺寸只包含内容区...
重学盒子模型（w3c的标准盒模型与ie6以下的盒子模型 ）
lyx9904的博客
03-04 266
盒模型有很多种，比如inline，inline-block，block，table等等。 而盒模型由display，内距，外距，宽高，边框，position，float决定 在css3中引入了盒模型属性box-sizing，共有三个属性值 content-box:翻译过来就是内容盒，我理解为在这个属性下我设置的宽高都是只指内容（即元素）的大小，该盒子真正的大小还要加上内距，边框。（加起来是内盒）， 内容盒，也是w3c的标准盒子 所以当宽高不变，给该盒子设置内距（padding）外距（margin）会撑大盒子
标准盒子模型和IE盒子模型
热门推荐
zyuzixiao的专栏
01-24 5万+
盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型： 从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。 　从上图可以看到 IE 盒子模型的范围也
W3C盒模型和IE盒模型的区别
根是地下的枝
06-29 2万+
盒模型在初学css的时候就会接触到，其实很容易理解，这里也不多废话，但是实际上在布局的时候还是会出现很多问题。对于盒模型的认识不能只停留在知道一个盒模型由哪些部分构成，也要更多的了解如何在不同情况下利用盒模型的特点进行布局。 这里讨论一下两种不同的盒模型： W3C盒模型和IE盒模型。 其实IE的盒模型问题只会出现在IE5.5及其更早的版本中，因为在IE6及更新的版本在标准兼容模式下使用的是W3C
css 标准盒子模型和ie盒子模型的区别和各自的特点
qq_37016928的博客
03-08 1万+
一、css 标准盒子模型css盒子模型 又称为框模型（Box Model），包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如下图：。图中的内层是content依次是padding border margin。通常我们设置背景时就是内容、内边距、边框这三部分。而外边距是透明的，不会遮挡其他元素。元素框的总宽度=width+paddi...
关于css布局中左侧固定右侧自适应的几种方法
专注前端开发
03-06 7640
第一种：float 浮动法 例如：左侧固定成100px; 则核心代码 左侧：width:100px;float:left; 右侧 width:auto;margin-left:100px; 实例：
面向对象继承实例(a如何继承b)
专注前端开发
07-01 4266
面向对象继承实例 window.onload = function(){ function parent(age,name){ this.age = age; this.name = name; } parent.prototype.show = function(){ alert('父级方法'); } function child(age,name,jo
IE6盒子模型深度测试：无问题
本文主要探讨了IE6浏览器的盒子模型问题，通过实验验证了在标准模式下，IE6与Firefox等浏览器对width、padding、border的处理方式一致，不存在所谓的双倍边距问题。 在Web开发中，浏览器的兼容性一直是开发者面临的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值