HTML和CSS中常用的规范方法总结

这是什么

我总结了我在 CSS 中经常使用的规范

图片

去除图片下方的空白

将display: block 添加到您的图像

见笔无标题由 Kabechiyo (@kabechiyo13) 上代码笔.

设置框的纵横比

在图片上设置aspect-ratio

像这样

aspect-ratio: 16/9;

更改图像的纵横比

指定object-fit: conain 或object-fit: cover

• contain
  • 缩放以适应内容框，同时保持纵横比
• cover
  • 缩放以填充整个内容框，同时保持纵横比

见笔对象拟合由 Kabechiyo (@kabechiyo13) 上代码笔.

布局

垂直、水平对齐并以尽可能少的线居中

像这样

display: grid;
place-items: center;

带有position: absolute 的元素被跳过

在父元素中指定position: relative

如果指定position: absolute，并指定top或left等位置，则基本上是根据窗口确定位置。

如果为父元素指定position: relative，则该父元素将成为参考位置。

见笔落下由 Kabechiyo (@kabechiyo13) 上代码笔.

z-index 不起作用时该怎么办

将position: relative 添加到要指定的元素

看笔z-index由 Kabechiyo (@kabechiyo13) 上代码笔.

当粘性在网格上不起作用时该怎么办

将align-items: start; 添加到父元素

或者为你想要sticky的元素指定height

? 将position: sticky 指定为带有网格的元素的子元素不起作用

看笔无标题由 Kabechiyo (@kabechiyo13) 上代码笔.

? 将align-items: start; 添加到父元素到sticky

见笔黏由 Kabechiyo (@kabechiyo13) 上代码笔.

用“...”省略溢出的文本

1 行

像这样

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

2行或更多

像这样

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

看笔文本由 Kabechiyo (@kabechiyo13) 上代码笔.

响应式

将元素与左右边缘对齐

在父元素中指定display: flex 和justify-content: space-between;

见笔无标题由 Kabechiyo (@kabechiyo13) 上代码笔.

元素溢出时换行

像这样

display: flex;
flex-wrap: wrap;
gap: 4px 8px;

flex-wrap: wrap; 使 flexbox 子元素显示在多行上，gap 确定元素之间的填充。

见笔裹由 Kabechiyo (@kabechiyo13) 上代码笔.

【常用响应式响应】不要超过一定大小

比如屏幕宽度为1280px以下时，内容以全屏宽度显示，大于1280px时，内容不宽于一定宽度。

通过在内容中指定width: 100%;和max-width，当父元素小于一定宽度时会全宽显示，同时防止内容大于一定宽度。

? 调整容器大小将使内容保持恒定宽度从某个宽度

见笔反应灵敏由 Kabechiyo (@kabechiyo13) 上代码笔.

可访问性

跳过说话图标字体

aria-hidden: true

允许大声朗读图标字体

aria-label="読み上げて欲しい内容"

滚动系统

仅在元素溢出时显示滚动条

使用overflow: auto; 而不是overflow: scroll;

如果你指定overflow: scroll;，滚动条会一直显示，所以如果你想只在元素突出时显示滚动条，指定overflow: auto;。

?当我调整容器大小时，滚动条总是出现在顶部，而当容器很大时，底部的滚动条不会出现。

看笔无标题由 Kabechiyo (@kabechiyo13) 上代码笔.

滚动到末尾时防止滚动下一个容器

正常情况下，当页面中有模态框等位置固定的滚动内容时，当内容完全滚动时，下面的内容才会滚动。

这个，滚动链您可以通过指定 は、CSSでoverscroll-behavior: contains;` 来防止这种情况发生。

? overscroll-behavior: contain;none

见笔滚动行为由 Kabechiyo (@kabechiyo13) 上代码笔.

?overscroll-behavior: contain;是

见笔过度滚动行为：包含；由 Kabechiyo (@kabechiyo13) 上代码笔.

平滑滚动

为滚动容器指定scroll-behavior: smooth;

见笔平滑滚动由 Kabechiyo (@kabechiyo13) 上代码笔.

滚动捕捉

指定scroll-snap-type 和scroll-snap-align

scroll-snap-type 是滚动时的对齐设置，scroll-snap-align 是设置滚动时对齐位置的属性。

对于滚动容器，指定滚动方向和对齐方式。

• 滚动方向
  • x: 横向滚动
  • y: 垂直滚动
  • both: 两者都有
• 滚动时如何捕捉
  • mandatory: 如果不滚动则捕捉
  • proximity：如果要捕捉的位置很近，则捕捉，而不是在滚动期间

像这样

scroll-snap-type: x proximity;

对于滚动容器的子元素，在捕捉时指定位置

像这样

scroll-snap-align: center;

• 捕捉位置
  • start: 捕捉到顶部位置
  • end: 在尾部位置捕捉
  • center ：在中心位置捕捉

顶部指定mandatory，底部指定proximity。

如果您滚动到该数字并释放它，则很容易看出区别，但mandatory 在您释放它的任何地方都会捕捉，而如果捕捉点很远，proximity 不会捕捉。

见笔无标题由 Kabechiyo (@kabechiyo13) 上代码笔.

输入系统

更改文本区域的高度

加rows

见笔无标题由 Kabechiyo (@kabechiyo13) 上代码笔.

更改占位符颜色

将placeholder 属性添加到textarea 并在CSS 中指定使用伪元素::placeholder

看笔无标题由 Kabechiyo (@kabechiyo13) 上代码笔.

文本

确定文本换行的位置

将<wbr>放在要换行的位置，并指定word-break: keep-all;和overflow-wrap: break-word;

见笔无标题由 Kabechiyo (@kabechiyo13) 上代码笔.

确定换行位置，使文本不溢出

• overflow-wrap: break-word;
  • 仅当整个单词不能在没有溢出的情况下放置在行时才换行
  • 使用 Flexbox 或 position:absolute 时必须指定 width
  • 必须为表格元素指定table-layout: fixed;
• word-break: break-all;
  • 文本溢出容器时换行
  • 即使在英文单词中间也会出现换行符

看笔无标题由 Kabechiyo (@kabechiyo13) 上代码笔.

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308627771.html