还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。
| No. | 内容链接 |
|---|---|
| 1 | Openlayers 【入门教程】 - 【源代码+示例300+】 |
| 2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
| 3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
| 4 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
| 5 | 前端就业宝典 【面试题+详细答案 1000+】 |
文章目录
- 1. 基础概念
- 2. 样式属性
- 3. 高级特性
- 4. 性能优化
CSS（Cascading Style Sheets，层叠样式表）是用于描述网页文档如何呈现给用户的样式语言。它与HTML一起构成了网页设计的基础。以下是CSS的一些核心知识点归纳总结：
1. 基础概念
- 选择器：用于指定CSS样式应用于哪个HTML元素，如元素选择器、类选择器、ID选择器、属性选择器等。
- 声明块：包含在大括号
{}内的一个或多个CSS声明，每个声明由属性和值组成，用冒号:分隔。 - 继承：某些CSS属性可以被子元素从父元素那里继承，如字体样式。
- 层叠：当多个CSS规则应用到同一元素时，根据特异性、源顺序等决定最终样式。
2. 样式属性
- 文本样式：color（颜色）、font-size（字体大小）、font-family（字体类型）、text-align（文本对齐）、line-height（行高）等。
- 盒模型：margin（外边距）、padding（内边距）、border（边框）、width/height（宽度/高度）以及box-sizing（盒模型计算方式）。
- 布局
- 浮动：float（左浮动、右浮动）。
- 定位：position（静态、相对、绝对、固定）、top/bottom/left/right。
- 弹性布局（Flexbox）：display: flex;、justify-content、align-items等。
- 网格布局（Grid）：display: grid;、grid-template-columns/rows、grid-gap等。
- 背景：background-color、background-image、background-repeat、background-position、background-size等。
- 显示与可见性：display（控制元素的布局类型）、visibility（隐藏或显示元素）、opacity（透明度）。
- 过渡与动画：transition（过渡效果）、animation（动画）。
3. 高级特性
- 媒体查询：@media，用于根据不同设备屏幕尺寸、分辨率等条件应用不同的CSS样式，实现响应式设计。
- 伪类与伪元素：如:hover、:active、::before、::after等，用于在特定状态或位置添加样式。
- 变量：CSS Variables（自定义属性），使用
--variable-name定义，通过var()函数使用，提高代码可维护性。 - 模块化与预处理器：如Sass、Less、Stylus等，提供变量、嵌套规则、混合、函数等功能，增强CSS的可编程性。
- CSS Grid与Flexbox：现代布局方式，解决复杂页面布局问题。
4. 性能优化
- 减少HTTP请求，合并CSS文件。
- 使用CSS Sprite技术减少图片请求。
- 利用浏览器缓存。
- 避免使用CSS表达式。
- 适当使用外部链接图标（favicon）和其他资源的优化。
- 选择合适的单位（如rem、em相对于px在响应式设计中的优势）。
CSS是一个不断发展的领域，新特性如CSS Houdini（允许开发者编写自定义CSS特性）也在逐渐被引入。掌握上述基础和进阶知识点，并持续关注CSS的新标准和最佳实践，对于前端开发者来说至关重要。
