css

第 14 讲：flexbox – 对齐和分配空间的现代方式 嘿那里！准备好深入研究 css 中最酷、最强大的工具之一了吗？今天，我们将探索 flexbox。如果您曾经在以简洁且响应迅速的方式对齐项目或分配空间方面遇到困难，那么 flexbox 是您最好的新朋友。 1.什么是 flexbox？ fle…

介绍field-sizing field-sizing 是一个新的 css 属性，可以使input 、 textarea和select自动缩放到其内容的大小。 fixed ，这是输入、文本区域和选择的当前行为，无论内容如何，​​它们都具有固定大小。content ，使表单元素缩放到内容的大小 当您将…

弹性盒： .container { display: flex; justify-content: center; align-items: center; height: 300px;} 网格 .container { display: grid; place-items: center; hei…

Tailwind CSS 是一个实用程序优先的 CSS 框架，允许开发人员快速高效地创建自定义设计。与提供预先设计的组件的传统 CSS 框架不同，Tailwind CSS 提供低级实用程序类，可以组合这些类以直接在 HTML 中构建任何设计。 Tailwind CSS 的主要特性 实用优先方法： T…

第 15 讲：css 网格 – 轻松构建复杂布局 在本次讲座中，我们将深入探讨 css 网格，这是一个强大的布局系统，可让您完全控制行和列。虽然 flexbox 非常适合一维布局（行或列），但 grid 允许您处理二维布局，这意味着您可以精确地设计整个网页布局。 1.什么是 css 网格？ css …

第 16 讲：带有媒体查询的响应式设计 在今天的讲座中，我们将探索响应式设计以及如何使用媒体查询让您的网站在任何设备上看起来都很棒。在移动浏览时代，创建适应各种屏幕尺寸的布局对于用户体验至关重要。 1.什么是响应式设计？ 响应式设计可确保网站调整其布局、图像和内容以适应不同的屏幕尺寸和方向。这种方法…

Web 应用程序从静态网站到动态网页的演变是由对更具交互性、用户友好性和功能丰富的 Web 体验的需求推动的。以下是这种范式转变的概述： 1. 静态网站（1990 年代） 定义：静态网站由用 HTML 编写的固定内容组成。每个页面都是预先构建并存储在服务器上，并且向每个用户传递相同的内容。技术：HT…

第 17 讲：css 变量 – 简化样式表 在本次讲座中，我们将了解 css 变量（也称为自定义属性）以及它们如何通过允许您在样式表中重用值来帮助简化代码。 1.什么是 css 变量？ css 变量使您能够将颜色、字体大小或间距等值存储在中心位置，并在整个样式表中重复使用它们。这使您的代码更易于维护…

今天，我完成了我的第一个前端项目，这是一张个人资料卡。 这个想法来自前端导师，但我决定加入自己的想法，同时不偏离我所知道的初学者水平太远，我添加了一些动画，有点超出了我的舒适区，比如归因部分的心跳和标题上看到的轻微悬停效果，我觉得看起来棒极了。 我真的为自己感到骄傲，因为在此之前我什至从未自己做过一…

介绍 没有什么比应用一种样式但它没有按预期工作更令人沮丧的了。边距塌陷是一种导致意想不到的造型效果的现象。那么，什么是折叠边距以及它如何影响 css 中的边距？ 利润崩溃 折叠边距源于css属性边距，它控制元素外部的间距。顾名思义，当相邻元素的边距组合或“折叠”为一个而不是相加时，就会发生折叠边距。…