一:CSS工作原理
最初的网页是没有样式这个概念的，元素和属性都写在html文档中，后来才把属性提取出来做为样式，属性就这样分离成为独立的东西(也就是样式)，而浏览器在显示前会把HTML 和 CSS 转化成 DOM （文档对象模型），文档对象模型最后通过javaScrip的逻辑实现网页的交互和动态显示。
二:CSS基础概念
1.CSS：
叫层叠样式表。就是一种先选择HTML元素，然后设定选中元素CSS属性的机制。CSS选择符和要应用的样式构成了一条CSS规则。代码通过<style>标签包含到HTML里，也可以把CSS样式直接写在单独的文档中。浏览器会负责把<style>标签中的CSS样式应用给<body>标签中的HTML元素。
2.为文档添加样式的三种方法:
有三种方法可以把CSS添加到网页中，分别是写在元素标签里（也叫行内样式）、写在<style>标签
里（也叫嵌入样式）和写在单独的CSS样式表中（也叫链接样式）。
3.css术语：规则，选择器，声明块，属性和值
CSS规则：
由选择符和声明两部分组成，其中选择符用于指出规则所要选择的元素，声明则又由两部分组成：属性和值。属性指出要影响元素哪方面的样式，值就是属性的一个新状态。
CSS选择器： 在{}之前的部分就是“选择器”。
- 标签选择器(元素选择器): h1 {} 就是元素名
- 类别选择器: .title{} 类名前有一个点号（.）类选择符写在一起，没有空格
- ID选择器: #first {} 前面有一个 # 号
- 后代选择器:h1 em {} 规则左边的选择器一端包括两个或多个用空格分隔的选择器
- 子选择器: h1 > strong {} 大于号（子结合符）
- 伪类选择器: a:link{}冒号来定义 伪类就是css内置类css内部本身赋予它一些特性和功能
- 通用选择器: {}（通配符）给所有的标签加样式，ns|（匹配命名空间ns中的所有元素） | （匹配所有元素） |（匹配所有没有声明命名空间的元素）
- 群组选择器: h2, p { } 以,隔开
- 相邻同胞选择器: .d1 + .d2 {}相邻选择器用+连接 .d1 ~ .d3 {}兄弟选择器用~连接
- 属性选择器: a[href] {} a[href][title] {} 以[]套起来 根据元素的属性以及属性值来选择元素
- 伪元素选择器: p:first-line{} p::first-line{} 用于元素中的一些特殊的东西 CSS3 版本之前用冒号来定义 CSS3 版本之后用两个冒号（::）表示CSS3新增的伪元素
- 结构性伪类选择器: :root {} 针对HTML层次“结构”的伪类选择器
- UI元素状态伪类选择器: E:read-only input[type=”text”]:hover{} 只有当元素处于某种状态时才起作用
声明块：
由一对“{}”包住的内容
属性和值：
- 写在声明块中的名值对
- CSS属性值主要分以下三类：
1.文本值（所有CSS属性都有文本值）；
2.数字值（绝对值px等，相对值em和ex还有%）;
3.颜色值（颜色名，十六进制颜色， RGB颜色值，RGB百分比值， HSL 色相, 饱和度%, 亮度%，Alpha通道）;
4.有三种方法可以进行扩展。
第一种方法：多个声明包含在一条规则里。
第二种方法：多个选择符组合在一起。
第三种方法：多条规则应用给一个选择符。
5.一个元素的样式来自三个方面：
1.继承的样式。
2.浏览器定义的样式。
3.用户自定义样式。
6.一个元素样式会受到四个级别声明的影响：
1.继承的。根据元素在文档的结构和层级关系来确定它最终的样式
2.浏览器的。用户代理样式，大多数浏览器表现基本一致
3.自定义的。写到html文档的style标签中
4.行内样式或内联样式。写到元素的style属性中
7.样式应用优先级：
- 行内样式->用户自定义样式->浏览器定义的样式->继承的样式
- 样式选择器的优先级： “ICE”公式计算权重,I=ID,C=类，E=元素
- !important 是样式应用优先级提权
8.层叠规则：
- 层叠规则一：找到应用给每个元素和属性的所有声明。
- 层叠规则二：按照顺序和权重排序。浏览器依次检查各个来源（行内样式->用户自定义样式->浏览器定义的样式->继承的样式），并设定匹配的属性。空格!important分号（;）用于加重声明的权重。
- 层叠规则三：按特指度排序。计算特指度“ICE”公式计算三个值
1.选择符中有一个ID，就在I的位置上加1；
2.选择符中有一个类，就在C的位置上加1；
3.选择符中有一个元素（标签）名，就在E的位置上加1；
4.得到一个三位数。 - 层叠规则四：顺序决定权重。如果两条规则都影响某元素的同一个属性，而且它们的特指度也相同，则位
置最靠下（或后声明）的规则胜出。
9.盒模型：
就是浏览器为页面中的每个HTML元素生成的矩形盒子。可见的页面版式主要由三个属性控制：position属性、
display属性和float属性。其中，position属性控制页面上元素间的位置关系，display属性控制
元素是堆叠、并排，还是根本不在页面上出现，float属性提供控制的方式，以便把元素组成成多栏布
局。
10.元素盒子的属性:
- 边框（border）。可以设置边框的宽窄、样式和颜色。
- 内边距（padding）。可以设置盒子内容区与边框的间距。
- 外边距（margin）。可以设置盒子与相邻元素的间距。
- 属性值的顺序都是上、右、下、左, 循环填充的方式。
11.盒模型结论：
- 盒模型结论一：没有（就是没有设置width的）宽度的元素始终会扩展到填满其父元素的宽度为止。添加
水平边框、内边距和外边距，会导致内容宽度减少，减少量等于水平边框、内边距和外边距的和。 - 盒模型结论二：为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。实际上，盒子
的width属性设定的只是盒子内容区的宽度，而非盒子要占据的水平宽度。
11.浮动和清除：
12.定位:
CSS布局的核心是position属性; position属性有4个值：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位 固定定位与绝对定位类似），默认值为static
13.布局 (布局元素：页眉header，侧边栏aside，主体main，页脚footer)
常用的布局有：固定布局、多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。
- 固定布局：页面的大小采用固定的宽度，固定布局拥有固定的外表使用绝对长度单位
- 多栏布局：栅格系统就是利用浮动实现的多栏布局
- 多列布局：真正实现分栏效果
- 弹性布局：一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
- 流式布局：不受窗口宽度影响，流式布局使用百分比宽度来限定布局元素，这样可以根据客户端分辨率的大小来进行合理的显示。
- 瀑布流布局：视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
- 响应式布局：意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
14.弹出层:
弹出层（也叫提示条）指的是在鼠标悬停于某个元素之上时显示的一个界面组件
15.iconfont
- 编码引用：@font-face {}生成 再& #xe70b;使用
- 类引用：link导入css 再用class=”iconfont icon-addpeople_fill”使用
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
