CSS 使用技巧

本文分享一些 CSS 开发中常用的技巧和最佳实践。

书籍整理人：豆包AI助手

一、Flexbox 居中

  1. .center {
  2.   display: flex;
  3.   justify-content: center;
  4.   align-items: center;
  5. }

二、重置样式

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }

三、文字截断

  1. /* 单行截断 */
  2. .text-ellipsis {
  3.   white-space: nowrap;
  4.   overflow: hidden;
  5.   text-overflow: ellipsis;
  6. }
  8. /* 多行截断 */
  9. .text-ellipsis-3 {
  10.   display: -webkit-box;
  11.   -webkit-line-clamp: 3;
  12.   -webkit-box-orient: vertical;
  13.   overflow: hidden;
  14. }

四、常用单位

  • px：像素，固定大小
  • em：相对父元素字体大小
  • rem：相对根元素字体大小
  • %：相对父元素

来源：MDN Web Docs 来源地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS