深入理解css

为什么学习css

css发展史

在2019年的今天，我们能在网上看到炫酷的动画加载，精彩绝伦的交互效果，以及从 PC 端到移动端的响应式交互，大家觉得习以为常。可你不知道的是，在 20 多年前，网页仅仅提供了文档展示能力，没有装饰的它就像一张黑白报纸那样简陋。你是否会问：网页是如何变成像今天这样精美的？这就归功于 CSS 了。 20 世纪 90 年代蒂姆·伯纳斯·李（Tim Berners-Lee）发明万维网，创造 HTML 超文本标记语言。此后网页样式便以各种形式存在，不同的浏览器有自己的样式语言来控制页面的效果，因为最原始的 Web 版本中根本没有提供一种网页装饰的方法。在HTML迅猛发展的 90 年代，不同的浏览器根据自身的 HTML 语法结构来支持实现不同的样式语言。在最初的 HTML 版本中，由于只含有很少的显示属性，所以用户可以自己决定显示页面的方式。但随着 HTML 的发展，HTML 增加了很多功能，代码也越来越臃肿，HTML 就变得越来越乱。网页也失去了语义化，维护代码很艰难，因为代码很混乱：因此诞生了css

那么为什么要学习css呢？

CSS 在 Web 开发领域有着举足轻重的地位，是成为一名前端工程师必备的技能之一，下面列举了一些学习 CSS 的优势：简单易学：CSS 很容易学习和理解，并且对 HTML 文档有着强大的控制能力，所以我们通常使用 CSS 来设置 HTML 文档的样式；

css特点

1.减少网页的体积
2.便于页面风格的统一
3.便于页面的修改

关于css

css基础知识

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

css的值和单位

****CSS 属性的值有多种，可以是数值、字符串、关键词或函数；同时 CSS 的属性的值可以带单位也可以不带单位。. 而且 CSS 的值并不是一尘不变的，不同的属性对应的值都会略有不同，比如： width 属性，它的值可以是一个百分比的值，也可以是一个带有数值和单位； color 的值可以是一个关键词，也可以是一个函数值； font-size 可以是百分比、关键词，带有单位的数值； line-height 可以只是一个数值，可以是百分比值，还可以是带有单位的数值等。. 众多属性不一一列举。.

常规流布局

常规流布局：核心思想

外部显示类型 outer display type 它决定了盒子本身如何参与流（flow）式布局 block : 在流布局中时，该元素将生成一个块级盒（block-level box) inline : 在流布局中时，该元素将生成一个行内级盒（inline-level box)
内部显示类型 inner display type 它定义（如果它是一个非替换元素）生成的格式化上下文的类型，指示如何布局它的后代。（替换元素的内部显示不在CSS范围内）即指定元素的内部显示类型，定义其内容的格式上下文的类型。 flow 元素内部使用流式布局 ...

-css层叠上下文

我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。重要的是，其子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。

过渡

SS 过渡提供了一种在更改 CSS 属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS 过渡后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。通常将两个状态之间的过渡称为隐式过渡，因为开始与结束之间的状态由浏览器决定。CSS 过渡可以决定哪些属性发生动画效果 (明确地列出这些属性)，何时开始 (设置 delay），持续多久 (设置 duration) 以及如何动画 (定义timing function，比如匀速地或先快后慢)。

响应式推荐遵循的原则

创建响应式设计令人胆战心惊：它由许多移动的部分构成，而且经常不像你期望中一样排列；你在设计的时候还要惦记着所有不同的视口（viewports）。通过遵守这些基本原则，你可以创建出更加健壮和可预测的响应式设计。

原则 #1：保持简单的视口

原则 #2：移动优先

原则 #3：根据内容设计

原则 #4：在媒体查询中使用 em

原则 #5：最小或最大宽度，只选一个

原则 #6：避免固定的尺寸

原则 #7：使用现代布局技术

原则 #8：为字体渲染的不同预留空间

原则 #9：在浏览器内决定

原则 #10：尝试 Polypane

css像素

CSS 像素——在 CSS 中以 px 为后缀——是一个长度单位，大致相当于一个肉眼可以轻松看到的小点的长宽，否则就是尽可能小的长度。根据定义，一个 CSS 像素应当看起来是在距离观察者一臂之遥且像素密度为 96 DPI 的屏幕中的一个物理像素。当然，这一定义，由于一些术语“轻松看到”和“一臂之遥”不精确且因人而异，导致其留下很多解释空间。比如，当一个用户坐在台式机前，屏幕和用户眼睛之间的距离实际上要比手机屏幕和眼睛的距离远。因此实际应用中，当使用单位 px 时，让 96px 的距离等同屏幕上的大约 1 英寸就合格了，无论屏幕的实际像素密度是多少。换句话说，如果一个手机屏幕的像素密度是 266 DPI，且屏幕上一个元素的宽度是 96px，那么这个元素的实际宽度会是 266 设备像素（ device pixels ）。

css后处理器

CSS 后处理器 CSS 后处理器是对 CSS 进行处理，并最终生成 CSS 的预处理器，它属于广义上的 CSS 预处理器比如最近比较火的 Autoprefixer，可以对css自动处理兼容性问题示例以 Autoprefixer 为例：.container { display: flex; } .item { flex: 1; }

课程总结（心得体会）

CSS主要是用来对页面的样式进行设计。我们可以通过运用CSS技术来设计出我们想要的页面效果，并且CSS是与HTML内容是分开的，这极大地方便了我们阅读、修改程序，也使得CSS具有一定的重复使用的特性，只需要在html文件中引入CSS文件即可，这对设计者来说十分方便的。除此以外，CSS比较容易学习但是如果想要使用的非常自然、熟悉的话是比较困难的，需要不断的运用、尝试才能设计出最具有自我特色的html页面。因此，学习CSS不仅要学它的使用，更要学习如何合理的运用到你想要表达的页面当中去，打造一个属于你自我特色的页面，这种实践内容才是我们学习的目的，才能促进我们不断进步。

[深入理解css | 青训营笔记]