理解CSS | 青训营笔记

小婷呀
96 阅读11分钟

深入理解CSS

CSS简要发展历史

  1. HTML提出

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

  3. CSS2
    表现和内容分离

  4. CSS2.1
    对CSS2的修正、扩展
    代替CSS2

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

1.基础知识

1.1层叠、优先级


有多个选择器或一个选择器对某个或某几个标签中的多条样式进行选择，如果多个选择器都赋给某个或某几个标签相同属性，样式的作用范围发生了重叠。
层叠三大规则:
1.样式表的来源 2.选择器的优先级 3.源码顺序

样式表来源：

作者样式表（你自己写的样式）>用户样式表>用户代理样式表（浏览器默认的样式）
注意：在CSS中，!important具有最高优先级，并且可以写在任意一条有冲突样式的后面。

1.1.1选择器


基础迭择器

#id--ID选择器。Tagname--类型选择器或者标签选择器。

.class--类选择器。★--通用选择器。该选择器匹配所有元素

组合器

子组合器(>) --匹配的目标元素是其他元素的直接后代。如: .parent > .child。

相邻兄弟组合器(+) --匹配的目标元素紧跟在其他元素后面。如: p +h2。

通用兄弟组合器(-) --匹配所有跟随在指定元素之后的兄弟元素， 如:li.active~li。
复合选择器 多个基础选择器可以连起来使用，如: h1 page-header。

属性选择器
通过约束属性值，div[data-title="aaa"]

伪类选择器
送中处于某个特定状态或相对于其父级或兄弟元素的位置的元素。如first-child, &nbsp:hover

伪元素选择器
匹配在文档中没有直接对应HTML元素的特定部分，或插入内容

逻辑选择器
较新的选择器:is() :has()  :where() :not()

1.1.2 选择器优先级


内联>id>class=attribute=pseudo-class>type=pseudo-element
注意：
（1）CSS选择器都有权重值，权重值越大优先级越高。
内联样式表的权重值最高，值为1000。
id选择器的权重值为100。
class选择器的权值为10。
类型（元素）选择器的优先级为1。
通配符选择器的优先级为0。
（2）当权值相等时，后定义的样式表要优于先定义的样式表。
（3）在同一组属性设置中标有“!important"规则的优先级最大。

1.1.3 源码顺序


1.对于@import的样式，根据@import的顺序

2.对于link和style标签的样式，根据在document中的顺序决定

1.2继承

image.png

可继承的属性
字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
元素可见性：visibility
表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
列表布局属性：list-style-type、list-style-image、list-style-position、list-style
生成内容属性：quotes
光标属性：cursor
页面样式属性：page、page-break-inside、windows、orphans
声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

1.3 CSS的值和单位

单位
长度:
1.绝对长度：px,pt,cm,in...
2.相对长度:em,rem,rex...vw,vh
角度：deg,grad,turn,rad...
时间：s,ms
分辨率：dpi,dpcm,dppx

值
文字类：比如像initiial这种关键字，颜色，位置等等
数值类:比如z-index:1这种数值，或者带有单位的数值，百分比等
函数生成比如calc(),min(),max()：

1.4盒模型

image.png

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。
margin-top：上边距
margin-buttom：下边距
margin-left：左边距
margin-right：右边距

padding-top：上部填充
padding-bottom：下部填充
padding-left：左部填充
padding-right：右部填充

border-top：上边界
border-bottom：下边界
border-left：左边界
border-right：右边界

注意：margin、border、padding中只有margin可以为负值

2.布局和定位

CSS3之前的常用布局

Normal Flow常规流
默认的布局方式
有块级格式化上下文和内联
格式化上下文
Float浮动流
用float属性控制
脱流，做橫向布局

Positioning 定位流
用position属性控制
fixed和absolute脱离文档流
可以自由定位、覆盖等

CSS3之后的新增布局
Flex弹性盒子布局
一维空间布局

Grid网格布局
二维空间布局

Muticol多列布局
文本、内容的多列展示

2.1常规流布局

盒子

  1. 块级盒子
  2. 内联级盒子

格式化上下文的布局规范为：

在一个块格式区域中，盒子会从包含块的顶部开始，按序垂直排列。同级盒子间的垂直距离会由"margin"属性决定。 相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。
在一个块格式区域中，每个盒子的左外边缘会与包含块左边缘重合(如果是从右到左的排版顺序，则盒子的右外边缘与包含块右边缘重合)。

消除外边距塌陷的方法:

  • 在两个相邻的上下边距之间增加border、padding或者内联元素，使之不相邻;
  • 在父子元素重叠时，除了上述方法，还可以设置父元素为BFC，使得父子不在同级BFC中

2.2弹性盒子布局

Flexible Box Layout是为了提供更加高效灵活的布局方式，在即便是宽高未知的情况下，也能排列和分割一个盒子内部的布局。而且在不同布局方向(横向/纵向) 的调整更为灵活。

父项常见属性

  1. flex-direction：设置主轴的方向
  2. justify-content：设置主轴上的子元素排列方式
  3. flex-wrap：设置子元素是否换行
  4. align-items：设置侧轴上的子元素排列方式（单行）
  5. align-content：设置侧轴上的子元素的排列方式（多行）
  6. flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

子项常见属性
1.flex子项目占的份数
2.align-self控制子项自己在侧轴的排列方式
3.order属性定义子项的排序顺序（前后顺序）

2.3网格布局

2017年推出的Grid布局可以定义由行和列組成的二維布局，然后将元素放置到网格中.元素可以只占其中一个单元格.也可以占据多行或多列。

Grid和Flex布局的使用策略
1.大面积或整体布局推荐使用Grid布局
2小面积或组件中，或Grid Item中可以使用Flex做灵活布局

2.4定位Position

当 position 属性的取值非 static 的时候，可以使用 top, right, bottom, left 对其进行定位。
relative
元素相对于自己原来在文档流中 的位置进行定位，但是原来文档 流的空间还在。

absolute
元素被移出正常文档流，且没有 预留空间，相对于最近的非 static 定位祖先元素的进行定位。

fixed
元素被移出正常文档流，且没有 预留空间，相对于屏幕视口进行 定位，屏幕滚动也不会改变位置

sticky
元素相对它的最近滚动祖先（祖先的 overflow 是 scroll/hidden/auto ）的视口 (scrollport) 定位

3.层叠上下文

层叠上下文是对 HTML 元素的三维构想，将元素沿着垂直屏幕的虚构的 Z 轴排开

形成新的层叠上下文的条件（任一即可）： position: relative 或 absolute; 并且 z-index 不是 auto position: fixed 或 sticky flex 或 grid 的子元素；并且 z-index 不是 auto opacity 的值小于 1 transform 的值不为 none will-change 的值不为 通用值

层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序：

编写 z-index 的建议：
1. 使用 css 变量 或者 预处理语言的变量，管理 z-index 的值
2. 将预设间隔设置 10 或 100 ，方便后续的插入

4.变形、过渡、动画

transform 变形

2D 相关属性

transform : translate( 移动 ) 、 rotate( 旋转 ) 、 scale( 放缩 ) 、 matrix( 变形矩阵 ) 等
transform-origin : right top 、 center 等 表示变形时依据的原点

3D 相关属性：

transform : translate3d 、 rotate3d 、 scale3d 、 matrix3d 等
transform-origin : right top 、 50px 30px 等 表示变形时依据的原点
transform-style : flat 或 preserve-3d 看子元素的 3d 表现
perspective ：观看点距离 z=0 这个平面的距离 , 可以在 transform 中用 perspective() 使用作用为当前元素， 也可以直接使用，给后代元素一个统一值
perspective-origin ：观看者的位置，如 top 、 bottom 等
backface-visibility ：元素正面只有朝向观察者的时候可见

transition 过渡

通过指定某些元素属性从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态

animation 动画

animation- 相关属性 用来为元素添加动画*

animation-name ：定义好的关键帧的名字
animation-duration ：动画时长
animation-timing-function ：动画节奏
animation-delay ：延时开始的时间
animation-iteration-count ：执行次数
animation-direction ：是否反向或交替
animation- fi ll-mode ：动画执行前后的样式采用
animation-play-state ：动画运行状态

5.响应式设计

响应式设计原则

优先选用流式布局，如百分比、 flex 、 grid 等
使用响应式图片，匹配尺寸，节省带宽
使用媒体查询为不同的设备类型做适配
给移动端设备设置简单、统一的视口
使用相对长度， em 、 rem 、 vw 做为长度度量

媒体查询

使用媒体查询的一些 Tips

  1. 媒体查询同样遵循 cascading 层叠覆盖原则， min- 和 max- 选择一个
  2. 由于设备的多样化逐渐不可枚举，断点的选择尽量根据内容选
  3. 由于断点的增加会增加样式处理的复杂度，所以尽量减少断点

相对长度

em

  • 在非font-size 属性中使用是相对于自身的字体大小
  • 在 font-size 上使用是相对于父元素的字体大小 ( 一般不在这个属性上使用，因为 font-size 的继承特性，多重嵌套后大小会不断放大或缩小，产生混乱 )

rem： 根元素的字体大小。 通过伪类 :root 或者 html 选择器选定。由于是根元素的 font-size ，所以不会像 em 那样出现多重嵌套问题，减 少了复杂性，同时作为一个相对单位，可以进行适配放缩，可以用来做响应式布局。

vw ： 视窗宽度的 1% 。 vh ： 视窗高度的 1% 。同样， vw 也可以作为响应式布局的基准单位。由于 vw 天然是视口宽度的 1% ，所以不需要 js 动态配置。

6.CSS生态相关

语言增强：预处理器、后处理器

语言增强 — — CSS预处理器 image.png 语言增强 — — CSS预处理器

image.png

工程架构：CSS 模块化、 CSS-In-Js、 Atomic CSS

工程架构 — — CSS 模块化

CSS Module 就是为了解决全局污染问题出现的方案， 解决 CSS 全局污染，本质上是保证样式集合对应的选择器是唯一的， 从这个角度看，主流的单纯针对于防止全局污染的方案大概有： BEM 命名规范 vue-loader 的 scoped 方案 CSS Modules

工程架构 — —CSS-in-JS

css-in-js ：将应用的 CSS 样式写在 JavaScript 文件里面，利用 js 动态生成 css

工程架构 — —原子化 CSS

原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class ，并以视觉效果进行命名。
现有的库 or 框架： Tailwind 、 Windicss 、 Tachyons unocss ……

课程总结

本期我们从知识规范和实践生态两方面进行学习，知识方面主要学习基础，布局，Stacking Context，变形，过渡，动画。实践生态方面分为响应式设计，语言增强，工程构架。学完之后，我们应该对CSS有更多了解，当学到了盒模型的时候，对于大多数网页布局方式有了一定的认知。通过这期视频，我知道了CSS有很多样式可以达到各种需求，用来美化页面。

avatar
文章
阅读
粉丝