青训营X豆包MarsCode 技术训练营|CSS

用户01075202270
76 阅读3分钟

定位

CSS定位属性允许你精确地定位元素在页面上的位置。

  • static：默认定位，元素按照正常文档流进行布局。
  • relative：元素相对于其正常位置进行偏移。
  • absolute：元素相对于其最近的已定位（非static）祖先元素进行定位。
  • fixed：元素相对于浏览器窗口进行定位，即使页面滚动，元素也会停留在相同的屏幕位置。
  • sticky：元素根据用户的滚动位置在相对定位和固定定位之间切换。

响应式设计

响应式设计使用CSS媒体查询来为不同的屏幕尺寸和设备提供不同的样式。

css
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Flexbox 和 Grid

Flexbox 和 Grid 是CSS的布局模块，它们提供了更灵活和强大的布局方式。

  • Flexbox：用于一维布局，可以轻松地对齐和分布容器内的项目。
  • Grid：用于二维布局，可以创建复杂的页面布局，如网格和布局。

JavaScript

基础

JavaScript是一种脚本编程语言，用于网页的交互性、动画、游戏开发等。

  • 变量：使用 let 和 const 声明变量。
  • 数据类型：包括字符串、数字、布尔值、对象、数组等。
  • 函数：用于封装可重复使用的代码块。

DOM操作

JavaScript可以通过DOM（文档对象模型）与HTML元素交互。

  • 选择元素：使用 document.getElementById 或 document.querySelector。
  • 修改内容：使用 element.innerHTML 或 element.textContent。
  • 事件处理：使用 element.addEventListener 监听和响应用户事件。

Ajax 和 API

JavaScript可以使用Ajax（异步JavaScript和XML）与服务器通信，无需重新加载页面即可更新网页。

  • Fetch API：现代的网络请求API，用于异步请求资源。
  • XMLHttpRequest：较旧的API，也用于与服务器通信。

异步编程

JavaScript是单线程和异步的，可以使用回调函数、Promises、async/await来处理异步操作。

  • 回调函数：将函数作为参数传递给另一个函数。
  • Promises：用于异步计算的结果。
  • async/await：基于Promises的语法糖，使异步代码看起来像同步代码。

在深入学习CSS的过程中，我感悟到以下几点：

  1. 细节的重要性：CSS中的每一个小细节，比如一个像素的移动、一个颜色的微妙变化，都能极大地影响最终的视觉效果。
  2. 布局的逻辑性：CSS不仅仅是关于样式，更多的是关于布局和结构。理解盒模型、定位、Flexbox和Grid等概念，让我开始用逻辑和结构化的方式思考页面设计。
  3. 代码的可维护性：随着项目的复杂性增加，编写可读性强、易于维护的CSS代码的重要性。
  4. 响应式设计的挑战：在不同设备和屏幕尺寸上实现一致的用户体验，是我在学习CSS时遇到的一大挑战。
  5. 性能的考量：我逐渐认识到，CSS不仅仅是为了美观，还关乎网站的性能。优化CSS选择器的性能、减少重绘和回流、合理使用CSS动画等，都是提升用户体验的重要方面。
  6. 持续学习的必要性：CSS和前端技术的发展日新月异，新的工具和框架层出不穷。这让我意识到，作为一个前端开发者，必须保持好奇心和学习的热情，不断更新自己的知识库。
avatar
文章
阅读
粉丝