了解 CSS | 青年营注意事项

最编程 2024-03-23 19:32:03

...

家人们，我来交作业啦！以下武泽旭老师主讲的理解 CSS课程的笔记。通过这个课程，可以了解的内容有：

01 基础知识
02 布局和定位
03 层叠上下文(The Stacking Context)
04 变形、过渡、动画
05 响应式设计
06 CSS生态相关

01 基础知识

CSS (层叠样式表)是种格式化网页的标准方式，用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。 CSS是层叠样式表(Cascading Style Sheets)的简称，也称之为CSS样式表或级联样式表。CSS是一种标记语言，用于设置HTML页面中的文本内容(字体、大小、对齐方式等)，图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。CSS最大价值：结构与样式相分离(由HTML专注去做结构呈现，样式交给CSS)

02 布局和定位

盒模型：页面中的所有元素都可以看成是一个盒子，例如文字，图片，导航，列表等，每个盒子都占据这一定的页面空间

布局：

实现网页的页面布局一般有三种方法:表格布局、框架布局、DIV+CSS页面布局。 1 表格布局优势：

（1）实现方式比较简单。

（2）各个元素可以位于表格独立的单元格中，相互影响较小

（3）对浏览器的兼容性较好。

表格布局的缺陷: （1）在某些浏览器下(例如IE),表格只有在全部下载完成后才可以显示，数据量比较大时会影响网页的浏览速度。（2）搜索引擎难以分析较复杂的表格，而且网页样式的改版也比较麻烦。（3）在多重表格嵌套的情况下，代码可读性较差，页面的下载速度也会受到影响。因此：一般不采用表格布局，除了规模较小的网站之外。

2 框架布局指利用框架对页面空间进行有效的划分，每个区域可以显示不同的网页内容，各个区域之间互不影响。

框架布局优点：

（1）网页更整洁、清晰，网页的下载速度较快。

框架布局缺点：

（1）框架用得较多，会影响网页的浏览速度。

（2）框架和浏览器的兼容性不好，保存比较麻烦，应用的范围有限

因此：一般也只应用于较小规模的网站。

3 对于规模较大、比较复杂的网站大多数采用DIV+CSS方式进行布局。DIV+CSS布局方式具有较为明显的优势:

（1）内容和表现相分离。

（2）对搜索引擎的支持更加友好。

（3）文件代码更加精简， 执行速度更快。

（4）易于维护。

03 层叠上下文(The Stacking Context)

层叠上下文：

层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。

每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素。

04 变形、过渡、动画

CSS中，过渡（transition）、变形（transform）、动画（animation）这三个属性有着类似的作用，他们各有优缺点。其中，我们可以设置过渡的参数为变形，过渡也可以用来完成只有开始状态和终点状态这两种状态的简单动画，并且需要事件触发，动画（animation）就可以完成更为复杂的动画。今天我们了解一下每一个的作用，以及他们的区别。