修改 placeholder 样式

  1. input::-webkit-input-placeholder {
  2.       color: #babbc1;
  3.       font-size: 12px;
  4.     }

image.png

清除浮动

  1. .clearfix::before,
  2. .clearfix::after {
  3.   content: '';
  4.   display: table;
  5. }
  7. .clearfix::after {
  8.   clear: both;
  9. }

文本溢出时显示省略号

单行文本

  1.   overflow: hidden;
  2.   white-space: nowrap;
  3.   text-overflow: ellipsis;
  4.   max-width: 375px;

多行文本

  1.   overflow: hidden;
  2.   text-overflow: ellipsis;
  3.   display: -webkit-box;
  4.   /* 设置显示的行数 */
  5.   -webkit-line-clamp: 2;
  6.   -webkit-box-orient: vertical;

  • 常见结合属性：

    • display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
    • -webkit-box-orient: vertical; 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式。

      隐藏滚动条

      1. .box-hide-scrollbar::-webkit-scrollbar {
      2. display: none; /* Chrome Safari */
      3. }

      使用 caret-color 来修改光标的颜色

      image.png
      1. input{
      2. caret-color: #ffd476;
      3. }

      水平居中

      行内元素

  • 标签内部内容：给标签设置text-align:center

    块级元素

  • 父元素块级标签里，子元素块级标签进行水平居中：给小的块级标签设置margin: 0 auto;

    Flex布局中

    1. div {
    2.     /* 给父级元素添加flex属性 */
    3.     display: flex;
    4.     /* 默认的主轴是 x 轴 默认的情况可以不写*/
    5.     flex-direction: row;
    6.     /* 设置主轴上的子元素的排列方式 */
    7.     justify-content: center;
    8.   }

    垂直居中

    内部垂直居中（非图片）

  • line-height:标签的高度;

    图片

  • 给图片的父标签设置line-height:标签的高度;

  • 给图片本身设置vertical-align:middle;

    Flex布局中

    1. div {
    2.     display: flex;
    3.     flex-direction: row;
    4.     /* 当侧轴是单行的情况，使用 align-items */
    5.     align-items: center;
    6.     /* 当侧轴是多行的情况，使用align-content */
    7.     align-content: center;
    8.   }

    img和父元素5px间距的问题

    image.png

    方案一：设置父元素字体大小为 0

    1. .img-container{
    2. font-size: 0;
    3. }

    方案二：将 img 元素设置为 **display: block**

    1. img{
    2. display: block;
    3. }

    方案三：将 img 元素设置为** vertical-align: bottom**

    1. img{
    2. vertical-align: bottom;
    3. }

    方案四：给父元素设置**line-height: 5px**

    1. .img-container{
    2. line-height: 5px;
    3. }

    解决margin重叠的问题

  • 同级的垂直块之间，margin这个属性上下边距，会发生重叠的情况

    • 解决办法：float浮动或display:inline-block
  • 父子级的块之间，子级的上下margin会与父级上下margin重叠
    • 解决办法：父级加overflow:hidden或加padding或加border，或者子级加position:absolute

      使用 height: 100vh使元素的高度与 window 的高度相同

      使用 :not 选择器设置除最后一个元素外，其他元素都设置样式

      1. li:not(:last-child) {
      2. border-bottom: 1px solid #ebedf0;
      3. }

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

      当内容不够时，元素在页面的底部。当有足够的内容时，元素跟随内容。可以使用 flex 来实现智能的布局。 ```html <!DOCTYPE html>
I’m fatfish, 6 years of programming experience, like front-end, writing and making friends,looking forward to becoming good friends with you.
rule

  1. <a name="xglts"></a>
  2. ### 删除 `type="number"` 末尾的箭头
  3. 默认情况下，在type="number"的末尾会出现一个小箭头
  4. ```css
  5.     input[type=number]::-webkit-outer-spin-button,
  6.     input[type=number]::-webkit-inner-spin-button {
  7.       -webkit-appearance: none;
  8.     }

outline:none 删除输入状态线

当输入框被选中时，它默认会有一条状态线，可以通过使用 outline: none 来移除它。

  1. input {
  2.       outline: none;
  3.     }

解决iOS滚动条被卡住的问题

在苹果手机上，经常发生元素在滚动时被卡住的情况。这时，可以使用如下的 CSS 来支持弹性滚动。

CSS绘制三角形

image.png

  1. .box {
  2.   padding: 15px;
  3.   background-color: #f5f6f9;
  4.   border-radius: 6px;
  5.   display: flex;
  6.   align-items: center;
  7.   justify-content: center;
  8. }
  10. .triangle {
  11.   display: inline-block;
  12.   margin-right: 10px;
  13.   /* Base Style */
  14.   border: solid 10px transparent;
  15. }
  16. /*下*/
  17. .triangle.bottom {
  18.   border-top-color: #0097a7;
  19. }
  20. /*上*/
  21. .triangle.top {
  22.   border-bottom-color: #b2ebf2;
  23. }
  24. /*左*/
  25. .triangle.left {
  26.   border-right-color: #00bcd4;
  27. }
  28. /*右*/
  29. .triangle.right {
  30.   border-left-color: #009688;
  31. }

CSS绘制小箭头

image.png

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

CSS绘制三角形和小箭头的总结

  • 都是利用矩形的边框来绘制，将矩阵的宽高设置为0，再设置边框的样式生成三角形
  • 绘制小箭头时，在矩形后添加::after伪类，生成一个相同的矩形，再设置border-color和页面背景颜色相同，使用定位移动，遮罩掉下方的矩形，视觉上即是小箭头。

    自定义滚动条样式

    ```css /滚动条整体粗细样式/ ::-webkit-scrollbar { /高宽分别对应横竖滚动条的尺寸/ width: 8px; height: 8px; }

/滚动条里面小方块/ ::-webkit-scrollbar-thumb { border-radius: 10px !important; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important; / 颜色 / / background:#b6b6b6!important; / / 线性渐变背景 / background-image: linear-gradient(45deg, #ffbd61 25%,#ffbd61 25%, #ff8800 25%, #ff8800 50%,#ffbd61 50%, #ffbd61 75%, #ff8800 75%, #ff8800 100%)!important; }

/滚动条轨道/ ::-webkit-scrollbar-track { border-radius: 10px !important; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important; background: #EDEDED !important; }

  1. <a name="HNNjV"></a>
  2. ### 自定义选定的文本样式
  3. ![image.png](https://cdn.nlark.com/yuque/0/2022/png/12695178/1647481880107-685fddde-0e8a-4f83-9598-d5ef934a37fd.png#clientId=u64820371-1170-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=178&id=u8dc4a164&margin=%5Bobject%20Object%5D&name=image.png&originHeight=222&originWidth=895&originalType=binary&ratio=1&rotation=0&showTitle=false&size=151184&status=done&style=shadow&taskId=u51f0c3b7-b55c-4a1c-8595-2f721f7f0e5&title=&width=716)
  4. ```css
  5. 标签名::selection {
  6.   color: #ffffff;
  7.   background-color: #ff4c9f;
  8. }

内容禁止选中

  1. 标签名 {
  2.   user-select: none;
  3. }

使用display:flex将一个元素在水平和垂直方向上居中

  1. display:flex;
  2. align-items: center;    /*垂直居中*/
  3. justify-content: center;    /*水平居中*/

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

image.png

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