前端工程师学习路线 —— CSS 1

2020.2.17

1. 学习基础
2. 进行布局
3. 响应式设计和媒体查询

---

一、学习基础
CSS，Cascading Style Sheets，层叠样式表；
样式继承顺序： 内联样式 → id选择器 → class/伪类/组合选择器 → 元素/伪元素选择器；

---

二、进行布局
Floats / Positioning / Display / Box Model / Css Grid / Flex Box
不同显示类型：块类型和内联类型
dispaly: block/inline/flex/inline-flex/inline-block
溢出：overflow
格网：grid
浮动：float / 清除浮动：clear
定位：position：static / relative / absolute / sticky

---

三、响应式设计和媒体查询
响应式Web设计不是一项独立的技术 —— 它是一个术语，用于描述Web设计的方法或一组最佳实践，用于创建可以响应所用设备的布局。

媒体查询，Media Queries；
媒体查询允许我们运行一系列测试（例如，用户的屏幕是否大于特定宽度或特定分辨率），并选择性地应用CSS来为页面样式化以适合用户的需求。

@media media-type and（media-feature-rule）{
  / * CSS规则转到此处* /
}

• 媒体类型，它告诉浏览器此代码用于哪种媒体（例如，all/print/screen/speech）。
• 媒体表达式，它是必须应用的规则或测试，才能应用所包含的CSS。
• 如果测试通过且媒体类型正确，则将应用一组CSS规则。