`
zccst
  • 浏览: 3322663 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

重新认识盒模型

 
阅读更多
作者:zccst

一直认为盒模型简单到可以不用写任何这方面的东西,直接使用就可以了,直到近期发现我其实理解的有误差。


div的hight应该是pading-top + text + padding-bottom
div的width应该是pading-left + text + padding-right

2013-08-08
最新的理解
width不包括margin,也不包括padding。
比如一共800x600的区域,如果padding:10px 那么实际的width只能是780x580了。

查了一下,果然如此:


实例


#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

提示:内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。
提示:外边距可以是负值,而且在很多情况下都要使用负值的外边距。


浏览器兼容性
一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。
  • 大小: 7.8 KB
  • 大小: 4.6 KB
分享到:
评论

相关推荐

    01_认识盒子模型.html

    01_认识盒子模型

    DIV+CSS创建网页-盒子模型介绍.pptx

    实际上,元素的总宽度和总高度还包括了内边距、边框和外边距,这就需要我们对整个盒子模型有一个全面的认识。 内边距位于内容区域和边框之间,提供了一定的空间,有助于增加元素的视觉舒适度和层次感。通过调整内...

    【HRBP工具箱】六个盒子.pdf.pdf

    六个盒子模型,又称韦斯伯德的六盒模型,是一种广泛应用于组织发展领域的诊断工具。它旨在帮助企业从六个不同的维度来审视和评估组织当前的状态及其运作机制,从而识别出改进的机会。 **六个维度包括:** 1. **...

    报栏3Dmax模型

    这种图片通常用于展示模型的最终渲染效果,包括材质、纹理、光照和阴影等元素,帮助用户在使用前对模型有一个直观的认识。通过观察这张图片,设计师可以评估模型是否符合他们的项目需求。 接下来,"max1600.max...

    1第一部分 关系数据库之OLTP模型设计(2012-09-23第5版).pdf

    关系数据库在OLTP(在线事务处理)模型设计方面是企业应用中非常重要的一环...对于刚入门的数据库开发人员而言,了解这些知识点有助于他们快速提升对关系数据库设计的认识,为成为一名合格的数据库专家打下坚实的基础。

    企业工程论坛合集(二):企业应用、信息系统与模型

    在总结和对未来展望的部分,通过对企业应用发展线索的分析,我们可以更清晰地认识到企业应用的发展趋势和挑战。通过探索互联网时代的新企业应用,文章强调了在不断变化的互联网环境下,企业应用所面临的新机遇和挑战...

    精美白天天空盒十个第五部分

    通过查看这些图片,开发者可以在选择适合的天空盒时有一个直观的认识,判断哪种效果最符合他们的游戏需求。 总结来说,"精美白天天空盒十个第五部分"是一个为Unity游戏开发者准备的高质量天空环境资源包,包含了...

    CSS深入学习之让你认识不一样的margin

    一、简介 margin我们一般习惯的叫它外边距,分别可以设置四个方向的外边距,这里不再赘述赋值语法。 实际上,我们通常设置的margin是物理级别的设置,而margin还有start、end、before、after等,这些主要是逻辑...盒

    计算机基础 CSS样式表高级应用PPT课件.pptx

    不同的浏览器可能有不同的盒模型实现,如W3C盒模型和IE盒模型。 **5. DIV+CSS设计思路** 在使用DIV+CSS进行网页设计时,我们首先用元素定义页面的结构,然后通过CSS来设置布局和样式。主要步骤包括: - 使用div来...

    认识软件测试,了解什么是软件测试

    "认识软件测试,了解什么是软件测试" 软件测试是软件开发过程中不可或缺的一部分,它的出现是为了解决软件错误导致的严重后果。软件测试的目的是为了保证软件的功能是可用的,满足用户的需求,并且确保软件的质量。...

    长方体的认识教案板书教学设计.doc

    在课前准备阶段,教师需要准备PPT课件和长方体与正方体的模型,而学生则需要准备长方体和正方体的纸盒,以便于课堂上的互动学习。 教学过程分为两个主要部分:创设情境,设疑导入以及动手实践,探究新知。 在导入...

    认识体积和容积练习题及答案精选.doc

    在认识体积的练习题中,我们学习到如何计算一些规则几何体的体积,例如长方体、圆柱体等。这些几何体的体积通常可以通过简单的数学公式计算得出。例如,一个立方体的体积等于它的边长的三次方,而圆柱体的体积则是底...

    行业文档-设计装置-一种小学数学教学用学具盒装置.zip

    在当今的教学实践中,强调体验学习与互动教学的重要性日益凸显。...因此,教师和家长应当充分认识到学具盒在教学中的重要价值,合理利用这一工具,提升孩子的数学素养,为其日后的学习和生活打下坚实的基础。

    “人民币的认识”教学设计与评析.pdf

    2. 使学生初步认识商品的数学模型,学会简单的购物,培养学生思维的灵活性、与他人合作的态度以及学习数学的兴趣。 3. 对学生进行保护人民币和勤俭节约的教育。 教学重点: * 认识各种面值的人民币以及人民币单位...

    HTML5程序设计-3期(KC014) KC014050000002 单元设计_单元2 CSS3基础.doc

    课程分为三个部分:认识CSS3、盒子模型和新增颜色及文本属性。每个部分都有讲解、操作演示、实战训练和课后作业,以加深理解和实践应用。 在“认识CSS3”部分,学生将学习CSS3的基本概念,如选择器的分类(标签选择...

    圆柱的认识 (2).doc

    其中,《圆柱的认识》作为六年级学生必须掌握的知识点之一,旨在通过直观教学和实践活动,让学生了解圆柱的结构特征,掌握其计算方法,从而深化对空间几何图形的认识。本文将对圆柱的结构、特征及侧面积计算进行详细...

    深度学习教学策略:实践、比较与运用——以北师大版五年级下册第二单元《长方体的认识》为例.pdf

    在长方体的教学中,教师可以让学生在实际生活中寻找长方体的实例,如书本、文具盒等,以及通过画图、制作模型等活动将长方体的抽象概念转化为具体形象。通过这样的实践活动,学生能够将课堂上学到的知识点转化为解决...

    认识css样式

    3. 盒模型:理解元素的宽度、高度、边距和内边距如何影响布局,以及盒模型的不同模式(W3C标准盒模型和IE盒模型)。 4. 布局技术:如浮动布局、定位(static, relative, absolute, fixed),以及现代CSS布局方法如...

    人教版五年级数学下册长方体的认识.ppt

    立体几何的学习不仅丰富了学生们对形状的认识,也为他们解决现实生活中与空间相关的问题打下基础。在这一单元的学习内容中,长方体是一个基础且关键的立体图形,它的特性与应用贯穿于整个小学数学教育阶段,是学生...

Global site tag (gtag.js) - Google Analytics