课程介绍

前端主流布局系统是指用于页面布局的常用技术和框架，包括传统的盒模型布局、Flexbox布局和Grid布局等。这些布局系统可以帮助开发者轻松地解决页面布局难题，实现各种复杂的布局效果。

传统的盒模型布局是基于浮动和定位的，通过设置元素的浮动和定位属性来实现页面的布局。这种布局方式比较简单，但是在处理复杂布局时会比较繁琐，并且不够灵活。

Flexbox布局是一种新的布局方式，它提供了一套强大的布局工具，可以轻松实现各种灵活的布局效果。Flexbox布局通过设置容器和元素的flex属性来实现布局，可以轻松地控制元素的排列、对齐和分布等。

Grid布局是另一种新的布局方式，它提供了一个二维的网格系统，可以将页面划分为多个网格区域，并通过设置网格属性来实现布局。Grid布局比Flexbox布局更加强大和灵活，可以实现更复杂的布局效果。

在实际应用中，可以根据具体的需求选择适合的布局系统。对于简单的布局需求，可以使用传统的盒模型布局；对于需要灵活控制元素排列和对齐的布局，可以使用Flexbox布局；对于需要更复杂的布局效果，可以使用Grid布局。

总之，掌握前端主流布局系统可以帮助开发者轻松解决页面布局难题，提高开发效率，并实现各种复杂的布局效果。

课程目录

/【imooc-527】前端主流布局系统进阶与实战，轻松解决页面布局难题/
│├─第1章 课程介绍(了解本课程必看)
│├─第2章 CSS还原UI设计
│├─第3章 布局中的尺寸与位置
│├─第4章 flex弹性布局
│├─第5章 grid网格布局
│├─第6章 移动端适配布局
│├─第7章 响应式布局
│├─第8章 综合实战 Ant Design Pro 管理系统
│├─资料.rar 34.2MB

详细目录

第1章 课程介绍(了解本课程必看)/
│├─1-1 课程导学.mp4 63.3MB
│├─1-2 常见布局展示及技术分析.mp4 72.4MB
│├─1-3 软件安装与课件获取方式.pdf 50.7KB
│├─1-4 CSS发展史与CSS模块划分.pdf 529.6KB
第2章 CSS还原UI设计/
│├─2-1 章节简介.mp4 9.6MB
│├─2-2 长度单位与颜色分类.pdf 230KB
│├─2-3 UI设计图的源文件种类.pdf 309.4KB
│├─2-4 Photoshop还原UI设计.mp4 48.7MB
│├─2-5 蓝湖App快速标注信息.mp4 55.9MB
│├─2-6 PxCook自动标注工具.mp4 63.3MB
│├─2-7 imgcook设计稿智能平台.mp4 47.1MB
│├─2-8 章节总结.mp4 5.8MB
第3章 布局中的尺寸与位置/
│├─3-1 章节介绍.mp4 12.1MB
│├─3-10 详解display属性.pdf 295.1KB
│├─3-11 书写模式与逻辑属性.pdf 482.7KB
│├─3-12 BFC块级格式化上下文.pdf 156.5KB
│├─3-13 标签默认样式及清除.pdf 92.6KB
│├─3-14 章节总结.mp4 4.3MB
│├─3-2 CSS盒模型的组成.mp4 114MB
│├─3-3 块级盒子与内联盒子.mp4 70.1MB
│├─3-4 自适应盒模型的特性.mp4 38.7MB
│├─3-5 标准盒模型与怪异盒模.mp4 79.6MB
│├─3-6 浮动样式详解.mp4 106.7MB
│├─3-7 浮动特性注意点.mp4 53.2MB
│├─3-8 定位样式详解.mp4 89MB
│├─3-9 定位特性注意点.mp4 61.2MB
第4章 flex弹性布局/
│├─4-1 章节介绍.mp4 11.3MB
│├─4-10 flex-grow扩展比例.mp4 78.6MB
│├─4-11 flex-shrink收缩比例.mp4 88.2MB
│├─4-12 flex-basis及flex缩写.mp4 100.1MB
│├─4-13 等高布局.mp4 49.5MB
│├─4-14 两列与三列布局.mp4 59.3MB
│├─4-15 StickyFooter布局.mp4 32MB
│├─4-16 溢出项布局.mp4 44.7MB
│├─4-17 综合案例一(Swiper轮播图).mp4 157.5MB
│├─4-18 综合案例二(知乎导航).mp4 173.8MB
│├─4-19 章节总结.mp4 3.9MB
│├─4-2 主轴与交叉轴.mp4 34.3MB
│├─4-3 换行与缩写.mp4 50MB
│├─4-4 主轴对齐详解.mp4 48.8MB
│├─4-5 交叉轴对齐详解.mp4 88.1MB
│├─4-6 内联与块的上下左右居中布局.mp4 85.9MB
│├─4-7 不定项居中布局.mp4 59MB
│├─4-8 均分列布局.mp4 62.8MB
│├─4-9 子项分组布局.mp4 54.7MB
第5章 grid网格布局/
│├─5-1 章节介绍.mp4 17.8MB
│├─5-10 多种组合排列布局.mp4 34.3MB
│├─5-11 栅格布局.mp4 62.8MB
│├─5-12 容器自适应行列布局.mp4 50.6MB
│├─5-13 综合案例一(百度热词风云榜).mp4 164.7MB
│├─5-14 综合案例二(小米商品导航菜单).mp4 160MB
│├─5-15 章节总结.mp4 4.7MB
│├─5-16 练习题.html 9.4KB
│├─5-17.html 2KB
│├─5-2 定义网格及fr单位.mp4 62MB
│├─5-3 合并网格及网格命名.mp4 62.5MB
│├─5-4 网格间隙及简写.mp4 44MB
│├─5-5 网格对齐方式及简写.mp4 59.9MB
│├─5-7 基于线的元素放置.mp4 114.9MB
│├─5-8 repeat()与minmax().mp4 91MB
│├─5-9 比定位更方便的叠加布局.mp4 56.9MB
第6章 移动端适配布局/
│├─6-1 章节介绍.mp4 17.8MB
│├─6-10 移动端vw布局及插件使用.mp4 41.6MB
│├─6-11 vw案例：B站移动端头部实现.mp4 102.8MB
│├─6-12 vw案例：B站移动端导航实现.mp4 122.3MB
│├─6-13 vw案例：B站移动端视频列表实现.mp4 144.1MB
│├─6-14 章节总结.mp4 6.4MB
│├─6-15 【练习题】测量个人中心页的css数值.html 2.2KB
│├─6-16 测试题.html 1.9KB
│├─6-2 移动端概念及UI设计稿尺寸.pdf 195.1KB
│├─6-3 移动端rem布局原理解析.mp4 43.9MB
│├─6-5 测量rem数值及插件使用.mp4 81.5MB
│├─6-6 rem案例：网易移动端头部实现.mp4 97.2MB
│├─6-7 rem案例：网易移动端导航实现.mp4 124.4MB
│├─6-8 rem案例：网易移动端新闻列表实现(1).mp4 74.9MB
│├─6-9 rem案例：网易移动端新闻列表实现(2).mp4 146.1MB
第7章 响应式布局/
│├─7-1 章节介绍.mp4 16.2MB
│├─7-10 响应式案例：博客文章列表实现.mp4 155.1MB
│├─7-11 响应式案例：博客辅助列表实现.mp4 113.5MB
│├─7-12 响应式案例：博客尾部实现.mp4 99.7MB
│├─7-13 章节总结.mp4 5MB
│├─7-2 媒体查询语法详解.mp4 89.6MB
│├─7-3 媒体查询的编写位置及顺序.mp4 62.2MB
│├─7-4 响应断点(阈值)的设定.mp4 51.3MB
│├─7-5 响应式栅格系统.mp4 81.1MB
│├─7-6 响应式交互实现.mp4 49.4MB
│├─7-7 响应式框架bootstrap.pdf 128.8KB
│├─7-8 响应式案例：博客头部实现.mp4 46.9MB
│├─7-9 响应式案例：博客导航实现.mp4 107.1MB
第8章 综合实战 Ant Design Pro 管理系统/
│├─8-10 实战项目：主体网格布局实现.mp4 125.4MB
│├─8-11 实战项目：设置模块主题色实现.mp4 148.2MB
│├─8-12 实战项目：设置模块切换按钮实现.mp4 55.6MB
│├─8-13 实战项目：设置模块主题色交互.mp4 80.9MB
│├─8-14 实战项目：设置模块切换按钮交互.mp4 147.8MB
│├─8-15 实战项目：响应式内容及菜单实现.mp4 162.2MB
│├─8-1章节介绍.mp4 7.4MB
│├─8-2 CSS文件划分及功能分类.pdf 119.2KB
│├─8-3 CSS方法论及样式规范.pdf 113.4KB
│├─8-4 实战项目：框架搭建.mp4 83.3MB
│├─8-5 实战项目：侧边栏结构编写.mp4 59.1MB
│├─8-6 (3分51，7分左右背景音嘈杂，有人说话)实战项目：侧边栏.mp4 95MB
│├─8-7 实战项目：侧边栏列表交互.mp4 60.6MB
│├─8-8 实战项目：侧边栏折叠交互.mp4 63.6MB
│├─8-9 实战项目：主体头部尾部实现.mp4 82.1MB