女王控的博客

CSS世界概述与术语

概述

流的概念

  • CSS 世界的诞生就是为图文信息展示服务的。
  • 流影响整个 CSS 世界。
  • table 有着自己的世界。

CSS3

  1. 布局更为丰富

  2. 移动端的崛起催生了 CSS 媒体查询以及响应式特性,如图片元素的 srcset 属性、 CSS 的 object-fit 属性。

  3. 弹性盒子布局。

  4. 格栅布局。

  5. 视觉表现长足进步

  6. 圆角、阴影和渐变。

  7. transform 变换。

  8. filter 滤镜和混合模式。

  9. animation 动画。

专业术语

css 复制代码
.class {
  height: 99px;
  color: transparent;
}

属性

height、color 代表属性

99px 代表值

关键字

transparent,还有常见的 solid、inherit(泛关键字)

变量

currentColor

长度单位

px、em、s、ms,注意 2% 中的 % 不是长度单位,是一个完整的值。

细分下来,长度单位分为相对长度单位与绝对长度单位。

相对长度单位

  • 相对字体长度单位,如 em、ex,还有 CSS3 中的 rem 和 ch(字符 0 的宽度)。
  • 相对视区长度单位,如 vh、vw、vmin 和 vmax。

绝对长度单位

px,还有 pt、cm、mm、pc。

功能符

值以函数的形式指定,表示颜色(rgb、hsls)、背景图片地址(url)、元素属性值、计算(calc)和过渡效果等。

属性值

属性冒号后面的所有内容统一称为属性值。

声明

属性名+属性值

声明块

花括号包裹的一系列声明

规则或规则集

选择器+声明块

选择器

选择器是用来瞄准目标元素的东西。

  • 类选择器
  • ID 选择器
  • 属性选择器
  • 伪类选择器
  • 伪元素选择器

关系选择器

  • 后代选择器,空格连接,所有后代
  • 相邻后代选择器,>连接,直接后代
  • 兄弟选择器,~连接,当前元素后的兄弟元素
  • 相邻兄弟选择器,+连接,当前元素相邻的兄弟元素

@规则

@media、@font-face、@page、@support

未定义行为

规范顾及不到的细致末节的实现

评论

阅读上一篇

CSS世界流、元素与基本尺寸
2018-05-22 12:21:01

阅读下一篇

React虚拟Dom算法
2018-05-10 11:26:35
0%