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

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

1.使用相对单位

一般咱们在项目开发中，使用px做为尺寸的单位，而不是使用相对单位，如：rem、em等。在万物互联的时代，最好的方式是相对单位rem、vh、vw等现代 CSS 布局（如 flexbox 和 grid）方式，最大限度的支持各类终端设备。html

绝对单位

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的基础，来设计好代码结构，以下：git

/* 不提倡 */
.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时，浏览器会为文本添加一些基本的默认样式、填充、边距等。github

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

像这样：浏览器

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
ul,
li {
    list-style: none;
}
复制代码

不过这些问题如今基本都被框架解决了，对于初学者建议能够模仿但不建议一开始就上框架。sass

4.不使用颜色名称

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

为何呢？由于当使用像 red 这样的颜色名称时，在不一样的浏览器或者设备中显示会有所不一样。less

/* 不提倡 */
.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容器规定了一个期待的纵横比，这个纵横比能够用来计算自动尺寸以及为其余布局函数服务。

总结

CSS 既有趣又强大，并且还在不断地成长和改进。

若是以上文章对您有帮助，请给咱们的开源项目点点star： http://github.crmeb.net/u/defu 不胜感激！

来自 “开源世界 ” ，连接：https://ym.baisou.ltd/post/727.html，如需转载，请注明出处，不然将追究法律责任。