Skip to main content

CSS Tricks

· 7 min read

CSS 的小技巧总结和知识点补充

文本居中​

将一段文字置于容器的水平中点，只要设置 text-align 属性即可。

.container {
  text-align: center;
}

如果想要文本可以垂直居中，那么需要将存放文本的容器的行高 line-height 等于容器高度。

.container {
  width: 200px;
  height: 200px;
  line-height: 200px;
}

需要注意的上述方法只适用于单行文本的垂直居中，如果多行文本垂直居中，可以将容器设置为 table-cell，然后调整 vertical-align。

.container {
  width: 200px;
  height: 200px;
  display: table-cell;
  vertical-align: middle;
}

容器居中​

想让一个容器水平居中，可以先为该容器设置一个 明确宽度，然后将 margin 的 水平值 设为 auto 即可。

.container {
  width: 760px;
  margin: 0 auto;
}

如果想让一个子容器水平垂直居中，比如有一大一小两个容器，请问如何将小容器水平垂直居中于大容器中？

<div class='big'>
  <div class='small'></div>
</div>

这是一个非常常见的需求，有非常多的解决方案，下面依次来讲解。

子容器使用绝对定位

.big {
    width: 500px;
    height: 500px;
  position: relative;
  
  .small {
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    
    position: absolute;
    top: 50%;
    left: 50%;
  }
}

使用 calc() 函数优化，可以避免使用负外边距。

.small {
  width: 100px;
  height: 100px;

  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
}

也可以使用 transform 进行位移。

.small {
  width: 100px;
  height: 100px;

  position: absolute;
  top: 50%;
  left: 50%;
  
  transform: translate(-50%, -50%);
}

flex 布局

最常用的就是给 flex 容器设置 justify-content 和 align-items。

.big {
    width: 500px;
    height: 500px;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  .small {
    width: 100px;
    height: 100px;
  }
}

实际上 flex 容器解决了标准文档流中的许多问题，比如 margin: auto 只会填充水平方向的外边距，而垂直方向的外边距是被忽视掉的，在 flex 容器中就能设置项目 margin: auto 来达到水平垂直居中。

.big {
    width: 500px;
    height: 500px;
  display: flex;
  
  .small {
    width: 100px;
    height: 100px;
    margin: auto;
  }
}

当然在标准文档流中也可以使用下面的方式来达到 margin: auto 水平垂直居中的效果，算是一种奇技淫巧吧，不是很推荐。

.big {
    width: 500px;
    height: 500px;
  position: relative;
  
  .small {
    width: 100px;
    height: 100px;
    margin: auto;
    
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}

隐藏元素​

opacity

该属性用于调整一个元素的不透明度，设置 opacity: 0 则表示该元素完全透明。

visibility

该属性用于设置一个元素是否可见，默认值为 visible，取值 hidden 时，可以让元素不可见，但是占位依旧存在。

dispaly

使用 display: none 时，相当于元素从 html 中被删除了（实际上存在），不会被渲染到页面中，因此占位也就不存在了。

鼠标样式​

具体可以参考 cursor（鼠标手型）属性。

去掉表单元素聚焦时的 outline​

对于文本输入框，比如 input、textarea，当元素聚焦时，元素周围就会出现一个聚焦轮廓。

pic.nm

另外，对于 button 元素，我们在网页中使用 tab 键也可以切换按钮的选中，被选中的按钮周围也会出现一个轮廓。

pic.ssm

实际上这些样式都是 outline 属性的效果，我们只需要将其设置为 none 就不会出现轮廓了。

禁止 textarea 可拖拽缩放​

对于一个普通的 textarea 元素，它的右下角实际上是可以进行拖拽来改变它的大小的。

pic.sm

使用 resize: none 可以禁止缩放。

css 变量与 sass 变量相互转换​

sass 定义的变量赋值给原生 css 变量时，需要给 sass 变量套上 #{}。

:root {
  $sass-color: red;
  --css-color: #{$sass-color};

  color: var(--css-color);
}

css 原生变量赋值给 sass 变量，需要调用 var()。

:root {
  --css-color: red;
  $sass-color: var(--css-color);

  color: $sass-color;
}

图片宽度自适应​

font 缩写​

font-size 基准​

文字溢出省略号​

单行文字溢出

div {
  white-sapce: nowrap; /* 强制让文本单行显示 */
  overflow: hidden; /* 让溢出的文本隐藏 */
  text-overflow: ellipsis; /* 让无法完整显示的文本用省略号代替 */
}

这样 div 的一行文本如果超出了它的宽度大小，文本末尾就会用省略号代替。

多行文字溢出

div {
  overflow: hidden;
  text-overflow: ellipsis;
  
  display: -webkit-box;   
  -webkit-box-orient: vertical; /* 检索盒模型子元素排列方式 */ 
  -webkit-line-clamp: 2; /* 让第几行文本显示省略号 */
}

因使用了 WebKit 的 CSS 扩展属性，该方法适用于 WebKit 浏览器及移动端。

请注意，如果你的 -webkit-line-clamp 设置为 2，那么会让文本第二行出现省略号，但是第 3 行的文本依旧显示，所以需要配合盒子的高度设置一起使用，否则就会出现下面这个样子。

CSS 画三角形​

精灵图​

作用

  • 减小图片占用内存的大小，提升用户请求图片的速度，比如一张有规律的背景图片，我们可以只剪切一小部分，然后利用 background-repeat 属性来平铺背景图片
  • 有效的减少服务器接收和发送请求的次数，提高页面加载速度。我们可以把一个网站中需要用到的所有图片内容全部整合到一张图片中，然后利用 background-position 来定位需要的内容即可

原理

应用

Reference​