为什么学习CSS

学习CSS有很多好处。它能简化HTML相关标签，使网页体积变小，下载速度更快；解决内容与表现分离的问题；更好地维护网页，提高工作效率。此外，CSS在Web开发领域中也扮演着重要的角色，是成为一名前端工程师必备的技能之一。

CSS简要发展历史

CSS1：解决网页排版布局和装饰问题，第一个有“层叠（cascading）”概念的语言。

CSS2：表现和内容分离。

CSS2.1：对CSS2的修正、扩展，代替CSS2。

CSS3：规范模块化发展，样式丰富、酷炫，提高网站的可维护性以及性能速度。

基础知识

Casading规则、选择器、继承、值和单位、盒模型

层叠、优先级

1.样式表来源

2.选择器优先级

3.源码位置

继承

大部分具有继承特性的属性跟文本相关： color、font、font-family、font-size、font-weight、font-variant、font- style、line-height、letter-spacing、text-align、text-indent、text- transform、white-spaceL以及word-spacing

还有少部分列表、表格的属性

可以使用inherit关键字显式指定一个属性值从其父元素继承

CSS的值和单位

单位

绝对长度：px,pt,cm,in.…

长度 相对长度：em,rem,ex,rex.,w,vh,vmin,vmax.…

角度：deg,grad,turm,rad

时间：s,ms

分辨率：dpi,dpcm,dppx

值

文字类：比如像initial这种关键字，颜色、位置等等

数值类：比如z-index:1这种数值，或者带有单位的数值、百分比等

函数生成：比如calc0,min0,max0等

盒模型

控制盒子类型 display:block、inline、inline-block、flex、.

控制盒子大小&计算方式 width,height... box-sizing:content-box,border-box

控制盒中内容流 overflow:auto、scroll、hidden、.089

控制定位 position:static、relative、absolute、fixed、sticky

是否可见 visibility:visible、hidden、..

布局

常规流

略

块级格式化上下文(block formatting context).

略

外边距塌陷

略

内联级格式化上下文

略

弹性盒子布局

略

网格布局

略

定位

略

层叠上下文(The Stacking Context)

变形、过渡、动画

transform变形

transform变形3D

transform过渡

transform动画

总结

这节课学习了CSS的一些基础知识，包括CSS的发展历史、基础知识、布局、变形、过渡和动画等等。其中，CSS是一种用于描述网页样式的语言，它可以使网页更加美观、易于维护。CSS有一个“层叠”的概念，可以让你在不同的样式之间进行选择。CSS还有很多其他的特性，比如继承、盒模型、布局等等。