实战中优雅实现CSS样式

很内向坐车都坐车顶上
138 阅读3分钟

🫱 前言

因为一直做内部平台的前端，发现自己对CSS实在苦手...（罗永浩：又不是不能用） 经常性地尝试半天才能达到预期效果。 开个新坑，记录一下对各个属性的理解和实现经验，加油，希望成为万字长文～

sticky 比 fixed 更友好

宽度设置

fixed相对于窗口，如果不设置宽度，会发现宽度由内容自动撑开，如果设置宽度为100%，会发现是整个浏览器宽度的100%。此时，如果想沿袭父元素的宽，那么方式如下：

parentWidth = document.getElementById('parent').offsetWidth;
document.getElementById('child').style.width = parentWidth + 'px';

position: sticky; 则是一种混合模式，它基于用户的滚动位置在 relative 和 fixed 定位之间切换。当使用 position: sticky; 时，元素会根据其最近的具有滚动机制的祖先元素和其在文档流中的位置来进行定位。它是沿袭父元素宽度的。

使用区别

如果我们希望一个元素相对父元素的顶部位置为-10px，那么实现区别如下：

position: sticky;
top: -10px;

position: fixed;
margin-top: -10px;

line-height 比 height 更方便

当我们只有有限内容填充，例如 header，一般只会给出当前目录名称和返回按钮。不设置height,直接设置line-height,元素就会自动撑开盒子，并且自动居中。

vertical-align使用的诸多坑

使用element-ui中el-rate打分器时，发现✨始终无法居中，看见el-rate__item默认样式里面有一行：

vertical-align: middle;
image.png image.png

这个中线也不咋中啊！🫱理解vertical-align: middle;改成baseline就好了：

// 贯穿，覆盖样式
/deep/.rate{
    .el-rate__item{
        vertical-align: baseline;
    }
}

element-ui的默认样式

写了这么一段代码:

<el-button
    @click="handleItem('review', scope.row)"
    class="table_btn"
    type="text"
    size="small"
    >a功能</el-button
  >
  <el-button
    @click="handleItem('edit', scope.row)"
    type="text"
    size="small"
    class="table_btn"
    >b功能</el-button
  >
  <el-popconfirm
    confirm-button-text="确定"
    cancel-button-text="取消"
    icon="el-icon-warning-outline"
    icon-color="red"
    title="您是否确认删除当前条目，当前操作无法回退？"
    @confirm="handleItem('delete', scope.row)"
  >
    <el-button
      slot="reference"
      type="text"
      size="small"
      class="table_btn"
      >删除</el-button
    >
  </el-popconfirm>

并配置样式：

.table_btn{
  margin-right: 10px;
}

心里想：每个按钮都离下一个10px，很完美不是～ 结果效果如图：

image.png

check样式发现：

image.png 原来，element-ui的默认样式中，会给紧挨着的两个button中的第二个button添加一个margin-right: 10px;，由于第三个删除按钮有popconfirm，被span包裹，所以不生效。 因此改成如下就可以了：

.table_btn{
  margin-left: 0px;
  margin-right: 10px;
}
image.png

ant-design的默认样式

在写table的时候，发现如果省略，展示的悬浮窗效果如图：

image.png 不仅字体小，还不灵敏，hover展示很慢，原来是加的浏览器自带的title属性,无法通过css进行修改，只能js修改

image.png

相比起来，element-ui使用tooltip，能修改样式

image.png

为了完整地展示数据，最简单方法是把省略关闭就行。

ellipsis: false

或者通过tooltip来覆盖：

<template #bodyCell="{ column, record, index }">
    <a-tooltip v-else :title="record[column.key]" placement="left">
        <span>{{ record[column.key] }}</span>
    </a-tooltip>
</template>

tailwindcss使用

Tailwind CSS 提供了大量的实用工具类，用于快速构建界面。 className = 'mr-4'就是右外边距为4px。

启用flex布局的时候：

  • flex: 启用 Flexbox。
  • flex-row, flex-col: 定义主轴方向。
  • justify-{content}: 主轴对齐方式，如 justify-center。
  • items-{alignment}: 交叉轴对齐方式，如 items-center。

对于文本：

  • text-{size}: 字体大小，如 text-sm、text-lg。
  • font-{weight}: 字体粗细，如 font-bold、font-medium。
  • text-{color}: 文本颜色，如 text-red-500。

例如：

className="flex justify-center items-center mb-2 text-sm"

就是水平垂直居中、底下边距为2px、字体为小号的简写形式。

avatar
文章
阅读
粉丝