这是我参与「第五届青训营 」伴学笔记创作活动的第2天
简介
这节课带大家了解 CSS 的概念和工作原理、各种 CSS 选择器以及盒模型和常用的布局方式。
课前准备
可以提前学习下 CSS 中的一些基础概念
developer.mozilla.org/zh-CN/docs/…
课后阅读
W3C CSS 相关的规范
www.w3.org/TR/?tag=css CSS 相关文章
web.dev/learn/css/
css构成、方式、选择器
伪类
-
invalid表示任意内容未通过验证的表单元素，例如当:invalid元素未验证通过，可以设置一个样式，:valid验证通过设置另一个样式，这样，就摆脱了js实现了简单的表单
-
focus-within表示当该元素获得焦点或者他的后代元素获得焦点，常见的效果就是通过子元素获得了焦点改变父元素的样式。
-
rgb的兄弟hsl（H色佬）,也可以控制元素的颜色
-
浏览器可以渲染rgb里加alpha
CSS选择器的权重
CSS的使用
CSS用来定义元素的样式，例如设置字体的大小和颜色，内容的位置和长宽，还有给内容添加各种动画效果。 CSS用选择器来选中要控制的内容，常用的有标签选择器、ID选择器、类选择器、通配选择器和属性选择器。 并且选择器有优先级，优先级越高页面内容就会优先使用该选择器来控制页面内容。 优先级从高到低的排序为：ID选择器>类选择器>标签选择器>通配选择器>属性选择器。
- html 根元素
- float 浮动
- 绝对定位
- overflow 不为 visiable
- display 为表格布局或者弹性布局
BFC 主要的作用是：
- 清除浮动
- 防止同一个 BFC 容器中的相邻元素间的外边距重叠问题
BFC特性：
垂直方向的距离由margin决定，并且会发生margin折叠的问题，两个元素之间的margin只取最大的那个margin来使用，不会叠加，同时水平方向上的左margin会触及到容器的左margin（从左开始排） 。
flex布局
同时flexibility实现了盒子像弹簧那样伸缩，flex-grow有剩余空间时的伸展能力；flex-shrink容器空间不足时收缩的能力；flex-basis没有伸展或收缩时的基础长度。
grid布局
可以理解为二维的布局方式，首先划定二维上的基线网格，然后子元素设置占位格子。
总结
对我来说，这节课的内容较多，需要花时间总结理解。
