这是我参与「第四届青训营 」笔记创作活动的第1天
css的定义
1.css是什么
CSS全名Cascading Style Sheets,是一种用来定义页面元素的样式，其主要功能有
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
2. 结构
结构选择器Selector、属性Property、属性值Value、声明Declaration
3. 引用方式
外链 | link标签、嵌入 | style标签、内联 | style属性
4. 加载方式
加载HTML、解析HTML&加载CSS、创建DOM树&解析CSS、添加样式、渲染展示页面
详细介绍
选择器（selector）
作用：找出页面中的元素，以便给它们设置样式
- 通配选择器
- 标签选择器
- ID选择器
- 类选择器
- 属性选择器
选择器的特异度**（Specificity）
**
内联样式，优先级1000
id选择器，优先级100
类和伪类，优先级10
元素和伪元素，优先级1
通配选择器，优先级0
伪类（pseudo-classes）
特点：不基于标签和属性定位元素
几种伪类
1.结构伪类
2.结构性伪类
布局
定义
布局是什么？
- 确定内容的大小和位置的算法
- 依据元素，容器，兄弟节点和内容等信息来计算
静态布局
- 布局特点：静态布局是最为原始的布局方式，制作的网页上的元素尺寸一律以px为单位。
- 优点：这种布局对于新手而言较为简单，容易让人学会。这种布局一般用于企业的门户网站。
- 缺点：大小固定死，不会随屏幕大小而发生变化。
流式布局
- 布局特点：流式布局是用于解决类似的设备不同分辨率之间的兼容 (一般分辨率差异较少)，使用百分比布局，页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。
- 优点：用来应对不同尺寸的PC屏幕，在移动端开发也是常用布局方式
- 缺点：如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
自适应布局
- 布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
- 优点：对网站的复杂程度兼容性更大，测试时更加容易，运营相对更加精准。
- 缺点：需要根据不同使用场景开发多套界面。
响应式布局
- 布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
- 优点：适应pc和移动端，如果足够耐心，效果完美
- 缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。
弹性布局
- 布局特点：包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位，使用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放。
- 优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。
- 缺点：高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。如果只是宽度自适应，更推荐响应式设计。
总结
通过青训营课程中对CSS内容的学习，我了解到许多之前还不熟悉的知识点，以后还需要不断努力学习，强化自己的基础知识。
