几个有点意思的 CSS 技巧

Souleigh ✨ 等级 1207 0 1

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

收藏
评论区

相关推荐

前端开发中79条不可忽视的知识点汇总
过往一些不足的地方,通过博客,好好总结一下。 1.css禁用鼠标事件 css .disabled { pointerevents: none; cursor: default; opacity: 0.6; } 2.get/post的理解和他们之间的区别 http 超文本传输协议(HTTP)的设计目的是保证客户机
《css大法》之使用伪元素实现超实用的图标库(附源码
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形。 预备知识 伪元素 伪元素是一个附
《前端实战总结》之使用纯css实现网站换肤和焦点图切换动画
今天我们来继续复盘一些工作中常用的css技巧和知识,以便我们可以更加优雅的用css实现富有动感的网站. 你将收获 网站换肤设计方案介绍 :target伪类介绍和用法以及如何使用css实现网站换肤 transition动画以及如何用纯css实现焦点图动画 效果展示 1.网站换肤 (https://imghelloworld.ossc
巧用css圆角实现有点意思的加载动画
作为一名前端工程师, 需要对css技巧有充分的研究和了解, 接下来笔者将会带大家一起掌握如何用css的圆角属性来实现有点意思的加载动画. 如果想学习更多css实用技巧, 可以参考笔者以下的文章: <div style"display:flex; flexwrap:wrap; alignitems: center;" <a href"https:/
2. web前端开发分享-css,js进阶篇
2. web前端开发分享css,js进阶篇 一,css进阶篇:   等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后
CSS Modules 解决 react 项目 css 样式互相影响的问题
CSS Modules 解决 react 项目 css 样式互相影响的问题 CSS Modules 解决 react 项目 css 样式互相影响的问题 (http
css问题
1、 在IOS中图片不显示(给图片加了圆角或者img没有父级) <div<img src""/</div div {width: 20px; height: 20px; borderradius: 20px; overflow: h
一篇文章带你了解css z-index(重叠顺序)
div csszindex层重叠顺序 div层、span层等html标签层重叠顺序样式zindex,平时CSS使用较少,但也会难免会碰到CSS zindex使用。 从基础语法到应用案例教程讲解学习zindex。 一、zindex语法与结构 zindex 跟具体数字 div{ zindex:100 } 注意:zindex的
30个前端开发人员必备的顶级工具
在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。 (https://imghelloworld.osscnbeijing.aliyuncs.com/2e7966318084a45d05a0926cbd749a02.png) 目录 CSS代码生成器 CSS3 Generator
Vue进阶(幺柒陆):CSS预编译语言Sass、Scss、Less和Stylus
什么是CSS预处理器CSS预处理器定义了一种新的语言,它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
你可能不知道的10个CSS新功能(2021版)
多年来,CSS已经超越了背景颜色、边框、文本样式、边距和盒模型。现代CSS能够提供一系列的功能,而在过去,您需要JavaScript或变通方法来实现这些功能。 为了庆祝它在2021年取得的成就,在这篇文章中,我们想看看一些你可能不知道的令人惊叹的CSS新特性。我们将强调web设计人员和开发人员可以用现代CSS做的很酷的事情,讨论用例,浏览器支持,并给你一个
Fower: 一个可在 Vue 和 React 方便使用的 CSS in JS 库
一年多没写过文章了,今天给大家介绍一个我断断续续花了半年开发的 CSS 项目: . Fower 是什么?Fower 是一个让你高效开发 UI 的样式工具库,目标是让你写 CSS 不再痛苦。Fower 的核心特点是原子化(Atomic/utilityfirst)、类型安全(Type Safe)、CSS in JS,它非常注重开发体验,让你快速且开心的开发界面。
如何提高CSS性能
结合现代网站的复杂性和浏览器处理 CSS 的方式,即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分,所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验,这也需要优化你的CSS。本篇文章将涵盖CSS会导致哪些性能问题,以及如何制作不妨碍人们使用的CSS的最佳实践。 目录 CSS是如何工作的?
小白怎么成为一个黑客?按照这个路线来!
大家好,我是周杰伦。接下来我会写系列的文章,给大家整理下网络安全的详细的学习步骤和学习资源推荐。今天的主题是——Web安全。Web安全是网络渗透中很重要的一个组成部分,今天跟大家聊一下,如何在三个月内从零基础掌握Web安全。 第一个月第一周:HTML+CSS,学会网页基本格式,学会编写基本网页,表单,学会用浏览器F12检查元素,查看源码 推荐学习地址: H