盒子模型(Box Model)是从CSS诞生之时便产生的一个概念,对网页中的大部分对象,实际呈现形式就是一个盒子形状对象(即块状对象),对于这个基础又重要的概念,只要掌握盒子模型的尺寸及占位的标准技术方法,那就可以灵活驾驭盒子模型了!
CSS盒子模型
网页设计中的每个元素都是长方形的盒子。怎样精确的计算盒子的尺寸?请看下面一幅图:

盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin)。
如果你是一个Firebug的用户,就会很熟悉下面的图表了。这个图表很好地展示了作用于页面上任意盒子的数值。

注意到上面两个例子中,margin都是白色的,margin 比较特别,它不会影响盒子本身的大小,但是它会影响和盒子有关的其他内容,因此 margin 是盒模型的一个重要的组成部分。
盒子本身的大小是这样计算的:
Width |
width + padding-left + padding-right + border-left + border-right |
Height |
height + padding-top + padding-bottom + border-top + border-bottom |
值为声明的情况
如果未声明 padding 或者 border,那他们或者值为零(使用 css reset 时),或者为浏览器的默认值(很可能不是零,尤其是那些通常没有重置的表单元素)。
如果未声明盒子的width(而且这个盒子是一个块级元素),那么事情就变得有点怪异,我们先看这点,然后再看一下其他优秀的关于盒子模型的资料。
块级盒的默认宽度
如果没有声明宽度,而且盒子是静态或者相对定位,那么宽度将保持100%且padding和border将向内推动而不是向外扩展。
如果明确的确定宽度为100%,那么padding就会向外扩展。

从这个例子可以看出,盒子的默认宽度并不是100%,也可能是其他值,应该了解这种特别有价值的情况,因为在现存的很多情况下,它对于设置/不设置宽度是很多帮助的。
我遇到的最大的麻烦就是 textarea(文本框) 元素了,它们需要设为宽度为所需的”cols”属性,并且不能包含子元素。因此通常需要明确的设置 textarea 的宽度为 100%,但有 padding 时,就会延 展 textarea 的宽度。固定宽度环境下,通常可以设置为合适的像素值宽度,但是变宽情况就没那么幸运了。
无宽度的绝对定位盒子
未设定宽度的绝对定位的盒子的表现有点不一样。它们的宽度只需要适合它们所包含的内容即可。因此,如果盒中只有一个单词,盒子就会像那个词的表现一样宽。如果变成两个词,盒子的宽度也会相应增加。

这种情况会持续到盒子的宽度达到父元素宽度的 100%(最近的相对定位的父元素或者浏览器窗口),然后就会折行。
对盒子来说,垂直扩展以适应包含的内容是很自然的。值得奇怪的是,不仅仅是不同平台下的文本表现不同,不同的浏览器处理这个问题时,也有很多怪癖。

无宽度浮动盒子
同无宽度的绝对定位盒子的表现一样。盒子的宽度只需要扩展到所包含内容的宽度,直到其父元素的宽度(其父元素不必是相对定位的)。由于这些无宽度盒 子的脆弱性,我们要学到的是关键任务模式的时候它们是不能依赖的,像总体页面布局中。如果浮动一列作为侧边栏使用,并指望那些内部元素(如图片)来负责包 含它的宽度,你就是在自找麻烦。
内联元素也是盒子
我们这里一直把重点放在块级元素的盒子上。很容易就可以把块级元素想象为盒子,但是内联元素也是盒子。可以把他们想象为非常长而窄的长方形,它们也可以像其它盒子一样有 margin, padding 和 border。

折行使它看起来有些不好理解。如上所示的左 margin 把盒子推向右边,但是只在第一行有效,因为那是盒子的起点。padding 正常的应用在文本的上部或下部,当折行时它会忽略上面行的 padding 并且以行高(line-height)要求的位置作为起点。透明背景是为了让效果看起来更清楚。
亲眼目睹一下
想看看组成页面的每个单独的“盒子”吗?试着把这行代码暂时放入样式表:
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->* { border: 1px solid red !important; }

FROM:http://www.qianduan.net/css-box-model.html
分享到:
相关推荐
本书详细介绍了CSS如何控制页面布局,包括CSS选择器的基本使用、选择器命名规则、以及盒子模型等基础概念。 在实践篇,教程涵盖了在实际开发过程中会遇到的各种技能,包括布局设计、清除浮动、导航条的制作等。作者...
第 3 章:语言基础第 4 章:变量、作用域与内存第 6 章:集合引用类型6.4 Map6.5 WeakMap6.6 Set6.7 WeakSet第 7 章:迭代器和生成器7.2 迭代器模式7.3 生成器CSS 盒子模型:5 种方式实现 CSS 元素水平居中,实用又...
在设计这个动画时,需要考虑元素的盒模型(Box Model),包括内容区域、内边距、边框和外边距,确保小盒子在悬浮时准确地定位和显示。可能使用了Flexbox或Grid布局来实现更灵活的容器管理,使得小盒子能根据鼠标...
内容概要:本文详细介绍了低成本单发单收激光测距传感器的一站式解决方案,涵盖硬件设计、软件实现及其应用。硬件部分基于STM32F030F4P6芯片,搭配激光发射管和APD接收模块,通过精心设计的信号调理电路确保高精度测量。软件部分展示了关键代码片段,如初始化、测距算法和ADC配置,采用改进型飞行时间法(ToF)并通过DMA优化数据处理效率。此外,文章还讨论了调试过程中遇到的问题及解决方案,如环境光干扰和PCB布局优化。最终,该方案实现了0.05-50米范围内±1.5mm的测距精度,适用于多种应用场景。 适合人群:电子爱好者、硬件工程师、嵌入式系统开发者。 使用场景及目标:① DIY爱好者可以通过本方案进行个人项目的开发;② 企业可以基于此方案进行商业产品的开发,降低成本;③ 教育机构可以用作教学案例,帮助学生理解激光测距原理和技术实现。 其他说明:文章不仅提供详细的硬件和软件设计方案,还包括BOM清单、供应商信息和调试指南,有助于快速实现和优化项目。
内容概要:本文详细介绍了将麻雀算法(SSA)应用于LSTM参数优化的方法及其MATLAB实现。首先,通过生成带噪声的正弦波数据模拟真实场景的数据扰动,然后定义适应度函数用于评估LSTM模型的表现。接着,利用麻雀算法的发现者和跟随者角色进行参数优化,最终实现了比随机调参更好的预测效果。文中不仅提供了完整的代码实现,还讨论了参数设置的经验值以及一些实用技巧,如数据归一化、早停机制和并行加速等。 适合人群:对机器学习尤其是深度学习有一定了解的研究人员和技术爱好者,熟悉MATLAB编程环境。 使用场景及目标:适用于需要提高时间序列预测精度的任务,如金融数据分析、天气预报等领域。主要目标是通过引入生物启发式的优化算法来提升LSTM模型的性能。 其他说明:文中提到的麻雀算法能够显著减少人工调参的工作量,并且相比传统的网格搜索法更加高效。此外,作者还分享了一些实践经验,帮助读者更好地理解和应用这一方法。
内容概要:本文详细介绍了使用西门子Smart200 PLC实现高效的星三角降压启动子程序的方法。作者分享了具体的编程技巧,包括参数化的外部配置、定时器的巧妙运用以及故障处理机制。文中展示了完整的主程序调用示例和子程序内部逻辑,强调了模块化编程的优势,使得不同电机可以轻松复用相同的子程序,极大提高了调试和维护效率。此外,作者还提到了一些常见的调试陷阱和优化建议,如避免星三角同时导通、合理设置切换时间和加入硬件互锁等。 适合人群:从事PLC编程、自动化控制领域的工程师和技术人员,尤其是那些希望提高编程效率和代码复用性的从业者。 使用场景及目标:适用于需要频繁进行电机星三角降压启动的工业应用场景,如纺织厂、水泥厂等。主要目标是通过模块化编程减少重复劳动,提升系统稳定性和响应速度。 其他说明:文章不仅提供了详细的代码示例,还分享了许多实践经验,帮助读者更好地理解和应用这些技术。
2025中国数字营销趋势报告.pdf
内容概要:本文详细介绍了如何利用两台威纶通MT6071iP触摸屏控制一台信捷PLC的具体步骤和技术要点。主要内容涵盖硬件连接、触摸屏设置、PLC编程、调试与优化等方面。文中不仅提供了具体的配置方法,如通讯参数设置、画面设计、宏指令处理等,还分享了许多实际操作中的经验和注意事项,如地址分配、数据同步、通讯稳定性提升等。 适合人群:从事工业自动化领域的工程师和技术人员,尤其是那些需要实现多屏协同控制PLC系统的工作者。 使用场景及目标:适用于需要提高生产线上设备操作便捷性和监控灵活性的场合。通过一机多屏设置,可以在不同位置对同一PLC进行控制,方便现场操作和远程管理。 其他说明:文章强调了硬件连接细节、通讯参数一致性、PLC编程逻辑的重要性,并提供了一些实用技巧,如宏指令处理、心跳检测、防呆设计等,帮助读者更好地理解和实施该项目。
2024中国上市公司数字化转型报告.pdf
内容概要:《2024年中国物联网产业创新白皮书》由深圳市物联网产业协会与AIoT星图研究院联合编制,汇集了全国30多个省市物联网组织的智慧。白皮书系统梳理了中国物联网产业的发展历程、现状及未来趋势,涵盖了物联网的概念、产业结构、市场规模、投融资情况、面临的问题与机遇。书中详细分析了感知层、传输层、平台层及应用层的关键技术,探讨了智慧城市、智能工业、车联网、智慧医疗等九大产业物联网应用领域,以及消费物联网的发展特征与热门单品。此外,白皮书还关注了物联网数据安全、法规遵从、人才短缺等挑战,并提出了相应的解决方案。 适用人群:物联网从业者、企业决策者、政策制定者及相关研究机构。 使用场景及目标:①帮助从业者深入了解物联网产业的现状和发展趋势;②为企业决策者提供战略规划依据;③为政策制定者提供政策支持和法规制定参考;④为研究机构提供详尽的数据和案例支持。 其他说明:白皮书不仅限于技术科普,更从宏观角度结合市场情况,多维度讨论了物联网产业生态,旨在为物联网企业、从业者找到最适合的技术应用场景,促进产业健康发展。报告还特别鸣谢了参与市场调研的企业,感谢他们提供的宝贵行业信息。由于时间和资源的限制,报告可能存在信息不充分之处,欢迎各界人士提出宝贵意见。
内容概要:本文详细介绍了汇川H5U PLC中采用结构体编程的优势及其具体应用场景。作者通过多个实际项目案例展示了结构体编程如何显著提高代码的整洁度、可维护性和扩展性。文中特别强调了结构体在处理大量相似设备(如气缸、阀门、伺服轴)时的作用,以及如何利用结构体简化变量管理、增强在线调试体验并减少内存消耗。此外,还讨论了一些常见的注意事项和技术细节,如结构体初始化、功能块集成、在线修改功能的应用等。 适用人群:从事工业自动化系统开发的技术人员,尤其是对PLC编程有一定经验的工程师。 使用场景及目标:适用于需要高效管理和维护复杂工业控制系统的场合,旨在帮助工程师更好地理解和掌握结构体编程技巧,从而提高工作效率和代码质量。 其他说明:文章提供了丰富的代码片段作为示例,便于读者直观地理解结构体编程的具体实现方法。同时提醒读者注意结构体初始化等问题,确保项目顺利进行。
内容概要:本文介绍了如何利用数学建模替代传统的电气元件仿真,实现三相逆变器的模型预测控制(MPC)。主要内容包括三相桥的数学模型建立、代价函数设计、状态方程离散化以及仿真优化技巧。通过将三相桥的输出电压转换为矩阵运算,减少了计算复杂度,提高了仿真速度。代价函数不仅考虑了电流跟踪误差,还加入了开关频率惩罚项,以减少不必要的开关动作。此外,文中提供了详细的代码示例,展示了如何通过数学建模实现高效的MPC控制。 适合人群:从事电力电子控制系统设计的研究人员和技术人员,尤其是对三相逆变器及其控制算法感兴趣的读者。 使用场景及目标:适用于需要快速迭代和验证控制算法的场合,如光伏并网、电机驱动等领域。目标是提高仿真效率,优化控制性能,减少开发时间和成本。 其他说明:文中提到的技术手段能够显著提升仿真速度,但在应用时需要注意数值稳定性和参数辨识的准确性。
内容概要:本文详细介绍了如何使用MATLAB/Simulink构建并仿真一个60W的Flyback变换器模型,输入为390V直流,输出为19V/3A。主要内容涵盖主电路搭建(包括变压器参数设置、MOSFET选择)、吸收电路设计(RCD参数调整)、闭环控制系统(PID参数调节)以及动态性能测试。文中还提供了多个实用技巧,如防止变压器饱和、优化吸收电路参数、提高动态响应速度等,并指出了常见的错误及其解决方案。同时,推荐了几本相关领域的经典书籍供进一步学习。 适合人群:初学者和有一定基础的电源设计师,特别是希望深入了解Flyback变换器工作原理和技术细节的人群。 使用场景及目标:适用于需要进行中小功率电源设计的研究人员和工程师,旨在帮助他们掌握Flyback变换器的设计方法,提升仿真的准确性和可靠性。 其他说明:提供的仿真文件可以在MATLAB 2017b及以上版本运行,建议读者按照文中步骤逐步实践,以便更好地理解和应用所学知识。
内容概要:《2024年中国城市低空经济发展指数报告》由36氪研究院发布,指出低空经济作为新质生产力的代表,已成为中国经济新的增长点。报告从发展环境、资金投入、创新能力、基础支撑和发展成效五个维度构建了综合指数评价体系,评估了全国重点城市的低空经济发展状况。北京和深圳在总指数中名列前茅,分别以91.26和84.53的得分领先,展现出强大的资金投入、创新能力和基础支撑。低空经济主要涉及无人机、eVTOL(电动垂直起降飞行器)和直升机等产品,广泛应用于农业、物流、交通、应急救援等领域。政策支持、市场需求和技术进步共同推动了低空经济的快速发展,预计到2026年市场规模将突破万亿元。 适用人群:对低空经济发展感兴趣的政策制定者、投资者、企业和研究人员。 使用场景及目标:①了解低空经济的定义、分类和发展驱动力;②掌握低空经济的主要应用场景和市场规模预测;③评估各城市在低空经济发展中的表现和潜力;④为政策制定、投资决策和企业发展提供参考依据。 其他说明:报告强调了政策监管、产业生态建设和区域融合错位的重要性,提出了加强法律法规建设、人才储备和基础设施建设等建议。低空经济正加速向网络化、智能化、规模化和集聚化方向发展,各地应找准自身比较优势,实现差异化发展。
内容概要:本文深入探讨了汇川H5U PLC程序框架,尤其是其在ETHERCAT总线控制方面的应用。该框架提供了完整的气缸控制、轴控制等功能模块,涵盖从初始化到故障处理的全过程。文中详细介绍了气缸控制的梯形图逻辑、轴控制的具体指令及其状态机设计,并展示了触摸屏与PLC变量的绑定方法。此外,还提到了三套针对不同应用场景的程序样例,包括单机设备、流水线联动和柔性生产版本。整体而言,该框架以其条理分明的代码结构和丰富的功能模块,成为自动化控制领域的有力工具。 适合人群:从事工业自动化控制系统的工程师和技术人员,特别是初学者和希望深入了解汇川H5U PLC及ETHERCAT总线控制的专业人士。 使用场景及目标:适用于需要高效、稳定的多轴运动控制和人机交互的自动化项目。主要目标是帮助用户快速掌握汇川H5U PLC的编程技巧,提高项目的开发效率和可靠性。 其他说明:文章强调了框架的实用性、易用性和详细的文档支持,使得即使是新手也能轻松上手并应用于实际项目中。
https://blog.csdn.net/qianqianaao/article/details/147515496?fromshare=blogdetail&sharetype=blogdetail&sharerId=147515496&sharerefer=PC&sharesource=qianqianaao&sharefrom=from_link python小项目
内容概要:本文详细介绍了如何利用Cruise和Simulink平台进行增程式混合动力汽车的整车仿真模型构建。主要内容涵盖增程器、电池、驱动电机等关键部件的物理参数设置,尤其是发电机和驱动电机效率MAP图的精确调整。文中强调了控制策略的重要性,将其分为驾驶模式选择、扭矩分配、SOC平衡三个子系统,并讨论了模式切换逻辑、再生制动策略以及DLL联合仿真的难点和技术细节。此外,作者分享了许多实用的经验和技巧,如使用二维插值提高增程器工作效率、设置合理的滞回区避免模式震荡、通过环形缓冲区解决时钟同步问题等。 适合人群:从事新能源汽车研究的技术人员、高校相关专业师生、对混合动力汽车仿真感兴趣的工程师。 使用场景及目标:帮助读者掌握增程式混合动力汽车仿真模型的搭建方法,提高仿真的准确性,优化控制策略,减少开发周期和成本。 其他说明:文章提供了大量实战经验和调试技巧,有助于解决实际工作中常见的问题,如模式切换不稳定、DLL编译错误、制动能量回收不合理等。同时,还分享了一些提高仿真效率的小窍门,如使用Fast Restart功能、避免内存泄漏等。
内容概要:本文详细介绍了威纶通触摸屏上利用EBpro软件和宏指令实现的经典贪吃蛇游戏。文中不仅剖析了游戏的核心逻辑,如蛇的移动、碰撞检测、方向控制以及食物生成算法,还探讨了宏指令在触摸屏编程中的具体应用。通过这个模板,读者可以深入了解宏指令的工作机制及其在工业触摸屏编程中的优势。 适合人群:对嵌入式系统、人机界面(HMI)编程感兴趣的开发者和技术爱好者。 使用场景及目标:① 学习如何在威纶通触摸屏上使用宏指令进行编程;② 掌握贪吃蛇游戏的基本逻辑和实现方法;③ 提升对工业触摸屏编程的理解,尤其是宏指令的应用技巧。 其他说明:文章提供了详细的代码片段和注释,帮助读者更好地理解和修改代码。同时,文中提到的一些优化建议(如防止180度急转弯、改进随机数生成等)有助于提高游戏性能和用户体验。
内容概要:本文详细介绍了如何利用黏菌优化算法(SMA)优化广义回归神经网络(GRNN)来进行时间序列的拟合预测建模。首先解释了SMA和GRNN的基本原理,接着提供了完整的MATLAB代码实现,包括数据加载与划分、SMA参数设置、SMA主循环、模型构建与预测、绘图与指标计算等步骤。文中不仅给出了详细的代码注释,还分享了一些实用的经验技巧,如数据处理方法、参数选择建议等。此外,通过具体的案例展示了该方法的有效性和优越性。 适合人群:对时间序列预测感兴趣的科研人员、学生以及有一定编程基础的数据分析师。 使用场景及目标:适用于需要高精度时间序列预测的应用场景,如金融、能源等领域。主要目标是提高预测精度,减少预测误差,提供可靠的预测结果。 其他说明:本文提供的代码可以直接应用于实际项目中,只需替换相应数据即可。同时,文中提到的一些经验和技巧可以帮助使用者更好地理解和应用该方法。
本书是《Data Structures and Algorithm Analysis in C++》第三版的解答手册,包含了该教科书中许多练习题的答案。这些答案反映了第三版第一次印刷时书籍的状态。特别排除了一般编程问题和任何解决方案在章节末尾有参考文献的问题。解决方案在完整性程度上有所不同;通常,细节留给读者。存在的少量代码段落应该是伪-C++代码,而不是完全完美的代码。本书适合已经学习过《Data Structures and Algorithm Analysis in C++》的学生或读者使用,作为理解和掌握数据结构与算法分析的辅助材料。