SamHou0的博客

本篇教程深入讲解Flexbox布局的核心概念，重点介绍弹性容器的三大关键属性：flex-grow（控制伸展比例）、flex-shrink（控制收缩比例）和flex-basis（设置基准尺寸）。通过生动示例演示了主轴与交叉轴的方向控制（flex-direction）、元素对齐方式（justify-content/align-items）以及自动换行（flex-wrap）的实现原理。教程采用"奶奶级"易懂方式，配合动态图示展示不同属性值的效果差异，为后续JavaScript学习打下CSS基础。

通俗的讲起来，FlexBox就是一种让元素自动布局的方法。在不同的设备/网页大小下，你的元素能够根据你自己的设置自动调节布局。具体的我们在代码中讲解。

还记得开头的小诗吗？我们回顾一下，现在你能看懂了吧？点类井号逗为或，类多号单连为且。id 优先类在后，类型选择在末尾。代码优先难解决，拿出鼠标数一数。如若个数全相等，末尾样式最优先。外联选择需谨慎，勿忘行内价最高。

本文介绍了CSS盒子模型的基础知识，主要包含： 盒子模型的三个组成部分：外边距(margin)、边框(border)和内边距(padding) 外边距折叠规则及正负边距的计算方法 两种盒子类型(content-box和border-box)的区别 元素的三种布局方式：行内元素(inline)、块元素(block)和行内块元素(inline-block) 文章通过代码示例和可视化效果，详细讲解了盒子模型中的各个概念和实际应用场景。