在前端开发中，样式是其中一个非常重要的部分。而为了方便开发，我们通常会使用一些现成的样式库。basscss-position 就是其中一个非常不错的 npm 包，它可以帮助我们更快速地编写出响应式的布局。
basscss-position 是什么？
Basscss 是一种低级样式库，它专门用来创建基本的样式。而 basscss-position 则是其配套的插件，主要用来定义元素的位置和尺寸。
具体来说，basscss-position 提供了一系列的 CSS 类名，通过将这些类名应用在 HTML 元素上，我们便可以轻松地设置元素在页面上的大小、位置、对齐方式等属性。另外，这些类名与其它 basscss 类名可以很好地组合使用，所以你可以在不写自定义样式的情况下，快速构建出漂亮的界面。
如何使用 basscss-position？
为了使用 basscss-position，我们需要先安装这个 npm 包。在终端输入以下命令即可：
npm install basscss-position
安装完成后，我们就可以开始使用 basscss-position 了。
设置元素的位置
首先，让我们看一下如何使用 basscss-position 来设置元素的位置。以下是关于位置相关的 CSS 类名：
.pos-static: 静态定位，元素在文档流中，并遵循自己的位置大小。.pos-relative: 相对定位，元素相对于其标准位置进行定位，不会从文档流中移除。.pos-absolute: 绝对定位，元素从文档流中移除，并相对于定位上级元素进行定位。.pos-fixed: 固定定位，元素从文档流中移除，并相对于视窗进行定位。
例如，我们可以为页面中的一个 div 元素添加 .pos-relative 类名，让它相对于其标准位置进行一些微调：
<div class="pos-relative"></div>
设置元素的尺寸
除了位置，basscss-position 还提供了许多用于设置元素尺寸的 CSS 类名。
.stretch: 元素拉伸至父元素的全部宽/高度。.width-100: 元素宽度为 100%。.max-width-100: 元素的最大宽度为 100%。.height-100: 元素高度为 100%。.max-height-100: 元素的最大高度为 100%。.width-50: 元素宽度为 50%。.height-50: 元素高度为 50%。.width-33: 元素宽度为 33.333%。.width-25: 元素宽度为 25%。.width-20: 元素宽度为 20%。.width-10: 元素宽度为 10%。.width-auto: 元素宽度为自适应。.height-auto: 元素高度为自适应。
我们可以像下面这样添加类名来设置元素的宽度和高度：
<div class="width-50 height-50"></div>
设置元素的对齐方式
basscss-position 还提供了一些用于设置元素对齐方式的 CSS 类名。
.center: 元素水平垂直居中。.align-center: 元素垂直居中。.align-baseline: 元素对齐基线。.align-top: 元素顶部对齐。.align-middle: 元素中部对齐。.align-bottom: 元素底部对齐。.justify-center: 元素水平居中。.justify-left: 元素左对齐。.justify-right: 元素右对齐。
我们可以在需要对齐的元素上，如下添加对应的类名：
<div class="center"></div>
实例演示
下面是一个示例演示，展示如何使用 basscss-position 创建一个响应式布局。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------
----- --------------------------------------------------- -----------------
-------
---------- -
------ ----
------- - -----
-
---- -
----------------- -----
------ -----
----------- -------
-------- -----
-------------- -----
-
---------- -
------- -----
-
----------- -
------- ------
-
---------- -
------- ------
-
--------
-------
------
---- ------------------
---- ------------------- -----------
---- ---------- --------------------
------
---- ------------------- --------- --------- ---------- -------------
---- ---------- ------ --------------------
------
---- ------------------- --------- ------------ ---------- -------------
---- ---------- ------ -----------------------
------
---- ------------------- ---------- --------- --------------
---- ---------- ------ ---------------------
------
---- ------------------- ----------- --------- --------------
---- ---------- ------ ----------------------
------
---- ------------------- --------- --------- ------------ -------------
---- ---------- ------ -------------------------
------
---- ------------------- --------- ------------ ----------- --------------
---- ---------- ------ -----------------------
------
------
-------
-------效果如下所示：
小结
通过本文，我们学习了 basscss-position 的相关内容。basscss-position 可以让我们更快速地编写出响应式的布局，从而节省编写自定义 CSS 的时间。当然，如果你需要更为复杂的布局，还是需要自己来手动编写样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedd613bb4e78292a6fb8a3