弹性布局

box-sizing: border-box 能使元素宽度包含内容、内边距和边框，避免布局溢出。通过全局设置 * { box-sizing: border-box; } 并结合百分比宽度、Flexbox 布局，可实现稳定、响应式的多列或流式结构，在移动端表单、网格对齐及媒体查询中表现更可靠，是构建可…

flex-wrap用于控制弹性子元素是否换行：nowrap不换行，wrap从上到下换行，wrap-reverse从下到上换行。配合display: flex和flex-direction可实现多行布局，常用于响应式卡片、导航菜单等场景。 使用 flex-wrap 可以控制弹性容器中的子元素是否换行，…

外边距合并发生在块级元素垂直相邻时，包括兄弟元素、父子元素或空元素间，合并后取最大外边距值，可通过添加border、创建BFC、使用flex/grid布局或改用padding避免。 在CSS布局中，margin collapse（外边距合并）是一个常见但容易被忽视的现象。它指的是在特定情况下，两个垂…

Flexbox通过弹性布局实现图片画廊的自适应与响应式设计。首先将容器设为display: flex并启用flex-wrap: wrap，使图片可换行排列；通过flex-basis设置项目理想宽度，结合flex-grow和flex-shrink实现空间伸缩；使用gap控制间距，justify-con…

使用 :not 伪类结合 ::before 和 ::after 可精准控制样式应用，如 p:not(:first-of-type)::before 添加段落前缀、.nav a:not(:last-child)::after 实现导航分隔符、.card:not(:last-child) 统一间距、.b…

使用 grid-template-columns 配合 minmax() 可创建弹性网格布局，.container 使用 repeat(auto-fit, minmax(200px, 1fr)) 实现每列最小 200px、最大均分空间，auto-fit 自动填满容器；多列可设 minmax(150p…

使用Flexbox和媒体查询实现响应式表单布局，通过flex-wrap、gap和min-width控制换行与间距，结合width:100%和box-sizing确保自适应填充，利用@media在768px等断点调整flex-direction为column以适配移动端，同时设置统一高度、placeh…

答案：使用 display: flex 启用弹性布局，通过 flex-direction 设置方向，flex-wrap 控制换行，justify-content 和 align-items 定义对齐，flex 属性调节子项伸缩性，实现响应式布局。 使用 CSS 的 flex 属性可以轻松实现弹性布局…

使用 float、inline-block 和 flex 可实现图文混排。float 让图片左/右浮动，文字环绕，需清除浮动；inline-block 将元素设为行内块，通过 vertical-align 控制对齐，避免脱离文档流；flex 是现代布局首选，父容器设为 display: flex，用…

答案：通过CSS flex布局与媒体查询实现响应式分页，大屏展示完整页码，中屏保留关键页码并添加省略符，小屏仅显示首尾页及上下页，结合弹性容器与点击区域优化，确保各设备良好操作体验。 设计一个响应式分页组件，关键在于让页码在不同屏幕尺寸下都能清晰展示且易于操作。核心思路是通过CSS灵活布局，在小屏幕…