本文参考[^1]的提纲，进行知识的梳理与整理，更新中~

CSS引入方式⁍

外部样式表⁍

在<head>-<link>中引入样式表

1
<link rel="stylesheet" type="text/css" href="sheet1.css" media="all">
Points
  1. media属性是媒体描述符，可选，多个用逗号隔开，指明CSS样式针对的媒体类型
  2. 可以用多个link引入多个样式表。如果这下样式表都没有设定title，就是永久样式表，浏览器会合并样式，如果设定了title，浏览器会选择其中的一个，忽略其它的。[^2]
  3. 候选样式表：把rel属性设置为alternate stylesheet，title属性里指定样式表名称。用户可以在浏览器里选择对应的样式表（只要浏览器支持的话，如基于WebKit的浏览器就不支持选择候选样式表，比如chrome）[^2]

内部样式表⁍

将CSS放在HTML文件<head>-<style>标签中

内联样式⁍

存在于HTML元素的style属性之中。（注意要加分号！）

@import⁍

1
2
3
4
<style type="text/css">
@import 'styles2.css';
@import url(sheet2.css) projection,print;
</style>
  • 位置：放在style标签内的开头
  • 也可以在外部样式表里添加@import指令（而link本身就不能放在外部样式表里），使得一个外部样式表可以引用其他外部样式表[1]
  • 一个文档中可以有多个@import语句，每个样式表都会被用到，不存在候选一说。
  • 可以在后面指定媒体描述符

@规则

@import其实是@rules 规则里的一种，有规则名和值，其他的@rules规则例如@media，它允许使用 媒体查询 来应用CSS，仅当某些条件成立(例如，当屏幕分辨率高于某一数量，或屏幕宽度大于某一宽度时)。[2]

媒体类型：

  • all
  • print ：打印
  • screen：屏幕
  • projection：部分浏览器支持，幻灯片

媒体特性描述符：例如min-width等，详见[1:1] p30-32

CSS 权重⁍

选择符 特指度
ID 0100
类、属性选择、伪类 0010
元素/伪元素 0001
内联样式 1000
通用选择符 0000（不等于无）

可以相加， 注 : 通用选择器 (*)，组合符 (+, >, ~, ’ ')，和否定伪类 (:not) 不会影响优先级。

用CSS画三角形⁍

1
2
3
4
5
@media screen and (max-width: 300px``) {
  body {
    background-color:lightblue;
  }
}

元素水平垂直居中的方案

元素固定宽高

元素不固定宽高

元素种类的划分

盒子模型及其理解

margin塌陷及合并问题

浮动模型及清除浮动的方法

IFC与BFC

圣杯布局与双飞翼布局圣杯布局双飞翼布局

Flex 布局容器的属性项目的属性

px,em,rem的区别⁍

px：像素px是相对于显示器屏幕分辨率而言的。

em：相对于当前父元素的字体大小

rem：rem相对于根元素设置字体大小

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可

对于需要适配各种移动设备，使用rem

媒体查询⁍

⁍

HTML5 新特性

理解 BFC

Grid 布局

行内元素的间距怎么解决

伪类和伪元素有什么不同⁍

优先级，伪类和类一致是0010，伪元素跟元素一致是0001

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的，比如说，当用户悬停在指定的元素时，我们可以用:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素不是 DOM 中的真实元素，但是存在于最终的渲染树中，可以为其添加样式，比如说，我们可以通过：before来在一个元素前增加一些文本。

  1. 《CSS权威指南》 ↩︎ ↩︎

  2. 如何构建CSS - 学习 Web 开发 | MDN (mozilla.org) ↩︎