掌握这20个CSS技巧提升你的CSS技能

最新推荐文章于 2022-09-29 09:08:31 发布

m0_70274530

最新推荐文章于 2022-09-29 09:08:31 发布

阅读量159

点赞数

分类专栏： Web前端文章标签：经验分享前端前端框架

本文链接：https://blog.csdn.net/m0_70274530/article/details/124480392

版权

Web前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

border-right: 1px solid #666;

}

.nav li:last-child {

border-right: none;

}

这是一种很混乱的方式，它不仅强制浏览器以一种方式渲染，然后又通过特定的选择器来撤销它。这样覆盖样式是不可避免的。然而，最重要的是，我们可以通过使用：not伪类(pseudo-class) 在你想声明的元素上仅仅只使用一种样式：

.nav li:not(:last-child) {

border-right: 1px solid #666;

}

上面就是，除了最后一个li以外，所有的 .nav li 都加上了border样式，是不是很简单！当然，你也可以使用 .nav li+li或者 .nav li:first-child ~li ,但是：not是更有语义化（semantic）和容易理解的。

如何提升你的CSS技能？掌握这20个css技巧即可[完整版]

5、body上加入line-height样式

======================

导致低样式效率（inefficient stylesheets）的一件事就是不断的重复声明。最好是做下项目规划和组合规则，这样CSS会更流畅。实现这一点，就需要我们理解级联（cascade）,以及如何在通用选择器写的样式可以继承在其他地方。行间距（line-height）可以作为给你的整个项目设置的一个属性，不仅可以减小代码量，而且可以让你的网站的样式给一个标准的外观

body {

line-height: 1.5;

}

请注意，这里的声明没有单位，我们只是告诉浏览器让它渲染行高是渲染字体大小的1.5倍

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

6、垂直居中任何元素 (vertical-center anything)

=====================================

在没有准备使用CSSGrid 布局的时候，设置垂直居中布局的全局规则是一个很好的方式，可以为优雅（elegantly）的设置内容布局奠定一个基础

html, body {

height: 100%;

margin: 0;

}

body {

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

display: -webkit-flex;

display: flex;

}

[这15种CSS居中的方式，你都用过哪几种？](()

7、使用SVG icons

=============

SVG使用于所有分辨类，并且所有浏览器也都支持。所以可以将.png .jpg .gif 等文件丢弃。FontAwsome5中也提供了SVG的图标字体。设置SVG的格式就跟其他图片类型一样：

.logo {

background: url(“logo.svg”);

}

温馨提示：如果将SVG用在可交互的元素上比如说button，SVG 会产生无法加载的问题。可以通过下面这个规则来确保SVG可以访问到（确保在HTML中已设置适当的aria属性）

.no-svg .icon-only:after {

content: attr(aria-label);

}

如何提升你的CSS技能？掌握这20个css技巧即可[完整版]

8、使用 “OWL选择器”

=============

使用通用选择器（universal selector）* 和相邻的兄弟选择器（adjacent sibling selector）+ 可以提供一个强大的的CSS功能，给紧跟其他元素中的文档流中的所有元素设置统一的规则

* + * {

margin-top: 1.5rem;

}

这是一个很棒的技巧，可以帮你创建更加均匀的类型跟间距。在上面的列子中，跟在其他元素后面的元素，比如说H3后面的H4，或者一个段落之后的一个段落，他们之间至少1.5rems的间距（大约为30px）

9、一致的垂直结构（Consistent Vertical Rhythm）

=====================================

一致的垂直节奏提供了一种视觉美学，使内容更具可读性。如果owl选择器过于通用，请在元素内使用通用选择器（*）为布局的特定部分创建一致的垂直节奏：

.intro > * {

margin-bottom: 1.25rem;

}

10、对更漂亮的换行文本使用 box-decoration-break

===================================

假设您希望对换行到多行的长文本行应用统一的间距、边距、突出显示或背景色，但不希望整个段落或标题看起来像一个大块。Box Decoration Break属性允许您仅对文本应用样式，同时保持填充和页边距的完整性。如果要在悬停时应用突出显示，或在滑块中设置子文本样式以具有突出显示的外观，则此功能尤其有用：

.p {

display: inline-block;

box-decoration-break: clone;

-o-box-decoration-break: clone;

-webkit-box-decoration-break: clone;

}

内联块声明允许将颜色、背景、页边距和填充应用于每行文本，而不是整个元素，克隆声明确保将这些样式均匀地应用于每行。

11、等宽表格单元格

==========

表格可能很难处理，所以尝试使用table-layout：fixed来保持单元格相等宽度：

.calendar {

table-lay 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源徽信搜索公众号【编程进阶路】 out: fixed;