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.上下左右を中心とした要素
の柔軟なレイアウト

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);
}