几个有点意思的 CSS 技巧

Souleigh ✨
• 阅读 1636

如果你是一名前端开发人员或者想成为一名开发人员,那么,我今天与你分享的9个CSS技巧,你需要知道一下。

现在,我们开始吧。

1、学习盒子模型

你在学习 CSS 时,应该避免使用BootstrapTailwindCSS等框架,这些工具非常适合构建漂亮的网站,但如果你还不能正确的了解 CSS,则建议不要使用这些框架中的任何一个。

因为如果你使用了这些工具,你将无法学习作为开发人员应该知道的基本 CSS 基础知识。

一旦你理解了CSS 盒模型,代码中的其他一切就开始变得有意义了。

从基础开始学习 CSS 可以让你更加自由和创造性地控制你的代码。

几个有点意思的 CSS 技巧

2、用于调试 CSS 的 Firefox

你应该使用 Firefox 而不是Chrome来调试 CSS,因为Firefox在CSS方面拥有最出色的开发工具 ,当你在 Firefox 中检查元素时,你会看到框模型的细分,你可以在其中直接编辑元素的属性。

此外,Firefox 在HTML 中提供了一些有用的注释。

3、使用弹性盒

几个有点意思的 CSS 技巧

元素相对于彼此的布局或定位,一直是开发人员面临的主要问题之一,其中一个问题是如何将 div 水平和垂直居中。一个好的基本方法是给子绝对定位,将其移动到右下角,然后向后平移 50% 以将其放在中心。这种方法可以工作,但非常不直观。

现代 CSS 的一个更好的方法是使用 flexbox,它允许您在 UI 的任何位置创建灵活的列和行。

几个有点意思的 CSS 技巧

4、 Clamp VS 媒体查询

人们使用不同的设备访问你的网站,因此,你在处理项目时应牢记这一点。为了创建响应式布局,宽度应根据该设备或视口上的可用空间而定。

例如;

你有一篇宽度为 50% 的文章,对于小屏幕,你希望将其固定为 250 像素,而对于大屏幕,你希望将其固定为 700 像素。

你可以通过有条件地应用媒体查询来做到这一点,但这最终会得到如下所示的混乱代码。

几个有点意思的 CSS 技巧

在这里你可以使用clamp 函数来编写更小更简单的CSS。

几个有点意思的 CSS 技巧

5、纵横比单线

假设你必须编写一个响应式图像或一个保持特定纵横比的视频网站。一种方法是在容器元素的顶部应用填充,然后给子元素绝对定位。

但另一种更简单的方法是使用宽高比属性。你可以只定义视频或图像的纵横比。

6、变量的变量

使代码灵活和消除 CSS 代码同样重要,这样重构对你来说就不成问题。实现此目的的最佳方法之一是使用 CSS 自定义属性或变量。

让我们在多行中拥有相同的颜色值并决定更改颜色,一种方法是修改具有该值的每一行代码。但这是重复的。

更好的方法是在根选择器上创建一个全局变量,你可以在任何需要的地方引用它。

现在,当你决定更改颜色时,你只需修改一行代码,所有具有该颜色值的行都将被修改。

7、花哨的计算

尽管 CSS 不是一种编程语言,但它能够使用 calc() 函数执行一些基本计算。

此功能允许你进行一些基本的数学计算,但该功能的更大优势是你可以组合不同的单位。

8、反状态

CSS 内置了一个状态管理机制,你可以在其中跟踪运行计数,而无需使用一行 JavaScript。例如,如果您想跟踪代码中标题的数量,一种方法是手动编写并记住计数。

更聪明的方法是使用 CSS 计数器在移动到下一个标题时进行计数和递增。你可以使用 counter-reset 属性在你的代码中创建一个计数器,现在你不必担心记住代码中的小东西。

9、寻找焦点

当你想要构建一个复杂的下拉菜单时,最常见的方法是使用 JavaScript 来管理菜单的打开和关闭状态。

令人惊讶的是,CSS 可以帮助你解决这个问题。它提供了伪类来创建和打开下拉菜单,但问题是当你选择一个选项时,它会失去焦点并关闭。

但是,还有另一个称为 focus-within 的伪类,如果子元素也有焦点,它就会保持活动状态。这个简单的功能消除了大量的 Javascript 代码。

点赞
收藏
评论区
推荐文章
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
Karen110 Karen110
1年前
​一篇文章总结一下Python库中关于时间的常见操作
前言本次来总结一下关于Python时间的相关操作,有一个有趣的问题。如果你的业务用不到时间相关的操作,你的业务基本上会一直用不到。但是如果你的业务一旦用到了时间操作,你就会发现,淦,到处都是时间操作。。。所以思来想去,还是总结一下吧,本次会采用类型注解方式。time包importtime时间戳从1970年1月1日00:00:00标准时区诞生到现在
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Stella981 Stella981
1年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Stella981 Stella981
1年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue
NVIDIA安培架构下MIG技术分析
关键词:NVIDIA、MIG、安培一什么是MIG2020年5月,NVIDIA发布了最新的GPU架构:安培,以及基于安培架构的最新的GPU:A100。安培提供了许多新的特性,MIG是其中一项非常重要的新特性。MIG的全名是MultiInstanceGPU。NVIDIA安培架构中的MIG模式可以在A100GPU上并行运行七个作业。多实
helloworld_34035044 helloworld_34035044
6个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为