CSS使用技巧整理本文已参与「新人创作礼」活动，一起开启掘金创作之路。垂直水平居中水平垂直居中的几种方式-案例（1

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

垂直水平居中

水平垂直居中的几种方式-案例

（1）margin 方式

margin 方式可以实现盒子的水平居中，但不能实现盒子的垂直居中。

（2）position 方式

position 方式可以实现盒子的水平垂直居中，但是需要知道盒子本身的尺寸。

（3）两种混合方式

将 margin 方式和 position 方式混合，既可以实现盒子的水平垂直居中，又不需要知道盒子本身的尺寸。

文字溢出显示省略号

（1）一行超出显示省略

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

（2）多行超出显示省略号

overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

用定位的方式显示小数点。

overflow: hidden;
position: relative;
max-height: 90px;
&::after {
  position: absolute;
  right: 0;
  bottom: 0;
  padding-left: 40px;
  background: linear-gradient(to right, transparent, #fff 50%);
  content: "...";
}

显示的行数由line-clamp样式的值决定。

边框颜色渐变

（1）直角边框颜色渐变

（2）圆角边框颜色渐变

文本渐变色

（1）background 方法

background-clip 属性取值：

border-box：背景剪裁到边框盒；
padding-box：背景剪裁到内边距框；
content-box：背景剪裁到内容框；

它并没有取值为 text 的情况，可见还存在兼容性问题，目前并不是所有浏览器都支持

（2）mask 属性

关于 mask 属性介绍，可参考mask 样式属性

什么是 BFC

BFC，块级格式化上下文。BFC 是一个独立的布局环境，其中元素的布局不受外界的影响。

要创建一个 BFC 只需要满足以下 4 个 CSS 条件之一即可：

1 浮动：float 值为 left 或者 right； 2 定位：position 值为 absolute 或者 fixed； 3 溢出：overflow 值为 auto、hidden 或者 scroll； 4 显示模式：display 值为 inline-block、table、flex；

BFC 的用途：

1 阻止盒子外边距折叠：若两个相邻元素处于不同的 BFC 中，即可避免外边距折叠。 2 清除浮动造成的影响。

屏幕自适应

将样式中的固定值改为相对值；
使用栅格系统（流式网格布局）
使用媒体查询
<meta name=”viewport” content=”width=device-width,initial-scale=1,user-scalable=no”>

图片未加载前自动撑开元素高度

在移动端开发中，有一些元素是根据图片高度来自动撑开的，高度不能写死（如轮播图的外层元素）。在网络较慢的情况下，图片加载需要一些时间，此时该元素的高度没有被撑开，在网页布局上会有一些不想看到的效果。这种情况我们可以设置如下样式来设置该元素的高度：

.wrapper {
  overflow hidden;
  width 100%;
  height 0;
  padding-bottom 26.66%;// 这个数值是图片的高宽比，即 高/宽
  background #eee;
 }

上面代码中，padding-bottom 的取值是图片的高宽比（即，高/宽），它会根据 width值的26.66%计算，最终元素的高度会和图片加载完成后的高度一致。

也可以使用vw的方法，但在一些浏览器可能有兼容性问题：

.wrapper {
  width 100%;
  height 26.66vw;
  background #eee;
}

vw，viewpoint width，视窗宽度，1vw=视窗宽度的 1%

vh，viewpoint height，视窗高度，1vh=视窗高度的 1%

更多 CSS 单位。

页面输入框问题

解决 google 浏览器记住密码导致输入框样式改变（变成淡黄色背景）

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #ededed !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  background-color: transparent;
  background-image: none;
  transition: background-color 50000s ease-in-out 0s;
}
input {
  background-color: transparent;
}

解决输入框历史记录导致的输入框样式问题

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #ededed !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  background-color: transparent;
  background-image: none;
  transition: background-color 50000s ease-in-out 0s;
}

页面滚动条设置

::-webkit-scrollbar 滚动条整体
::-webkit-scrollbar-thumb 滚动条里面的滑块
::-webkit-scrollbar-track 滚动条的轨道
::-webkit-scrollbar-button 滚动条的轨道的两端按钮
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 滚动条边角
::-webkit-resizer 定义右下角拖动块的样式

CSS使用技巧整理