本文已参与「新人创作礼」活动，一起开启掘金创作之路。--前端开发中常用的 CSS 技巧

锦鲤附身
90 阅读3分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。--前端开发中常用的 CSS 技巧

1. 清除浮动

在很多情况下，我们会使用浮动来让元素横向排列，但是当父元素中有多个浮动的子元素时，它可能会造成布局问题。为了解决这个问题，我们可以使用一个简单的技巧来清除浮动：

Copy code
.clearfix::after {
  content: "";
  clear: both;
  display: block;
}

然后，你可以在父元素中使用 clearfix 类来清除浮动：

Copy code
<div class="clearfix">
  <div class="float-left">Floated element</div>
  <div class="float-left">Floated element</div>
</div>
  1. 响应式布局

在移动端开发中，我们经常需要设计响应式布局，以便在不同的屏幕尺寸下都能获得良好的用户体验。这里有一个简单的技巧，可以让你快速实现响应式布局：

Copy code
.container {
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .container {
max-width: 100%; 
} }

在上面的代码中，我们使用了 @media 查询来设置响应式布局。当屏幕尺寸小于等于 768px 时，.container 元素的最大宽度会被设置为 100%。这样，你就可以在不同的屏幕尺寸下提供良好的用户体验了。

  1. 遮罩效果

有时候，我们可能需要在图片上添加遮罩效果，以便在图片上添加文字或其他内容。这里有一个简单的技巧，可以让你快速实现遮罩效果：




```css
.mask {
  position: relative;
}

.mask::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.mask .content {
  position: relative;
  z-index: 1;
}

然后，你可以在 HTML 中使用 mask 类来实现遮罩效果：

Copy code
<div class="mask">
  <img src="image.jpg" alt="">
  <div class="content">
    <h1>Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

在上面的代码中，我们使用 ::before 伪元素来创建一个遮罩层，然后使用 z-index 属性将内容层放在遮罩层的上方。这样，你就可以在图片上添加文字或其他内容，并且它们会被遮罩层遮盖住。

  1. 垂直居中

有时候，我们需要让元素在父元素中垂直居中。这里有一个简单的技巧，可以让你快速实现垂直居中：

Copy code
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

然后，你可以在 HTML 中使用 parent 类和 child 类来实现垂直居中：

Copy code
<div class="parent">
  <div class="child">Content</div>
</div>

在上面的代码中，我们使用了 position 和 transform 属性来实现垂直居中。通过将 child 元素的 top 属性设置为 50%，然后使用 transform: translateY(-50%) 将它向上移动 50% 的距离

5. 文本溢出省略号

有时候，我们可能希望文本在超出容器时自动添加省略号。这里有一个简单的技巧，可以让你快速实现文本溢出省略号： 
Copy code
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

然后，你可以在 HTML 中使用 ellipsis 类来实现文本溢出省略号：

Copy code
<div class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

在上面的代码中，我们使用了 white-space、overflow 和 text-overflow 属性来实现文本溢出省略号。通过将 white-space 属性设置为 nowrap，并将 overflow 属性设置为 hidden，我们可以确保文本不会换行，并且当文本超出容器时会被隐藏。最后，通过将 text-overflow 属性设置为 ellipsis，我们可以在文本超出容器时在文本末尾添加省略号。

avatar
文章
阅读
粉丝