HTML & CSS – 第 2 页

使用 max-height 实现动画效果的“展开收起”

介绍了利用 CSS 设置 max-height 属性在 0 与目标高度之间切换，实现“展开收起”动画效果的方法。通过设置 transition 属性实现平滑过渡，避免使用 JavaScript。需注意 max-height 值不宜过大，以免导致视觉延迟影响动画效果。

讲解了设置 box-sizing: border-box; 的作用，明确元素的宽度和高度包含 border 与 padding，内容区宽高会自动减去 border 和 padding 的值。外边距 (margin) 不受影响，依然会发生合并。此属性使布局更直观且易于控制元素尺寸。

介绍了 manifest 的离线缓存功能及其优化加载速度的作用，适用于离线场景的应用如 H5、静态页面等。分析了其更新滞后、全量加载等问题，并指出其逐步被废弃的趋势。通过示例展示配置方法，强调 manifest 更适合离线工具类应用，不适用于频繁更新的网站。

总结了浮动元素导致父元素高度塌陷及布局问题的解决方法，包括使用 clear: both 添加清除浮动元素、通过伪元素清除浮动、设置 overflow:auto 或 overflow:hidden，以及为父元素添加浮动属性等方式，并指出了各方法的适用场景和注意事项。

介绍了 HTML5 全屏 API 的使用方法，包括 requestFullscreen() 和 exitFullscreen() 的调用方式及注意事项，提供了浏览器兼容性处理方案，并通过代码示例演示了全屏请求与退出的实现，适配主流浏览器的不同方法。

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

"CSS3 Flex布局（项目）"继续阅读

"CSS3 Flex布局（容器）"继续阅读

单页面结构简单、布局清晰，常常用来做手机 App 或者某个产品的下载介绍页面。现在，展示型网页整体趋向于单页网站设计，这样一次性把核心信息展现出来，对于用户来说更加直观和简单，能够快速了解一个产品。

"Bootstrap实战 - 单页面网站"继续阅读

介绍了社交媒体网站评论功能的实现，使用 Bootstrap 媒体对象构建评论组件。详细讲解了基础媒体对象、多层嵌套、对齐方式及列表应用，最后通过实例展示如何创建评论列表。

介绍了注册和登录模块的实现，使用 Bootstrap 标签页和表单构建可切换的登录注册界面。详细讲解了标签页的基础和进阶用法、按钮样式以及表单布局与验证。最后通过实例展示如何创建切换登录和注册的模块。