前端开发需要知道的 10 个CSS技巧

更新日期: 2021-06-16阅读: 1.4k标签: css技巧

个人觉得 css 是每个前端开发人员都必须掌握的基础,以完成相应的交互和终端设备的响应。在项目开发中,有些容易被忽略的小问题带来项目后期的胶水代码。本文总结一些项目开发中CSS的10个小技巧。


1.使用相对单位

通常我们在项目开发中,使用px作为尺寸的单位,而不是使用相对单位,如:rem、em等。在万物互联的时代,最好的方式是相对单位rem、vh、vw等现代 CSS 布局(如 flexbox 和 grid)方式,最大限度的支持各种终端设备。

绝对单位

px :是一个绝对单位,主要是因为它是固定的,不会根据任何其他元素的测量而改变。

相对单位

vw(viewpoint width):相对于视口的宽度

vh(viewpoint height):相对于视口的高度

rem(font size of the root element):相对于根 ( ) 元素 (默认字体大小通常为 16px )

em(font size of the element):相对于父元素

% :相对于父元素

/* 不提倡 */
.wrap {
    font-size: 14px;
    margin: 10px;
    line-height: 24px;
}
/* 建议 */
.wrap {
    font-size: 1.2rem;
    margin: 0.5rem;
    line-height: 1.6em;
}


2. 代码复用

很多开发人员在谈到CSS时都觉得代码重复性很高,在项目开发中这不是一个好的做法。好在现在有CSS预处理器(sass/scss、less、stylus、Turbine),能够让我们可以更好的规划CSS代码,提高其复用性。

当然需要提高代码复用,还是需要一定的CSS的基础,来设计好代码结构,如下:

/* 不提倡 */
.container {
    background-color: #efefef;
    border-radius: 0.5rem;
}

.sidebar {
    background-color: #efefef;
    border-radius: 0.5rem;
}

/* 建议 */
.container,
.sidebar {
    background-color: #efefef;
    border-radius: 0.5rem;
}


3.CSS重置

每个浏览器都有自己的默认样式,因此,当网页不包含CSS时,浏览器会为文本添加一些基本的默认样式、填充、边距等。

可以通过使用通用选择器 * 重置 padding、margin、box-sizing 和 font-family 来实现这一点。

像这样:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
ul,
li {
    list-style: none;
}
不过这些问题现在基本都被框架解决了,对于初学者建议可以模仿但不建议一开始就上框架。


4.不使用颜色名称

不要使用red、blue等颜色名称,相反,建议使用颜色的十六进制值。

为什么呢?因为当使用像 red 这样的颜色名称时,在不同的浏览器或者设备中显示会有所不同。

/* 不提倡 */
.container {
    background-color: red;
}

/* 建议 */
.container {
    background-color: #ff0000;
}


5.使用简写属性

在CSS中,多用简写属性,少用单独属性,具体哪些是简写属性,哪些是单独属性,下面列举一下常见的一些属性,是以通常项目为原则。

简写属性

background、font、 margin、padding、 border、 transition、 transform、 list-style、 border-radius

单独属性

rotate、scale、background-color、background-image、background-position、padding-left、padding-right、padding-top、padding-bottom、margin-left、margin-top、margin-right、margin-bottom、border-top、 border-right、 border-bottom、 border-left、 border-width、 border-color、 border-style、

/* 不提倡 */
.container {
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-position: center;
}

/* 建议 */
.container {
    background: url(bg.png) no-repeat center;
}


6.文本截取

在项目开发中,有些列表只需要显示一行文字,有些列表需要显示固定函数的文字,过去通过字符截取的方式来实现,但存在截取不统一(文本内容不同英文、中文、标点符号等),再加上现在各种终端的适配,不足就被放大了。

现在最佳的方式是通过CSS来实现,在文本最后增加省略号(…)。

单行截取

元素必须是 block 或 inline-block,如果溢出被隐藏,则文本溢出不起作用,并且元素必须具有定义的宽度或最大宽度集。

p {
    display: inline-block;
    max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

多行截取

p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 需要显示的行数 */
    overflow: hidden;
}


7.垂直居中

垂直居中是一个很常见的需求,有很多实现方式,在伸缩容器内的任何东西垂直居中:

.flex-vertically-center {
    display: flex;
    align-items: center;
}

inline、inline-block、table-cell 块垂直对齐:

img {
    /* 只对block有效 */
    display: inline-block;
    vertical-align: middle;
}

相对容器中垂直居中的绝对元素,下面代码是.sub-container在.container垂直居中:

.container {
    position: relative;
}
.sub-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}


8.水平居中

与垂直对齐类似,不过水平居中更容易一点。

块居中

.block-element {
    display: block;
    margin: 0 auto;
}

内联或内联块文本居中

.container {
    text-align: center;
}

在相对容器内水平居中绝对元素:

.container {
    position: relative;
}
.sub-container {
    position: absolute;
    top: 50%;
    transform: translateX(-50%);
}

flex 容器内的任何内容水平居中:

.flex-vertically-center {
    display: flex;
    justify-content: center;
}


9.设置下一个或上一个兄弟元素样式

对元素前面和后面的元素进行样式设置,在项目开发中很有用。例如10个按钮,当前按钮下一个及下一个的兄弟元素设置不同的颜色。

html代码如下:

<div>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button class="current">current</button>
    <button>+ button</button>
    <button>~ button</button>
    <button>~ button</button>
    <button>~ button</button>
    <button>~ button</button>
</div>

css代码:

.current ~ button {
    background-color: #000;
    color: #ffffff;
}
.current {
    background-color: #ff0000;
}
.current + button {
    background-color: #333;
}

效果如下:


接下来设置当前按钮前面样式,css代码如下:

button {
    padding: 10px 15px;
    border: 1px solid #444444;
    font-size: 12px;
    background-color: #ff0000;
    color: #000;
}
.current {
    background-color: #000;
    color: #fff;
}
.current ~ button {
    background: initial;
}
.container {
    width: 1000px;
    margin: 50px auto;
    text-align: center;
}


10.宽高比

如果想让盒子容器有一定的宽高比,如视频播放器尺寸,可以用几种方法来实现,其中有一种方法最直观。可以使用 calc 函数设置顶部填充 (height * width) / 100%。

如下,创建一个 720px 宽的 16 x 9 矩形:

html代码:

<div class="container">
    <div class="box"></div>
</div>

css代码:

.container {
    width: 720px;
}
.box {
    padding-top: calc((9 / 16) * 100%);
    background: #efefef;
}

还可以使用 after 伪元素来创建比例大小。

.box::after {
    content: "";
    display: block;
    padding-top: calc((9 / 16) * 100%);
    background: #eee;
}

上面的方案会导致里面所有的元素都必须向上移动或需要使用绝对定位。不过好消息是,CSS增加了aspect-ratio属性。

aspect-ratio 为box容器规定了一个期待的纵横比,这个纵横比可以用来计算自动尺寸以及为其他布局函数服务。


链接: https://www.fly63.com/article/detial/10436

20 个 CSS高级样式技巧汇总

使用技巧会让人变的越来越懒,没错,我就是想让你变懒。下面是我收集的CSS高级技巧,希望你懒出境界。黑白图像、使用:not()在菜单上应用/取消应用边框、页面顶部阴影、逗号分隔的列表、使用负的 nth-child 选择项目、对图标使用 SVG....

css常用的简写技巧_css background简写、css border 简写、css font属性简写等

css样式中有很多简写方式,比如:设置背景,字体,边框,盒子等。我们都可以把css代码合并为一行,这篇文章将总结有哪些属性支持css简写。

分享几个CSS技巧

分享几个CSS技巧包括:创建剪切动画、优化动画性能、实现长宽比、垂直居中等

你应该知道的简单易用的CSS技巧

作为前端,在工作中难免会遇到关于排版的问题,以下是我整理的一些关于CSS的技巧,希望对你能有帮助。每个单词的首字母大写一般我们会用JS实现,其实CSS就可以实现。

三个非常棒的CSS技巧,完全在项目中代替Js

本文介绍三个非常棒棒的CSS技巧,完全可以在你的项目中代替JavaScript,一起来看看这些技巧吧。:active伪类与CSS数据上报、超实用超高频使用的:empty伪类、用好:only-child伪类

100 个鲜为人知的 CSS 技巧汇总整理合集

金三银四找工作的旺季来了,在过去的一段时间里,我花了很多时间将之前的一些基础知识做了整理,希望这些内容能够帮助你在面试的时候,稍微顺利一些。因此,我将整理好的这 100 个 CSS 知识技巧分享给你

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!