flex-grow、flex-shrink、flex-basis通过flex简写控制伸缩行为：flex-grow按比例分配剩余空间，默认0不放大；flex-shrink定义压缩比例，默认1可压缩，0不压缩；flex-basis设置主轴初始尺寸，优先级高于width。常用简写如flex:1（等分空间）、flex:01auto（默认值）、flex:none（固定大小）。

使用CSS的font-size属性控制字体大小，支持px、em、rem、%、pt等单位，可通过内联样式、内部样式表或外部文件设置，推荐用rem或em实现响应式布局，结合媒体查询优化多端显示效果。

合理使用CSS颜色与Flex布局可提升页面视觉效果和结构合理性，通过背景色区分区域并结合弹性布局实现响应式设计，如居中卡片、多色分区及渐变背景等应用，增强界面可读性与美观度。

使用相对单位、媒体查询和弹性布局可实现响应式按钮。通过em、rem和百分比定义尺寸，结合@media调整断点样式，并用flex布局使按钮在不同屏幕下自动排布，确保可读性与可用性。

使用百分比宽度可使盒子按父元素比例显示，.child设置width:50%时宽度为父容器300px的一半即150px，需注意padding和border会额外增加宽度，导致溢出；通过box-sizing:border-box可将内边距和边框包含在宽度内，确保尺寸准确；结合Flex布局时，设置display:flex与flex:1可让子元素平分父容器空间，适用于响应式设计。关键在于理解百分比基于父级宽度，并配合box-sizing和弹性布局实现精确控制。

答案：垂直相邻块级元素的外边距会合并，取最大值或相加（含负值情况），可通过添加边框、触发BFC或使用弹性/网格布局来防止。

浮动布局通过float实现多栏排列，需清除浮动；定位布局利用position控制元素位置，适合特殊场景；Flex布局适用于一维排列，支持弹性伸缩；Grid布局为二维系统，可定义行列结构；圣杯与双飞翼布局实现三栏自适应；响应式布局结合媒体查询与弹性单位适配多端设备。

本文旨在解决网页在不同屏幕尺寸下图片与文本内容重叠的常见响应式布局问题。通过将传统的绝对定位布局转换为现代的Flexbox布局，并结合媒体查询进行精细化调整，我们可以确保内容在各种设备上都能保持清晰的排列，实现图片与文本的灵活并排或堆叠效果。

本文将深入探讨如何利用CSSFlexbox布局和媒体查询解决在不同屏幕尺寸下图片与文本内容重叠的问题。通过移除绝对定位，采用弹性盒模型实现元素并排显示，并在屏幕宽度缩小时自动换行堆叠，同时结合媒体查询进行精细化样式调整，确保页面在各种设备上都能保持良好的视觉效果和用户体验。

使用CSSFlexbox可轻松实现响应式图片列表。首先创建包含多张图片的容器，设置display:flex、flex-wrap:wrap使图片自动换行，通过gap控制间距；为img设置flex:11200px保证弹性伸缩与最小宽度，配合max-width和height:auto保持比例；在@media(max-width:600px)中调整flex基准值为150px以适应小屏；可选添加border-radius、box-shadow及hover缩放提升视觉体验。最终实现无需JavaScript的

flex-wrap用于控制弹性子元素是否换行，取值为nowrap（不换行）、wrap（向下换行）和wrap-reverse（向上换行），常与flex-direction配合使用，可通过flex-flow简写属性统一设置，实现响应式多行布局。

使用媒体查询使导航栏在屏幕小于768px时转为垂直布局并默认隐藏；2.添加汉堡菜单按钮，通过JavaScript控制菜单显隐；3.利用Flexbox实现桌面端横向、移动端纵向的自适应排列；4.优化触摸体验，确保点击区域足够大并提升可访问性。

flex-basis用于设置弹性子元素的初始主轴尺寸，优先级高于width，可接受长度、百分比或auto等值，常见于flex简写中以优化布局控制。

使用CSS解决浮动元素下沉问题主要有三种方法：一是通过父容器设置overflow:hidden或auto触发BFC以包含浮动元素；二是采用伪元素清除浮动，推荐clearfix方案，兼容性好且无需额外标签；三是改用display:flex或grid现代布局，避免浮动带来的影响。其中伪元素法最通用，Flex布局更简洁现代，建议新项目优先使用弹性布局。

max-width和max-height可防止内容溢出与变形，提升响应式设计的适应性；2.图片设置max-width:100%配合height:auto保持比例，避免失真；3.文本容器通过max-width限制最佳阅读宽度，结合margin居中实现弹性布局；4.弹窗或下拉菜单使用max-height限制高度，配合overflow-y:auto防止垂直溢出；5.设置box-sizing:border-box确保padding和border不超出最大尺寸，使盒模型计算更直观。合理运用这些属性能增强页

使用CSSFlexbox实现多列文章排版，通过设置容器display:flex、flex-wrap:wrap和gap控制布局；子项用flex:11300px设定最小宽度并允许伸缩，配合媒体查询在不同屏幕下实现两列或三列适配，利用calc减去间距避免溢出，align-items控制对齐方式，提升响应式阅读体验。