首页 > 其他分享 >防御式CSS—设置组件间距

防御式CSS—设置组件间距

时间:2023-12-03 15:15:50浏览次数:40  
标签:间距 标题 按钮 组件 文本 CSS

我们开发人员需要考虑不同的内容长度。这意味着,应该向组件添加间距,即使它看起来不需要。

在这个例子中,我们在右侧有一个章节标题和一个操作按钮。目前,它看起来不错。但是让我们看看当标题更长时会发生什么。

注意到文本离操作按钮太近了吗?你可能会想到多行包装,但我会在另一节谈到这一点。现在,让我们把注意力集中在间距上。

如果标题有空格和文本截断,我们不会看到这样的问题。

.section__title {
    margin-right: 1rem;
}

标签:间距,标题,按钮,组件,文本,CSS
From: https://www.cnblogs.com/Jannik/p/17872976.html

相关文章

  • 防御式CSS—网格布局中的列自动分配
    当使用CSSgridminmax()函数时,重要的是要决定使用auto-fit或auto-fill关键字。如果使用不当,可能会导致意想不到的结果。当使用minmax()函数时,auto-fit关键字将扩展网格项以填充可用空间。而auto-fill将保留可用空间,而不改变网格项的宽度。也就是说,使用auto-fit......
  • 防御式CSS—长文本省略
    这是一份名单,现在看起来很完美。然而,由于这是用户生成的内容,我们需要小心如何保护布局,以防内容过长。如下图所示:在这种布局中,一致性很重要。为了实现这一点,我们可以简单地使用text-overflow及其朋友来截断名称。.username{white-space:nowrap;overflow:hidden;......
  • 防御式 CSS—处理图片失真
    当我们无法控制网页上图像的长宽比时,最好提前考虑并在用户上传与长宽比不一致的图像时提供解决方案。在下面的例子中,我们有一个带有照片的卡片组件。看起来不错当用户上传不同大小的图像时,它会被拉伸。情况不妙看看图像是如何被拉伸的!最简单的解决方法是使用CSSobject-fit......
  • 防御式CSS—Flexbox 折行
    CSSflexbox是当今最有用的CSS布局功能之一。很容易将display:flex添加到包装器中,并使子项彼此相邻排序。这是一个典型的例子。我们有一组选项,应该显示在彼此旁边。.options-list{display:flex;}当空间不足时,将出现水平滚动。这应该是意料之中的,实际上并不是一个“......
  • 企业级 Web 应用里使用 CSS 调整应用外观的一些例子
    笔者在日常工作中曾经负责过一些企业级Web应用的负责和开发,也曾经指导过一些客户的二次开发人员,通过各种方式对我们发布的企业级Web应用进行一些定制开发。所谓企业级前端应用,是指为大型企业或组织开发的前端应用,这些应用具有超过一般2C软件的技术复杂度,高度定制化和可扩展......
  • CSS进阶3-transform 动画-渐变(线性渐变、镜像渐变)-关键帧
      1.动画介绍:改变盒子在平面内的形态(平移、缩放、旋转、倾斜)属性: 平移:transform:translate(值1,值2);(默认为X轴,translateY--下移) ——平移依然在原来文档流。  移动:transform:translate......
  • Vue3 + TS 搭建组件库
    开始在编写组件库之前,我们首先要对整个代码项目的解构有一个清晰的划分,以及用到的大多数规范,和代码风格有一个约定,这篇文章主要就围绕着下面图中的几个问题展开描述一下。1、搭建monorepo环境我们使用pnpm当做包管理工具,用pnpmworkspace来实现monorepo。可以看下面参考文章......
  • HTML5 Video视频组件支持的视频编码格式
    一、HTML5Video视频格式与浏览器的支持情况当前,<video>元素支持三种视频格式:MP4,WebM,和Ogg:浏览器MP4WebMOggInternetExplorerYESNONOChromeYESYESYESFirefoxYESYESYESSafariYESNONOOperaYES(从Opera25起)YESYESMP4=带有......
  • CSS技巧:从高度0过渡到自动高度
    本文翻译自CSStrick:transitionfromheight0toauto!,作者:FrancescoVetere,略有删改。如果你在CSS上花了足够长的时间,很可能你曾尝试过从height:0到auto的平滑过渡。。。却发现它不起作用!......
  • css选择器
    这篇文章主要总结了css选择器的相关知识1.元素选择器<divid="container"><pclass="text"></p><h1class="titletext"></h1><div>//选中p元素p{font-size:12px;}2.群组选择器//html同上,同时选中p和h1元素p,h1{c......