几个有点意思的 CSS 技巧

Souleigh ✨
• 阅读 2058

如果你是一名前端开发人员或者想成为一名开发人员,那么,我今天与你分享的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 代码。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
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
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Karen110 Karen110
3年前
​一篇文章总结一下Python库中关于时间的常见操作
前言本次来总结一下关于Python时间的相关操作,有一个有趣的问题。如果你的业务用不到时间相关的操作,你的业务基本上会一直用不到。但是如果你的业务一旦用到了时间操作,你就会发现,淦,到处都是时间操作。。。所以思来想去,还是总结一下吧,本次会采用类型注解方式。time包importtime时间戳从1970年1月1日00:00:00标准时区诞生到现在
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Stella981 Stella981
3年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这