几个有点意思的 CSS 技巧

Souleigh ✨ 等级 1384 1 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 代码。

收藏
评论区

相关推荐

《前端实战总结》之使用纯css实现网站换肤和焦点图切换动画
今天我们来继续复盘一些工作中常用的css技巧和知识,以便我们可以更加优雅的用css实现富有动感的网站. 你将收获 网站换肤设计方案介绍 :target伪类介绍和用法以及如何使用css实现网站换肤 transition动画以及如何用纯css实现焦点图动画 效果展示 1.网站换肤 (https://imghelloworld.ossc
CSS Modules 解决 react 项目 css 样式互相影响的问题
CSS Modules 解决 react 项目 css 样式互相影响的问题 CSS Modules 解决 react 项目 css 样式互相影响的问题 (http
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中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
如何提高CSS性能
结合现代网站的复杂性和浏览器处理 CSS 的方式,即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分,所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验,这也需要优化你的CSS。本篇文章将涵盖CSS会导致哪些性能问题,以及如何制作不妨碍人们使用的CSS的最佳实践。 目录 CSS是如何工作的?
2020 全球 CSS 报告,大家都在用什么样的技术?
本文来源与公众号「秋风的笔记」 介绍 -- CSS 从 1994 年 10 月首次被提出,到目前为止已经20余年,但是 CSS 早已发生了天翻地覆的变化,2020 的CSS  又是如何的呢? 我们现在可以使用 CSS Grid 轻松制作动态或响应式的布局,以更少的代码来进行自适应布局。CSS-in-JS 无需依赖全局样式表,我们可以将样式与组件写在一起
CSS
css垂直渐变   #example3        {         /\* fallback \*/         background-color:#063053;         /\* chrome 2+, safari 4+; multiple color stops \*/         background-image:-we
CSS基本用法介绍
CSS介绍 ===== css定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 ===== ### css实列 每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 ### css注释 /*这是注释*/ CSS的几种引入方
CSS基础知识整理
### **1 什么是CSS?** CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。 CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。 ###
SASS入门教程及用法指南
作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家都知道,js中可以自定义变量,css仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,不可以引用等等。面对这些问题,我们现在来引进一个[SASS](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.haoro
43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从字面上去理解,DIV+CSS的网页就要全都是div,很明显是无法达到语义化标准的。请把”DIV+CSS”这个词从脑子中删除,用”xHTML+CS
CSS Font
CSS Font-Size: em vs. px vs. pt vs. percent =========================================== One of the most confusing aspects of CSS styling is the application of the **font-size** at
Less功能特性
(1)变量     我们常常在 CSS 中 看到同一个值重复多次,这样难易于代码维护 const bgColor="skyblue"; $(".post-content").css("background-color",bgColor); $("#wrap").css("background-color",bgColor);
Sass用法指南
学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。 很自然地,有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preproces
Selenium2学习(六)
前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求。css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁。 这一篇css的定位方法,主要是对比上一篇的xpath来的,基本上xpath能完成的,css也可以做到。两篇对比学习,更容易理解。 一、css:属性定位