CSS 通用样式总结

CSS 通用样式总结

1. CSS中英文样式换行

p {
  /* 两边对齐 */
  text-align: justify;
  /* normal-默认 break-all-允许在单词内换行 keep-all在半角空格或连字符处换行 */
  word-break: normal;
  /* normal-允许内容顶开或溢出指定的容器边界  break-word内容再边界内换行 */
  overflow-wrap: break-word;
  /* CSS3中将 word-wrap 改名为 overflow-wrap，同时都设置作向前兼容 */
  word-wrap: break-word;
  /* hyphens 换行时显示连字符连接单词，谷歌和IE不支持，火狐支持  */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

2. 元素上下左右居中
flex布局

div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

绝对定位布局

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

3. 超过n行文字显示省略号

.overflow-style {
  overflow: hidden;
  text-overflow:ellipsis;
  // white-space: nowrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; // 设置了2行
  line-height: 18px;
}

4. 浏览器滑动滚动条样式设计

// 谷歌浏览器滚动条样式
::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(231, 231, 231, 0.5);
  border-radius: 5px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #ececec;
  -webkit-box-shadow: inset 0 0 6px rgba(34, 153, 250, 0.5);
  box-shadow: inset 0 0 6px rgba(34, 153, 250, 0.1);
}
// ::-webkit-scrollbar-thumb:window-inactive {
//   background: rgba(255, 0, 0, 0.4);
// }
// 火狐浏览器滚动条样式
* {
  scrollbar-color: #ececec #f7f7f9; /* 滑块颜色  滚动条背景颜色 */
  scrollbar-width: thin; /* 滚动条宽度有三种：thin、auto、none */
}

5. 样式计算

div {
  width: calc(100vw - 20px);
  height: calc(100vh - 20px);
}