前端 - 如何更有效地学习CSS并理解其作用？
关于css的学习问题。 有以下代码作为示例。
我习惯于把给定的css代码一条一条打出来在页面中显示效果， 不明白的上网搜索。 比如 text-align: center;首先css里面不写text-align: center;是一个效果，写上后增添一个效果这就是text-align: center;的作用。
但是这种方法也会产生很多问题。比如css里面有很多死的效果譬如字体大小，总不能死记硬背。又比如overflow: hidden;这样的貌似很多余的代码我是实在是搞不明白什么时候将它写入css代码中
希望各位大佬给点css学习的建议
<style>
.countdown {
width: 240px;
height: 305px;
text-align: center;
/* 相当于line-height:100%; */
line-height: 1;
color: #fff;
background-color: brown;
/* background-size: 240px; */
/* float: left; */
overflow: hidden;
}
.countdown .next {
font-size: 16px;
margin: 25px 0 14px;
}
.countdown .title {
font-size: 33px;
}
.countdown .tips {
margin-top: 80px;
font-size: 23px;
}
.countdown small {
font-size: 17px;
}
.countdown .clock {
width: 142px;
margin: 18px auto 0;
overflow: hidden;
}
.countdown .clock span,
.countdown .clock i {
display: block;
text-align: center;
line-height: 34px;
font-size: 23px;
float: left;
}
.countdown .clock span {
width: 34px;
height: 34px;
border-radius: 2px;
background-color: #303430;
}
.countdown .clock i {
width: 20px;
font-style: normal;
}
</style>
<body>
<div class="countdown">
<p class="next">今天是2222年2月22日</p>
<p class="title">下班倒计时</p>
<p class="clock">
<span id="hour">00</span>
<i>:</i>
<span id="minutes">25</span>
<i>:</i>
<span id="scond">20</span>
</p>
<p class="tips">18:30:00下课</p>
</div>
</body>以上
共有2个答案
多看多写，以前我上班的时候倒完水之后第一件事情就是看 CodePen 上面大佬的脑洞，看他们的实现思路。然后就是多写模板。
不过也是因为历史原因，当时需要我制作很多的设计稿去做企业网站的模板库。
现在大多数初级Web前端开发的工作场景，已经从写模板变成了写企业管理后台，所以技能要求已经从对于CSS技能的掌握已经变成掌握JS技能。
至于你的问题:
比如css里面有很多死的效果譬如字体大小，总不能死记硬背。
我的回答是靠经验，一般来说全局的font-size就是固定几种大小，14px或者16px，背景色很多也都是#fafafa或者#dadada、#eeeeee之类的，多和UI配合就能做到大概心里有数。比如overflow: hidden;这样的貌似很多余的代码我是实在是搞不明白什么时候将它写入css代码中
默认不加，只加入必要的样式。也就是说如果没有样式溢出、定位相关之类的情况就不需要增加overflow这个属性。
回答
学习CSS并理解其作用，可以遵循以下几个步骤和建议：
理解CSS盒模型：
- 这是CSS的基础，理解元素的宽度、高度、边距（margin）、边框（border）和内边距（padding）如何相互作用，对于布局和设计至关重要。
掌握CSS选择器：
- 精通不同类型的选择器（如元素选择器、类选择器、ID选择器、属性选择器、伪类等），并了解它们的优先级和特异性，这有助于你更高效地编写和维护CSS代码。
实践布局技术：
- 尝试使用不同的布局方法（如浮动布局、Flexbox、Grid布局等），通过实践来理解和掌握它们。每种方法都有其适用的场景和优势。
阅读和理解文档和示例：
- 官方文档是理解CSS属性和值的最佳资源。同时，查看在线示例和教程，了解其他人是如何应用CSS的。
使用开发者工具：
- 现代浏览器都提供了强大的开发者工具，可以用来检查元素的CSS属性、计算样式、事件监听器等。这对于调试和理解CSS非常有帮助。
理解CSS的继承和层叠：
- CSS的继承和层叠是理解样式如何应用于HTML元素的关键。了解这些概念有助于你预测和理解样式在不同元素和上下文中的表现。
学习响应式设计：
- 响应式设计是现代网页开发的重要组成部分。了解如何使用媒体查询、流式布局和灵活的图像等技术来创建适应不同设备和屏幕尺寸的网页。
参与社区和讨论：
- 加入CSS和前端开发相关的社区和论坛，与其他开发者交流和讨论。这不仅可以帮助你解决遇到的问题，还可以让你了解最新的技术趋势和实践。
关注CSS框架和库：
- 了解和使用流行的CSS框架和库（如Bootstrap、Tailwind CSS等），这些工具提供了许多预定义的样式和组件，可以大大加快开发速度。
不断实践和反思：
- 通过不断的实践来巩固你的知识，并反思你的代码。尝试优化你的CSS，使其更加简洁和高效。
关于你提到的overflow: hidden;等属性的理解，这通常需要通过实践和阅读文档来掌握。overflow: hidden;的作用是隐藏超出元素盒模型的内容，这在创建包含滚动条的内容区域、清除浮动、创建裁剪效果等场景中非常有用。通过在不同的布局和上下文中使用这些属性，你会逐渐理解它们的作用和用途。
-
这种类似喇叭的效果怎么实现啊 自己通过css去做，感觉达不到这种效果
-
注: 内容翻译自 etcd3 API 注意: 这个文档还没有完成! 注：原文如此，的确是还没有完成 :) Response header 从etcd API返回的所有应答都附带有 response header。这个response header包含应答的元数据。 message ResponseHeader { uint64 cluster_id = 1; uint64 member_i
-
什么时候使用 :focus-visible 伪类？ 当我们点击 <button> 的时候，:focus伪类生效，但是:focus-visible伪类不会生效。 当我们使用tab键来聚焦 <button> 的时候，两者都会生效。 此时，如果我们不想用鼠标点击时出现聚焦样式，那么我们只使用 :focus-visible 就可以了。 如果没有 :focus-visible 伪类，那么我们就将在 点击 和
-
我正在创建一个报告，并已经自动化了抓取图像并将其放入的过程。它正在工作，但比它需要的时间要长。我希望有人能帮我实现一个循环来简化代码。 我尝试了几种方法，但当涉及到放置图像的区域时，它似乎总是默认为我设置的初始变量。 DS1=rng&“a.jpg” DS1_1=左(DS1,6)&“00-”&Mid(DS1,4,3)&“99” DS1_2=左(DS1,8) 在错误转到DS3 时，设置shp=acti
-
问题内容： 如何合并两个保持BST属性的二叉搜索树？ 如果我们决定从一棵树中取出每个元素并将其插入到另一个元素中，则此方法的复杂度将为，其中是我们已拆分的树的节点数（例如），是的结点数。另一棵树（例如）。此操作后，只有一个具有节点。 我的问题是：我们能做得比好吗？ 问题答案： 纳夫的答案还有更多细节： 将BST展平为排序列表为O（N） 它只是整个树上的“有序”迭代。 两者都做O（n1 + n2）
-
Directed learning The table below contains instructor led, paid, front-end courses, programs, schools, and bootcamps. If you can't afford a directed education, a self directed education using screenca
-
考虑以下几点： 每秒最多可有100个并发请求的web应用程序 当前每个传入请求都向endpoint发出http请求以获取某些数据（最多需要5秒） 我只想发出一次http请求，也就是说，我不想对同一个endpoint进行并发调用，因为它将返回相同的数据 这个想法是，只有第一个请求才会进行http调用以获取数据 而此呼叫是“飞行”，随后的请求将不会发出相同的呼叫，而是“等待”第一个飞行请求完成。 当对
-
本文向大家介绍前端开发之CSS原理详解，包括了前端开发之CSS原理详解的使用技巧和注意事项，需要的朋友参考一下 前端开发之CSS原理详解 从事Web前端开发的人都与CSS打交道很多，有的人也许不知道CSS是怎么去工作的，写出来的CSS浏览器是怎么样去解析的呢？当这个成为我们提高CSS水平的一个瓶颈时，是否应该多了解一下呢？ 一、浏览器的发展与CSS 网页浏览器主要通过 HTTP 协议连接