css3
✍️ Tangxt ⏳ 2021-09-23 🏷️ CSS3
01-课程导学 & 常见布局展示及技术分析
★课程导学
1）为啥要做这样一门课程？
CSS 布局是前端开发中不可或缺的一部分
在项目中无论是采用传统开发模式，还是使用各种流行框架（如 Vue、React、小程序等），都会涉及到 CSS 布局的相关工作
由此可见，这个技能点是非常重要的！
整体的前端井喷式的发展，单一布局已经无法满足市场需求了
随着互联网的发展，产品种类是越来越丰富了，如手机 APP、桌面应用程序、智能电子设备等
小到智能手表，大到可视化平台，都需要界面排版布局。
而传统的单一布局方式已经无法满足如此丰富的产品需求，需要更多的手段来加以实现。新框架的诞生也脱离不开 CSS 布局。
从未来的前端的发展趋势来看，界面相关的技术依然会以 CSS 为主。前段时间，华为推出来了鸿蒙操作系统
它可以采用前端技术进行开发，而样式布局依然是 CSS 来实现的。所以学习 CSS 布局也是适应未来发展的。
2）课程有哪些收获？
💡：首先，将收获精通现代布局四大核心技术。
本课程将摒弃传统的老旧的布局模式，主要会围绕着现代布局中的四大核心技术进行精讲，学习内容更符合现在及未来的使用趋势，分别是 flex 弹性布局、grid 网格布局、移动端适配布局以及响应式布局。
学习完这四块布局之后，基本可以满足 90% 常见的布局需求。
💡：其次，我们将收获与设计师配合
本课程将以人为本，更多的站在开发者的角度去分析问题和解决问题，与 UI 设计师如何配合，如何高质量的还原 UI 设计图等操作等，都是成为一名优秀的前端开发工程师所必备的技能。所以我们将学习到设计图相关的一些概念， PhotoShop 切图详解，标注工具像蓝湖、PxCook 的使用以及智能平台 imgCook 等
💡：课程还将收获很多实战经验
课程学习非纸上谈兵，而是学以致用。本课程将安排有大量实战案例进行讲解来巩固所学知识点，包括 20+ 以上的常见布局方案、 7 个综合案例、1 个综合项目以及特殊布局案例等内容。案例不是以单纯的实现为目的，而是更多的分享技巧、经验以及更好的实现方式。
3）课程章节的具体安排
1、章节内容安排
首先在前两章当中，我们主要是了解一些关于布局当中的一些基本的操作，像 CSS 还原 UI 设计布局中的尺寸与位置
接下来的章节当中，我们将去详细的讲解我们前面介绍的四大布局方式，分别是 flex 弹性布局、grid 网格布局、移动端适配布局以及响应式布局。四大布局当中我们不仅是只讲这个理论基础，还会配合相关的案例以及我们的一些综合案例。
这四章讲完之后，就进入了我们在综合实战的一个案例讲解当中，是 Ant Design Pro 的管理系统，老师会带着大家从 0 到完整的方式来实现我们首页的一个开发，并且掌握更多的一些开发的技巧。
最后我们还会安排一些扩展布局的方案，来让大家去学习一些特殊布局是如何来实现的。
2、核心知识点
那我们再来看一下我们的一个核心知识点，大概有 50+ 以上，比如说像弹性、网格、浮动、定位这些：
3、布局方案
我们会在课程当中都会给大家进行详细的讲解。除了核心知识点以外，咱们还有 20+ 布局方案，而这些方案其实可以满足我们大部分的开发需求，像不定项居中、均分列、视觉差、等高等等这样的一些布局方式。
4、图文教程
除了这些以外，我们还有 12+ 的图文教程，让我们的课程更加的丰富，例如 CSS 的发展史与 CSS 模块划分、移动端概念及 UI 设计图、书写模式与逻辑属性以及 CSS 方法论及样式规范等等。
5、测试题与练习题
除了这些以外我们还安排了大量的测试题与练习题，能够让大家学完知识点之后来对知识点进行巩固。除了有一些理论性的测试题以外，我们更多的是这种偏实战的练习题，这些偏实战的练习题都会配有相应的参考答案，可以让大家更好的去把我们的内容进行吸收。
6、综合案例（7 个）
课程还安排了 7 个综合案例，像 swiper 轮播图、知乎导航等等。
7、实战项目：Ant Design Pro 管理系统
除了这些综合案例以外，还有就是我们前面介绍的一个实战项目 Ant Design Pro 管理系统。这里我们会带着大家搭建我们的一个框架，以及像文件的划分，包括像命名等等这样的一些方法论的操作，还有我们的具体的一个应用的开发。当然，一个复杂的页面，它除了有布局以外，更多的是要怎么样跟我们的交互进行配合，如何来编写更加值得我们去推荐的一种选择器的方式，来更好的配合我们后续的一些交互的实现。这些都在本章当中给大家进行一个详细的讲解。
4）案例介绍
下面我们稍微给大家看一下我们做好的案例，这里点开我们的浏览器可以看一下。
像这种就是移动端非常常见的一种轮播图的方式。
然后像我们这种知乎导航
我们还有比较复杂的这种不规则的布局
还有我们这种列自适应的布局方式，这个列是可以自适应的到底是如何做到的？
包括我们移动端网易的首页搭建
还有我们移动端 B 站的一个首页的搭建
然后我们的响应式布局当中要给大家讲一下 ghost 博客的一个实现，这是具备响应式的，可以让它在不同的分辨率下非常好的能够展现出来
这是它在移动端的一个表现形态
好了，除了这些以外，我们最后的一个综合案例就是我们的管理系统
管理系统的侧边栏也会加上一些简单的交互，然后我们这边可以选择不同的一些交互行为，包括它默认的是固定的这个菜单，我们现在是可以给它进行非固定的一个选择。当非固定的时候它会跟着我们页面发生变化，包括这边一个可以折叠的菜单，我们可以随意切换回来。
还有对于这个侧边栏和上边顶部导航进行一个显示隐藏（点击图标的隐藏与显示）。
我们再来看一下它的响应式，当我们分辨率变小的时候，它也可以做一些响应式的变化。
比如说这是我们切换到移动端的一个样子。大家可以看到在移动端的时候，我们也可以点击菜单的时候，对它进行一个显示隐藏以及我们这边可以换各种不同的主题色，前面也演示过了。这些都是同步的把它们完成的（只写一份代码），这些就是我们具体的一个实战开发的一些代码。
5）本门课比较适合哪些同学来进行学习？
- 首先需要大量布局工作的前端或后端开发同学
- 前端新手同学也是非常适合作为我们的一个入门课程进行学习的。因为咱们前端的入门同学最好是先学习 HTML+CSS，有了这些基础之后再学习 JS 或者是一些前端框架会比较好一些
- 最后这门课也比较适合一些刚毕业找工作的学生或想转行的人群，这也是非常好的一个入门咱们前端的这样的一门课程。
好了，咱们这门课程就给大家做了一个简单介绍。最后跟着老师的脚步一起来学习这门课程吧！
★常见布局展示及技术分析
本小节将对常见的布局做一个展示，并且对所采用的技术做一个简单的分析。
首先我们把设备大体可以分为大设备以及小设备。
大设备我们统称可以叫做在 PC 端进行展示，而小设备我们一般可以统称为在移动端进行展示。
1）PC 端
下面我们先来看一下在 PC 端的一个网页的形态，基本上以两种为主，一种是我们这种常见的是以板心居中的方式进行展示，我们可以看到它会固定一个宽度，然后居中显示在中间，而我们这样的网站是比较多的。
还有一种就是这样适应整个浏览器的，包括我们左边以及右边这样在两列中比较多一点，而其中我们的这个有一列可能是自适应浏览器的一个大小的，基本上 PC 端我们主要以这两种展示为主。
下面我们就通过浏览器来具体看一下，比如说这是京东的一个电商网站，大家可以看到它基本上以这种版心居中的方式来进行展示的。而所采用的布局方案大体上就是围绕着这种像一维一行布局以及一维一列布局。除了这种一行一列的布局以外，还有就是像这种行列组合的方式，就形成这种多行多列的方式
这些都是常见的，我们用这个弹性以及我们的网格就可以来实现的布局。
而像稍微复杂一点的，比如说像这一块，它这个轮播它会占的一个尺寸大小，跟其他的行和列不太一样，这个地方布局就比较复杂了，其实也可以用我们的这个网格来布局，也就是说网格是可以做这个合并单元格的。所以说基本上像这种板心的这个 PC 端的网站，基本上我们用这个弹性网格就非常容易能够做出来了。
下面来看一下我们的这种能够自适应的这样的一个布局，其实也比较适合用弹性和网格，因为用弹性的话它本身就可以让我们的这个大小跟分辨率进行一个变化。同样我们这一块多行多列的展示，大家也可以发现它也是一个不规则的。像这种不规则的，其实也非常适合用我们的网格来实现。所以说常规的网站基本上就是由这个一行一列或者是多行多列来进行完成的。那像一行一列的这种的就非常适合我们的弹性布局，而像这种多行多列的就非常适合用网格来进行布局。
分析完 PC 端之后，我们再来看一下这个移动端。
2）移动端
在移动端当中我们可以看到它比 PC 端的布局更加的简单，也包含像这种一行，包括像这种多行多列的排列方式。而我们的这种以文字类的为主的这个页面则更加的简单
好了。那移动端比较难点在哪呢？其实是移动端的适配原则，我们移动端基本上没有板心这么一说，大部分网站都是这种自适应浏览器分辨率的，也就是说浏览器分辨率多大它就会跟着多大。所以说大家可以看到在不同的这个设备下，它的分辨率是不同的。那我如何能够让在不同设备下的网页看起来都一样呢？或者是你要想办法让它能够自适应浏览器呢？这是我们移动端要做的事情。而我们如果说假设要自适应浏览器的话，其实是有可能会进行拉伸的，这样的话图形就会做出一些变形或者是间距会变大。
那还有一种比较好的方式，就像我截图上做的，这采用什么呢？采用我们的这个等比的，也就是说不同的分辨率，我们其实看起来的效果是相同的。只不过我们这个图片包括文字，它是等比进行缩放的，看起来更加的和谐，这是移动端做网页需要涉及到的一个概念。而这种等比的进行变化的这种需求，其实用我们的 rem 单位以及 vw 单位是非常容易做出来的。这在我们课程当中会有详细的讲解。
我们可以稍微的看一下我们这个移动端的页面。比如说这个爱奇艺，大家可以看到，在这个 iPhone 678 下，它是 375 的，然后调到 iPhone 678Plus，我们同样把这个尺寸（搞到100%）给它调一下，你可以看到它的大小其实是等比变大的。
除了 PC 端移动端以外，我们可能还希望我们的一套代码能适应我们的移动端到 PC 端的这样一个过渡。大家可以看到像这样两张截图，就一套代码实现了一个网页，然后在移动端的展示以及在 PC 端的展示它其实都能展示得非常好，只不过是做了一些位置的调整，而像这样的一个操作，我们一般叫做响应式布局，响应式布局主要利用的就是 CSS 当中的这个@media，这也在咱们的课程当中有详细的介绍。
页面的布局是发生了变化的
这里给大家稍微看一下我们的这个具备响应式的这样一个网页，这是在 PC 端，我们通过分辨率的缩小，让它慢慢的适配小设备。在小设备下，大家可以发现它的这个相关的页面就会发生一些变化，而它的这个代码是不变的，这就是响应式布局，这用同一套代码在任何设备下都展示得非常好。这个在我们课程当中也会给大家进行详细的讲解，并且也会带着大家实现比较完整的一个案例。
jQuery -> 有三种变化
这以上其实就是主要的布局模式了，当然还有一些网站它是比较个性化的，会做一些像这种比较个性的一个布局。而这种比较个性的布局需求量是比较少的，当然，它实现的也不是像我们想象的那么难，主要就是它需要配合一些我们可能除了 CSS 和 HTML 技术之外的一些技术，比如说我们的一些像这个 JS 控制或者是我们的这个 Canvas、SVG，也就是以一些关于图形相关的一些技术可能需要配合一些功能才能实现，或者是 CSS 当中比较复杂的一些应用，然后把它们穿插在一起才能实现这种稍微复杂的一些网页。比如看到这样的一个网页：
像这样这种不规则的排列，以及它这个有一些动画效果，包括我们这些鼠标感知，这些其实光用纯 CSS 是很难做到的。
不过这些东西我们也会给大家做一些简单的课外的扩展来了解，这也是没有任何问题的。
好了，这基本上就把我们常见的一个网页给大家做了一个简单的分析，并且相关的技术也做了一些了解。那我们后面的章节当中将给大家具体的来进行讲解这些网页都是如何实现的以及更好的一个使用方式是怎样的？