VIP8

本课程属于：054-CLI、SDK与软件工程规范 后端、数据与云原生工程 · 共 8 门相关课程，组合学习更完整。

查看所属VIP全部课程 →

← 返回所属目录咨询 / 购买

界面布局与自适应技巧实战

📚 共计 30 章节

认识CSS盒模型、display属性详解（block、inline、inline-block）、标准文档流与脱离文档流。

盒模型文档流

float属性的前世今生、清除浮动的N种姿势、实战：两栏/三栏自适应布局。

float清除浮动

position属性全解（static、relative、absolute、fixed、sticky）、z-index层叠上下文、实战：固定导航栏与模态框。

positionz-index

Flex弹性布局（上）

Flex容器属性（flex-direction、flex-wrap、justify-content、align-items、align-content）。

flex容器主轴

Flex弹性布局（下）

Flex项目属性（flex-grow、flex-shrink、flex-basis、align-self、order）、实战：圣杯布局与居中方案。

flex项目圣杯

Grid网格布局（上）

Grid容器属性（grid-template-columns、grid-template-rows、gap、grid-template-areas）。

grid容器行列

Grid网格布局（下）

Grid项目属性（grid-column、grid-row、grid-area）、实战：响应式卡片网格。

grid项目响应式卡片

响应式设计核心

媒体查询（@media）、断点策略、移动优先 vs 桌面优先。

自适应单位详解

px、em、rem、vw/vh、%、calc()、实战：基于rem的移动端适配方案。

流式布局与百分比布局

百分比布局的坑、max-width/min-width的妙用、实战：全屏背景图自适应。

百分比max-width

column-count、column-gap、column-rule、实战：瀑布流布局。

多列瀑布流

display:table系列、传统table布局的现代应用、实战：垂直居中与等高列。

CSS函数与表达式

min()、max()、clamp()、env()、实战：安全区域适配（刘海屏）。

clamp()安全区域

容器查询（Container Queries）

container-type、container-name、@container、实战：组件级自适应。

容器查询@container

图片与多媒体自适应

object-fit、object-position、aspect-ratio、响应式图片（srcset、sizes、picture）。

object-fit响应式图片

字体与排版自适应

视口单位字体、clamp()动态字体、line-height与可读性。

视口单位动态字体

表单与控件自适应

input/button/select的自适应、label对齐、实战：移动端友好表单。

表单移动端

导航与菜单自适应

汉堡菜单、响应式导航栏、多级菜单的适配方案。

汉堡菜单响应式导航

表格响应式方案

水平滚动、折叠行、卡片化、实战：数据表格的移动端适配。

响应式表格卡片化

CSS Grid高级技巧

subgrid、auto-fill vs auto-fit、minmax()、实战：自动填充网格。

subgridauto-fill

Flexbox高级技巧

margin:auto的妙用、flex与grid混合使用、实战：复杂仪表盘布局。

margin:auto混合布局

CSS Shapes与不规则布局

shape-outside、clip-path、实战：图文环绕与多边形裁剪。

shape-outsideclip-path

滚动与粘性布局

scroll-snap-type、scroll-snap-align、sticky定位进阶、实战：全屏滚动幻灯片。

scroll-snapsticky

暗黑模式与主题自适应

prefers-color-scheme、CSS自定义属性、实战：一键切换主题。

暗黑模式自定义属性

打印样式与自适应

@media print、分页控制、实战：生成可打印的简历页面。

@media print分页

性能优化与布局

减少重排重绘、will-change、contain属性、实战：流畅的动画布局。

重排重绘contain

CSS Houdini与未来布局

Paint API、Layout API、实战：自定义瀑布流布局。

HoudiniPaint API

跨平台布局策略

Electron/React Native/Taro中的布局差异、WebView适配。

跨平台WebView

无障碍与布局

ARIA标签、键盘导航、焦点管理、实战：无障碍的响应式表单。

ARIA键盘导航

从零搭建一个完整的响应式企业官网（含首页、列表页、详情页、404页）。

企业官网全流程