CSS
在开发项目中，修改输入占位符样式，多行文本溢出，隐藏滚动条，修改光标颜色，水平和垂直居中等等，这些都是非常熟悉的开发场景！前端开发者几乎每天都会和它们打交道，因此在这里给大家总结了20个超级实用的CSS技巧。

1、解决图片5px间距问题

是否经常遇到图片底部多出5px间距的问题？不着急，这里有4种方法可以解决此问题。

解决方案 1：将 font-size: 0 设置为父元素

演示地址：https://codepen.io/Fcant/pen/qBKgVYL
具体实现代码如下：
HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>image 5px spacing</title>
  8. </head>
  9. <body>
  10.   <div class="img-container">
  11.     <img src="https://cdn-images-1.medium.com/max/1600/0*MU3iBxNwssZWt6Tj" alt="">
  12.   </div>
  13. </body>
  14. </html>

CSS

  1. html,body{
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. .img-container{
  7.   background-color: lightblue;
  8.  /* Key Style */
  9.   font-size: 0;
  10. }
  12. img{
  13.   width: 100%;
  14. }

解决方案 2：将 display: block 设置为 img

演示地址：https://codepen.io/Fcant/pen/bGKzYKw
具体实现代码如下：
HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>image 5px spacing</title>
  8. </head>
  9. <body>
  10.   <div class="img-container">
  11.     <img src="https://cdn-images-1.medium.com/max/1600/0*MU3iBxNwssZWt6Tj" alt="">
  12.   </div>
  13. </body>
  14. </html>

CSS 

  1. html,body{
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. .img-container{
  7.   background-color: lightblue;
  8. }
  10. img{
  11.   width: 100%;
  12.   /* Key Style */
  13.   display: block;
  14. }

解决方案 3：将 vertical-align: bottom 设置为 img

演示地址：https://codepen.io/Fcant/pen/ZERwaRv
具体实现代码如下：
HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>image 5px spacing</title>
  8. </head>
  9. <body>
  10.   <div class="img-container">
  11.     <img src="https://cdn-images-1.medium.com/max/1600/0*MU3iBxNwssZWt6Tj" alt="">
  12.   </div>
  13. </body>
  14. </html>

CSS

  1. html,body{
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. .img-container{
  7.   background-color: lightblue;
  8. }
  10. img{
  11.   width: 100%;
  12.   /* Key Style */
  13.   vertical-align: bottom;
  14. }

解决方案 4：给父元素设置line-height: 5px

演示地址：https://codepen.io/Fcant/pen/LYrqOrq
具体实现代码如下：
HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>image 5px spacing</title>
  8.   </head>
  9.   <body>
  10.     <div class="img-container">
  11.       <img src="https://cdn-images-1.medium.com/max/1600/0*MU3iBxNwssZWt6Tj" alt="">
  12.     </div>
  13.   </body>
  14. </html>

CSS

  1. html,body{
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. .img-container{
  7.   background-color: lightblue;
  8.   /* Key Style */
  9.   line-height: 5px;
  10. }
  12. img{
  13.   width: 100%;
  14. }

2、元素高度与窗口相同

演示地址：https://codepen.io/Fcant/pen/vYrbWzB
点击查看【codepen】
如何让元素和窗口一样高？示例代码如下：

  1. <div class="app">
  2.   <div class="child">
  4.   </div>
  5. </div>
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. .child {
  7.   width: 100%;
  8.   /* Key Style */
  9.   height: 100vh;
  10.   background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
  11. }

3、修改输入占位符样式

演示地址：https://codepen.io/Fcant/pen/WNyPXgp
点击查看【codepen】
第一个修改了，第二个没有修改。

  1. <input type="text" class="placehoder-custom" placeholder="Please enter user name to search">
  2. <input type="text" placeholder="Please enter user name to search">
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. input {
  7.   width: 300px;
  8.   height: 30px;
  9.   border: none;
  10.   outline: none;
  11.   display: block;
  12.   margin: 15px;
  13.   border: solid 1px #dee0e9;
  14.   padding: 0 15px;
  15.   border-radius: 15px;
  16. }
  17. /* Key Style */
  18. .placehoder-custom::-webkit-input-placeholder {
  19.   color: #babbc1;
  20.   font-size: 12px;
  21. }

4、使用:not选择器

演示地址：https://codepen.io/Fcant/pen/MWXLOqr
除了最后一个元素之外的所有元素都需要一些样式，使用 not 选择器会非常容易。
如下图：最后一个元素没有底边框。
点击查看【codepen】

  1. <ul>
  2.   <li>
  3.     <span>cell</span>
  4.     <span>content</span>
  5.   </li>
  6.   <li>
  7.     <span>cell</span>
  8.     <span>content</span>
  9.   </li>
  10.   <li>
  11.     <span>cell</span>
  12.     <span>content</span>
  13.   </li>
  14.   <li>
  15.     <span>cell</span>
  16.     <span>content</span>
  17.   </li>
  18. </ul>
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. html,
  7. body {
  8.   background-color: #f7f8fa;
  9.   height: 100%;
  10. }
  12. ul,
  13. li {
  14.   list-style: none;
  15.   padding: 0 15px;
  16.   font-size: 14px;
  17. }
  19. ul {
  20.   margin-top: 10px;
  21.   background-color: #fff;
  22. }
  24. li {
  25.   height: 32px;
  26.   display: flex;
  27.   align-items: center;
  28.   justify-content: space-between;
  29. }
  30. /* Key Style */
  31. li:not(:last-child) {
  32.   border-bottom: 1px solid #ebedf0;
  33. }
  35. li span:first-child {
  36.   color: #323233;
  37. }
  39. li span:last-child {
  40.   color: #969799;
  41. }

5、使用flex布局智能固定一个元素在底部

演示地址：https://codepen.io/Fcant/pen/JjZxOaw
点击查看【codepen】
当内容不够时，按钮应该在页面底部。当有足够的内容时，按钮应该跟随内容。当遇到类似问题时，使用flex实现智能布局！
20 个超级实用的 CSS 技巧 - 图1
代码如下：

  1. <div class="container">
  2.   <div class="main">I'm fatfish, 6 years of programming experience, like front-end, writing
  3.     and making friends,looking forward to becoming good friends with you.</div>
  4.   <div class="footer">rule</div>
  5. </div>
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. .container {
  7.   height: 100vh;
  8.   /* Key Style */
  9.   display: flex;
  10.   flex-direction: column;
  11.   justify-content: space-between;
  12. }
  14. .main {
  15.   /* Key Style */
  16.   flex: 1;
  17.   background-image: linear-gradient(
  18.     45deg,
  19.     #ff9a9e 0%,
  20.     #fad0c4 99%,
  21.     #fad0c4 100%
  22.   );
  23.   display: flex;
  24.   align-items: center;
  25.   justify-content: center;
  26.   color: #fff;
  27. }
  29. .footer {
  30.   padding: 15px 0;
  31.   text-align: center;
  32.   color: #ff9a9e;
  33.   font-size: 14px;
  34. }

6、使用"caret-color"修改光标颜色

演示地址：https://codepen.io/Fcant/pen/RwJvjew
有时需要修改光标的颜色。现在是插入符号颜色显示时间。
点击查看【codepen】

  1. <input type="text" class="caret-color" />
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. body {
  7.   display: flex;
  8.   justify-content: center;
  9. }
  11. .caret-color {
  12.   width: 300px;
  13.   padding: 10px;
  14.   margin-top: 20px;
  15.   border-radius: 10px;
  16.   border: solid 1px #ffd476;
  17.   box-sizing: border-box;
  18.   background-color: transparent;
  19.   outline: none;
  20.   color: #ffd476;
  21.   font-size: 14px;
  22.   /* Key Style */
  23.   caret-color: #ffd476;
  24. }
  26. .caret-color::-webkit-input-placeholder {
  27.   color: #4f4c5f;
  28.   font-size: 14px;
  29. }

7、去掉type="number"末尾的箭头

演示地址：https://codepen.io/Fcant/pen/yLEZPRP
点击查看【codepen】
默认情况下，input type = "number"的末尾会出现一个小箭头，但有时需要将其去掉。应该做什么？
如下图：第二个去掉了，第一个没有。
20 个超级实用的 CSS 技巧 - 图2

  1. <input type="number" />
  2. <input type="number" class="no-arrow" />
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. body {
  7.   display: flex;
  8.   justify-content: center;
  9.   align-items: center;
  10.   flex-direction: column;
  11. }
  13. input {
  14.   width: 300px;
  15.   padding: 10px;
  16.   margin-top: 20px;
  17.   border-radius: 10px;
  18.   border: solid 1px #ffd476;
  19.   box-sizing: border-box;
  20.   background-color: transparent;
  21.   outline: none;
  22.   color: #ffd476;
  23.   font-size: 14px;
  24.   caret-color: #ffd476;
  25.   display: block;
  26. }
  28. input::-webkit-input-placeholder {
  29.   color: #4f4c5f;
  30.   font-size: 14px;
  31. }
  32. /* Key Style */
  33. .no-arrow::-webkit-outer-spin-button,
  34. .no-arrow::-webkit-inner-spin-button {
  35.   -webkit-appearance: none;
  36. }

8、outline:none去掉输入状态行

演示地址：https://codepen.io/Fcant/pen/ExRrbde
点击查看【codepen】
当输入框被选中时，默认会有一个蓝色的状态行，可以使用 outline: none 去掉。
如下图：第二个输入框去掉了，第一个没有。
20 个超级实用的 CSS 技巧 - 图3

  1. <input type="number" />
  2. <input type="number" class="no-outline" />
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. body {
  7.   display: flex;
  8.   justify-content: center;
  9.   align-items: center;
  10.   flex-direction: column;
  11. }
  13. input {
  14.   width: 300px;
  15.   padding: 10px;
  16.   margin-top: 20px;
  17.   border-radius: 10px;
  18.   border: solid 1px #ffd476;
  19.   box-sizing: border-box;
  20.   background-color: transparent;
  21.   color: #ffd476;
  22.   font-size: 14px;
  23.   caret-color: #ffd476;
  24.   display: block;
  25. }
  26. /* Key Style */
  28. .no-outline {
  29.   outline: none;
  30. }

9、解决iOS滚动条卡住的问题

在苹果手机上，经常会出现滚动时元素卡住的情况。这个时候只有一行CSS会支持弹性滚动。

  1. body,html{
  2.   -webkit-overflow-scrolling: touch;
  3. }

10、画三角形

演示地址：https://codepen.io/Fcant/pen/VwdgrEJ
点击查看【codepen】

  1. <div class="box">
  2.   <div class="box-inner">
  3.     <div class="triangle bottom"></div>
  4.     <div class="triangle right"></div>
  5.     <div class="triangle top"></div>
  6.     <div class="triangle left"></div>
  7.   </div>
  8. </div>
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. body {
  7.   padding: 15px;
  8. }
  10. .box {
  11.   padding: 15px;
  12.   background-color: #f5f6f9;
  13.   border-radius: 6px;
  14.   display: flex;
  15.   align-items: center;
  16.   justify-content: center;
  17. }
  19. .triangle {
  20.   display: inline-block;
  21.   margin-right: 10px;
  22.   /* Base Style */
  23.   border: solid 10px transparent;
  24. }
  25. /*bottom*/
  26. .triangle.bottom {
  27.   border-top-color: #0097a7;
  28. }
  29. /*top*/
  30. .triangle.top {
  31.   border-bottom-color: #b2ebf2;
  32. }
  33. /*left*/
  34. .triangle.left {
  35.   border-right-color: #00bcd4;
  36. }
  37. /*right*/
  38. .triangle.right {
  39.   border-left-color: #009688;
  40. }

11、画小箭头

演示地址：https://codepen.io/Fcant/pen/OJEdOaN
点击查看【codepen】

  1. <div class="box">
  2.   <div class="box-inner">
  3.     <div class="arrow bottom"></div>
  4.     <div class="arrow top"></div>
  5.     <div class="arrow right"></div>
  6.     <div class="arrow left"></div>
  7.   </div>
  8. </div>
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. body {
  7.   padding: 15px;
  8. }
  10. .box {
  11.   padding: 15px;
  12.   background-color: #ffffff;
  13.   border-radius: 6px;
  14.   display: flex;
  15.   align-items: center;
  16.   justify-content: center;
  17. }
  19. .arrow {
  20.   display: inline-block;
  21.   margin-right: 10px;
  22.   width: 0;
  23.   height: 0;
  24.   /* Base Style */
  25.   border: 16px solid;
  26.   border-color: transparent #cddc39 transparent transparent;
  27.   position: relative;
  28. }
  30. .arrow::after {
  31.   content: "";
  32.   position: absolute;
  33.   right: -20px;
  34.   top: -16px;
  35.   border: 16px solid;
  36.   border-color: transparent #fff transparent transparent;
  37. }
  38. /*bottom*/
  39. .arrow.bottom {
  40.   transform: rotate(270deg);
  41. }
  42. /*top*/
  43. .arrow.top {
  44.   transform: rotate(90deg);
  45. }
  46. /*left*/
  47. .arrow.left {
  48.   transform: rotate(180deg);
  49. }
  50. /*right*/
  51. .arrow.right {
  52.   transform: rotate(0deg);
  53. }

12、图像适合窗口大小

演示地址：https://codepen.io/Fcant/pen/MWXLOzr
20 个超级实用的 CSS 技巧 - 图4
vw vs padding

  1. <div class="box">
  2.   <div class="img-container">
  3.     <img src="https://cdn-images-1.medium.com/max/1600/0*tuDPftoIhupd-qx-.jpg" alt="">
  4.   </div>
  5. </div>
  7. <div class="box">
  8.   <div class="img-container">
  9.     <img src="https://cdn-images-1.medium.com/max/1600/0*tuDPftoIhupd-qx-.jpg" alt="">
  10.   </div>
  11. </div>
  13. <div class="box-vw">
  14.   <div class="img-container">
  15.     <img src="https://cdn-images-1.medium.com/max/1600/0*tuDPftoIhupd-qx-.jpg" alt="">
  16.   </div>
  17. </div>
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. body {
  7.   padding: 15px;
  8. }
  10. .box,
  11. .box-vw {
  12.   background-color: #010102;
  13.   border-radius: 10px;
  14.   overflow: hidden;
  15.   margin-bottom: 15px;
  16. }
  18. .box:nth-of-type(2) {
  19.   width: 260px;
  20. }
  21. /* vw */
  22. .box-vw .img-container {
  23.   width: 100vw;
  24.   height: 66.620879vw;
  25.   padding-bottom: inherit;
  26. }
  27. /* padding */
  28. .img-container {
  29.   width: 100%;
  30.   height: 0;
  31.   /* Aspect ratio of picture*/
  32.   padding-bottom: 66.620879%;
  33. }
  35. img {
  36.   width: 100%;
  37. }

13、隐藏滚动条

演示地址：https://codepen.io/Fcant/pen/abKXVQQ
点击查看【codepen】
20 个超级实用的 CSS 技巧 - 图5
第一个滚动条可见，第二个隐藏。
这意味着容器可以滚动，但是滚动条是隐藏的，就好像它是透明的一样。

  1. <div class="box">
  2.   <div>
  3.     I'm fatfish, 6 years of programming experience, like front-end, writing
  4.     and making friends, looking forward to becoming good friends with you.
  5.   </div>
  6. </div>
  7. <div class="box box-hide-scrollbar">
  8.   <div>
  9.     I'm fatfish, 6 years of programming experience, like front-end, writing
  10.     and making friends, looking forward to becoming good friends with you.
  11.   </div>
  12. </div>
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. body {
  7.   padding: 15px;
  8.   color: #324b64;
  9. }
  11. .box {
  12.   width: 375px;
  13.   overflow: scroll;
  14. }
  15. /* Key Style */
  16. .box-hide-scrollbar::-webkit-scrollbar {
  17.   display: none; /* Chrome Safari */
  18. }
  20. .box > div {
  21.   margin-bottom: 15px;
  22.   padding: 10px;
  23.   background-color: #f5f6f9;
  24.   border-radius: 6px;
  25.   font-size: 12px;
  26.   width: 750px;
  27. }

14、自定义选中的文字样式

演示地址：https://codepen.io/Fcant/pen/VwdgrVo
点击查看【codepen】

  1. <div class="box">
  2.   <p class="box-default">
  3.     I'm fatfish, 6 years of programming experience, like front-end, writing
  4.     and making friends, looking forward to becoming good friends with you.
  5.   </p>
  6.   <p class="box-custom">
  7.     I'm fatfish, 6 years of programming experience, like front-end, writing
  8.     and making friends, looking forward to becoming good friends with you.
  9.   </p>
  10. </div>
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. body {
  7.   padding: 15px;
  8.   color: #324b64;
  9. }
  11. .box > p {
  12.   padding: 10px;
  13.   background-color: #f5f6f9;
  14.   border-radius: 6px;
  15.   font-size: 12px;
  17.   margin-bottom: 15px;
  18. }
  19. /* Key Style */
  20. .box-custom::selection {
  21.   color: #ffffff;
  22.   background-color: #ff4c9f;
  23. }

15、不允许选择文本

演示地址：https://codepen.io/Fcant/pen/QWxYOzg
点击查看【codepen】
第一个内容可以选，第二个不可以选中了。

  1. <div class="box">
  2.   <p> I'm fatfish, 6 years of programming experience, like front-end, writing
  3.     and making friends, looking forward to becoming good friends with you.</p>
  4.   <p> I'm fatfish, 6 years of programming experience, like front-end, writing
  5.     and making friends, looking forward to becoming good friends with you.</p>
  6. </div>
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. body {
  7.   padding: 15px;
  8.   color: #324b64;
  9. }
  11. .box p {
  12.   margin-bottom: 15px;
  13.   padding: 10px;
  14.   background-color: #f5f6f9;
  15.   border-radius: 6px;
  16.   font-size: 12px;
  17. }
  18. /* Key Style */
  19. .box p:last-child {
  20.   user-select: none;
  21. }

16、水平和垂直居中元素

演示地址：https://codepen.io/Fcant/pen/zYaePyJ
点击查看【codepen】

  1. <div class="parent">
  2.   <p class="child">I'm fatfish, 6 years of programming experience, like front-end, writing
  3.     and making friends, looking forward to becoming good friends with you.</p>
  4. </div>
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. body {
  7.   padding: 15px;
  8.   color: #324b64;
  9. }
  11. .parent {
  12.   padding: 0 10px;
  13.   background-color: #f5f6f9;
  14.   height: 100px;
  15.   border-radius: 6px;
  16.   font-size: 12px;
  17.   /* Key Style */
  18.   display: flex;
  19.   align-items: center;
  20.   justify-content: center;
  21. }

17、单行文字溢出时显示省略号

演示地址：https://codepen.io/Fcant/pen/oNymoJR
点击查看【codepen】

  1. <div class="box">
  2.   <p class="one-line-ellipsis">Hello Fatfish, Hello Fatfish, Hello Fatfish, Hello Fatfish, Hello Fatfish, Hello Fatfish,Hello Fatfish, Hello Fatfish, Hello Fatfish, Hello Fatfish, Hello Fatfish, Hello Fatfish</p>
  3. </div>
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. body {
  7.   padding: 15px;
  8.   color: #324b64;
  9. }
  11. .box {
  12.   padding: 10px;
  13.   background-color: #f5f6f9;
  14.   border-radius: 6px;
  15.   font-size: 12px;
  16. }
  18. .one-line-ellipsis {
  19.   /* Key Style */
  20.   overflow: hidden;
  21.   white-space: nowrap;
  22.   text-overflow: ellipsis;
  23.   max-width: 375px;
  24. }

18、多行文字溢出时显示省略号

演示地址：https://codepen.io/Fcant/pen/PoaVOVN
点击查看【codepen】

  1. <div class="box">
  2.   <p class="more-line-ellipsis">Hello Fatfish, Hello Fatfish, Hello Fatfish, Hello Fatfish, Hello Fatfish, Hello Fatfish,Hello Fatfish, Hello Fatfish, Hello Fatfish, Hello Fatfish, Hello Fatfish, Hello Fatfish</p>
  3. </div>
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. body {
  7.   padding: 15px;
  8.   color: #324b64;
  9. }
  11. .box {
  12.   max-width: 375px;
  13.   padding: 10px;
  14.   background-color: #f5f6f9;
  15.   border-radius: 6px;
  16.   font-size: 13px;
  17. }
  19. .more-line-ellipsis {
  20.   overflow: hidden;
  21.   text-overflow: ellipsis;
  23.   display: -webkit-box;
  24.   /* set n lines, including 1 */
  25.   -webkit-line-clamp: 2;
  26.   -webkit-box-orient: vertical;
  27. }

19、清除浮动

这是一种老式的布局方式，现在大部分移动端都不用了。
如下图，外层的高度没有塌陷，这就是为什么要使用clearfix类。

  1. <div class="box">
  2.   <p class="more-line-ellipsis">Hello Fatfish, Hello Fatfish, Hello Fatfish, Hello Fatfish, Hello Fatfish, Hello Fatfish,Hello Fatfish, Hello Fatfish, Hello Fatfish, Hello Fatfish, Hello Fatfish, Hello Fatfish</p>
  3. </div>
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. body {
  7.   padding: 15px;
  8.   color: #324b64;
  9. }
  11. .box {
  12.   max-width: 375px;
  13.   padding: 10px;
  14.   background-color: #f5f6f9;
  15.   border-radius: 6px;
  16.   font-size: 13px;
  17. }
  19. .more-line-ellipsis {
  20.   overflow: hidden;
  21.   text-overflow: ellipsis;
  23.   display: -webkit-box;
  24.   /* set n lines, including 1 */
  25.   -webkit-line-clamp: 2;
  26.   -webkit-box-orient: vertical;
  27. }

20、使用filter:grayscale(1)使页面处于灰色模式

  1. body{
  2.   filter: grayscale(1);
  3. }

一行代码将使页面处于灰色模式，这功能也很实用的，后期如果想要恢复到原来的正常模式，只需要在CSS里将filter: grayscale(1);这行代码注释掉即可。