理解 CSS | 青训营笔记

皮卡coder
101 阅读5分钟

理解 CSS | 青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第 2 天

详细知识点介绍：

CSS 是什么？

image.png

CSS 的几部分组成

image.png

  • 用选择器（Selector）来指明哪个元素需要设置的样式
  • 里面的每一条语句都是一个声明（Declaration），用来描述样式的
  • 每一个声明都是由属性（Property）和属性值（Value）用英文冒号分隔组成的

在页面中使用 CSS

image.png

  • 外链样式将写好的 style.css 文件通过 link 标签导入使用
  • 嵌入样式在固定位置的 style 标签内书写，可直接在 html 内容区域添加相对应的选择器直接使用
  • 内联样式直接在元素内部，通过 style 属性直接书写，这个权重是很高的，会覆盖 style 标签里写的无 !important 属性值的属性

CSS 是如何工作的

image.png

  • 将从服务器拿过来的 index.html 进行解析
  • 解析到外链 CSS 文件，CSS 文件将去异步下载，index.html 将继续解析
  • index.html 解析完之后创建 DOM 树
  • 然后将解析好的 CSS 样式添加到 DOM 节点
  • 然后进行展示界面（在展示界面之前应该还有布局和绘制两个阶段，分别对应的是回流和重绘）

Selector 选择器

image.png

  • 标签选择器（p、h1-h6）
  • id选择器（#logo）
  • 类选择器（.done）
  • 属性选择器（[disabled]）
    • 属性值（[type="password"]）
    • 属性值开头（[href^="#"]）
    • 属性值结尾（[href$=".jpg"]）

伪类（pseudo-classes）

image.png

状态伪类

  • a:link：默认状态下的样式
  • a:visited：访问过的样式
  • a:hover：浮于上方的样式
  • a:active：激活时的样式
  • :focus：聚焦

结构性味蕾

  • li:first-child：第一个元素
  • li:last-child：最后一个元素
  • li:nth-child(n)：第n个元素

组合（Combinators）

image.png

选择器组

image.png

颜色 - RGB

  • 十六进制形式（#ff000简写为#f00、#ffffff简写为#fff）
  • rgb()函数形式（rgb(255, 0, 0)，取0-255的数字）

颜色 - HSL

  • Hue (色相，取值范围是0 - 360)
  • Saturation（饱和度，越高越鲜艳，取值范围0 - 100%）
  • Lightness（亮度，越高颜色越亮，取值范围0 - 100%）
  • hsl(211， 66%, 55%)

alpha 透明度

image.png

不管是十六进制、rgba还是hsla都是将这个属性值放在最后一位，十六进制取值为00 - ff，剩下那两个都是0 - 1，数值越高越不透明，所以又叫做不透明度

字体 font-family

image.png

在写字体的时候应该先写英文的，再写中文的，因为如果先写中文，后面的英文字体将不再起作用，英文字体中一般没有中文字体，而中文字体中有英文字体，所以不会向下寻找字体了

使用 Web Fonts

image.png

使用Web Fonts因为需要从网络上先下载字体所以会影响性能，英文字体可以直接用，中文字体需要进行裁切，因为中文字体的体积太大了

选择器的特异度（Specificity）

image.png

也就是我们常说的权重

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值，一般关于文字相关的属性都是可以继承的，关于和模型的属性都是不可以继承的

显示继承

image.png

将所有的属性设置成为从父亲去继承，将原本不能继承的属性可以继承，然后还可以直接层叠掉，因为继承过来的属性的权重是非常低的

初始值

image.png

CSS 求值过程

image.png

布局（Layout）是什么？

  • 确定内容的大小和位置的算法
  • 根据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

  • 常规流（文档流）
    • 行级
    • 块级
    • 表格布局
    • FlexBox
    • Grid 布局
  • 浮动
  • 定位

盒子模型

content-box

image.png

border-box

image.png

格式化上下文（Formatting Context）

IFC

  • Inline Formatting Context（IFC）
  • 只包含行级盒子的容器会创建一个 IFC
  • IFC 内的排版规则
    • 盒子在一行水平摆放
    • 一行放不下时，换行显示
    • text-align 决定一行内盒子的水平对齐
    • vertical-align 决定一个盒子在行内的垂直对齐
    • 避开浮动（float）元素

BFC

  • Block Formatting Context（BFC）
  • 某些容器会创建一个BFC
    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow 值不是 visible 的块盒
    • display: flow-root
  • BFC 内的排版规则
    • 盒子从上到下摆放
    • 垂直 margin 合并
    • BFC 内盒子的 margin 不会与外面的合并
    • BFC 不会和浮动元素重叠

Flex Box 是什么？

  • 一种新的排版上下文
  • 它可以控制子级盒子的：
    • 摆放的流向
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许拆行

主轴与侧轴

image.png

justify-content

image.png

align-items

image.png

Flexibility

  • 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
  • flex-grow 有剩余空间时的伸展能力
  • flex-shrink 容器空间不足时收缩的能力
  • flex-basis 没有伸展或收缩时的基础长度
  • flex 的简写属性：

image.png

Grid 布局？

image.png

display: grid

  • display: grid 是元素生成一个块级的 Grid 容器
  • 使用 grid-template 相关属性将容器划分为网格
  • 设置每一个子项占哪些行/列

image.png

  • 网格划分

image.png

  • grid line 网格线

image.png

（1）例子一：

image.png

（1）例子二：

image.png

position 属性

  • static 默认值，非定位元素
  • relative 相对自身原本位置偏移，不脱离文档流
  • absolute 绝对定位，相对非 static 祖先元素定位
  • fixed 相对于视口绝对定位

position: relative

  • 在常规流里面布局
  • 相对于自己本应该在的位置进行偏移
  • 使用 top、left、bottom、right 设置偏移长度
  • 流内其他元素当它没有偏移一样布局

image.png

position: absolute

  • 脱离常规流
  • 相对于最近的非 static 祖先定位
  • 不会对流内元素布局造成影响

image.png

个人总结

今天是本次青训营学习的第二天，今天的课程时长比昨天多了好多，加上记笔记的时间差不多有半天的时间了。也学到了很多，虽然以前也学过一些，但是又学了一遍，对很多知识又有了新的认知。老师讲的也很细，虽然只有三个小时但是CSS的重要知识点基本全都讲过了。听的也很明白。

avatar
文章
阅读
粉丝