极客观点
项目管理
HarmonyOS
关于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>以上
多看多写，以前我上班的时候倒完水之后第一件事情就是看 CodePen 上面大佬的脑洞，看他们的实现思路。然后就是多写模板。
不过也是因为历史原因，当时需要我制作很多的设计稿去做企业网站的模板库。
现在大多数初级Web前端开发的工作场景，已经从写模板变成了写企业管理后台，所以技能要求已经从对于CSS技能的掌握已经变成掌握JS技能。
至于你的问题:
比如css里面有很多死的效果譬如字体大小，总不能死记硬背。我的回答是靠经验，一般来说全局的
font-size就是固定几种大小，14px或者16px，背景色很多也都是#fafafa或者#dadada、#eeeeee之类的，多和UI配合就能做到大概心里有数。比如overflow: hidden;这样的貌似很多余的代码我是实在是搞不明白什么时候将它写入css代码中默认不加，只加入必要的样式。也就是说如果没有
样式溢出、定位相关之类的情况就不需要增加overflow这个属性。