• CSS---经常被忽略，但使用广泛的常用CSS样式片段总结

    1

    1、文字超出部分显示省略号

    单行文本的溢出显示省略号（一定要有宽度）

    1.  p{
    2.     width:200rpx;
    3.     overflow: hidden;
    4.     text-overflow:ellipsis;
    5.     white-space: nowrap;
    6.  }

    多行文本溢出显示省略号

    1. p {
    2.     display: -webkit-box;
    3.     -webkit-box-orient: vertical;
    4.     -webkit-line-clamp: 3;
    5.     overflow: hidden;
    6.  }

    2、中英文自动换行

    1. p{
    2.   word-wrap: break-word;
    3.   white-space: normal;
    4.   word-break: break-all;
    5. }
    6. //不换行
    7. .wrap {
    8.   white-space:nowrap;
    9. }
    10. //自动换行
    11. .wrap {
    12.   word-wrap: break-word;
    13.   word-break: normal;
    14. }
    15. //强制换行
    16. .wrap {
    17.   word-break:break-all;
    18. }

    3、文字阴影

    text-shadow 为网页字体添加阴影，通过对text-shadow属性设置相关的属性值。属性与值的说明如下：text-shadow: [X-offset,Y-offset,Blur,Color];

    1. X-offset:指阴影居于字体水平偏移的位置。
    2. Y-offset:指阴影居于字体垂直偏移的位置。
    3. Blur:指阴影的模糊值。
    4. color:指阴影的颜色；
    5.  
    6. h1{
    7. text-shadow: 5px 5px 5px #FF0000;
    8. }

    4、设置placeholder的字体样式

    1. // 一起写，兼容写法
    2. input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    3.   color: red;
    4. }
    5. input::-moz-placeholder { /* Firefox 19+ */
    6.   color: red;
    7. }
    8. input:-ms-input-placeholder { /* IE 10+ */
    9.   color: red;
    10. }
    11. input:-moz-placeholder { /* Firefox 18- */
    12.   color: red;
    13. }

    5、不固定高宽 div 垂直居中的方法

    1. // 方法一：伪元素和 inline-block / vertical-align（兼容 IE8）
    2.  
    3. box-wrap:before {
    4.       content: '';
    5.       display: inline-block;
    6.       height: 100%;
    7.       vertical-align: middle;
    8.       margin-right: -0.25em; //微调整空格
    9. }
    10. .box {
    11.      display: inline-block;
    12.      vertical-align: middle;
    13. }
    14.  
    15. // 方法二：flex(不兼容 ie8 以下)
    16. .box-wrap {
    17.      height: 300px;
    18.      justify-content:center;
    19.      align-items:center;
    20.      display:flex;
    21.      background-color:#666;
    22.  }
    23.  
    24. // 方法三：transform(不兼容 ie8 以下)
    25. .box-wrap {
    26.      width:100%;
    27.      height:300px;
    28.      background:rgba(0,0,0,0.7);
    29.      position:relative;
    30. }
    31. .box{
    32.     position:absolute;
    33.     left:50%;
    34.     top:50%;
    35.     transform:translateX(-50%) translateY(-50%);
    36.     -webkit-transform:translateX(-50%) translateY(-50%);
    37. }
    38.  
    39. // 方法四：设置 margin:auto（该方法得严格意义上的非固定宽高，而是 50%的父级的宽高。）
    40. .box-wrap {
    41.     position: relative;
    42.     width:100%;
    43.     height:300px;
    44.     background-color:#f00;
    45. }
    46. .box-content{
    47.     position: absolute;
    48.     top:0;
    49.     left:0;
    50.     bottom:0;
    51.     right:0;
    52.     width:50%;
    53.     height:50%;
    54.     margin:auto;
    55.     background-color:#ff0;
    56. }

    6、解决IOS页面滑动卡顿

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

    7、设置滚动条样式

    1. .test::-webkit-scrollbar{
    2.   /*滚动条整体样式*/
    3.   width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
    4.   height: 1px;
    5. }
    6. .test::-webkit-scrollbar-thumb {
    7.   /*滚动条里面小方块*/
    8.   border-radius   : 10px;
    9.   background-color: skyblue;
    10.   background-image: -webkit-linear-gradient(
    11.       45deg,
    12.       rgba(255, 255, 255, 0.2) 25%,
    13.       transparent 25%,
    14.       transparent 50%,
    15.       rgba(255, 255, 255, 0.2) 50%,
    16.       rgba(255, 255, 255, 0.2) 75%,
    17.       transparent 75%,
    18.       transparent
    19.   );
    20. }
    21. .test::-webkit-scrollbar-track {
    22.   /*滚动条里面轨道*/
    23.   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    24.   background   : #ededed;
    25.   border-radius: 10px;
    26. }

    8、实现隐藏滚动条同时又可以滚动

    1. .demo::-webkit-scrollbar {
    2.   display: none; /* Chrome Safari */
    3. }
    4.  
    5. .demo {
    6.   scrollbar-width: none; /* firefox */
    7.   -ms-overflow-style: none; /* IE 10+ */
    8.   overflow-x: hidden;
    9.   overflow-y: auto;
    10. }

    9、css 绘制三角形

    1. div {
    2.     width: 0;
    3.     height: 0;
    4.     border-width: 0 40px 40px;
    5.     border-style: solid;
    6.     border-color: transparent transparent red;
    7. }

    实现带边框的三角形：

    1. <div id="blue"><div>
    2.  
    3. #blue {
    4.     position:relative;
    5.     width: 0;
    6.     height: 0;
    7.     border-width: 0 40px 40px;
    8.     border-style: solid;
    9.     border-color: transparent transparent blue;
    10. }
    11. #blue:after {
    12.     content: "";
    13.     position: absolute;
    14.     top: 1px;
    15.     left: -38px;
    16.     border-width: 0 38px 38px;
    17.     border-style: solid;
    18.     border-color: transparent transparent yellow;
    19. }

    注: 如果想绘制右直角三角，则将左 border 设置为 0；如果想绘制左直角三角，将右 border 设置为 0 即可（其它情况同理）。

    10、Table表格边框合并

    1. table,tr,td{
    2.   border: 1px solid #666;
    3. }
    4. table{
    5.   border-collapse: collapse;
    6. }

    11、css 选取第 n 个标签元素

    1. first-child first-child 表示选择列表中的第一个标签。
    2. last-child last-child 表示选择列表中的最后一个标签
    3. nth-child(3) 表示选择列表中的第 3 个标签
    4. nth-child(2n) 这个表示选择列表中的偶数标签
    5. nth-child(2n-1) 这个表示选择列表中的奇数标签
    6. nth-child(n+3) 这个表示选择列表中的标签从第 3 个开始到最后。
    7. nth-child(-n+3) 这个表示选择列表中的标签从 0 到 3，即小于 3 的标签。
    8. nth-last-child(3) 这个表示选择列表中的倒数第 3 个标签。
    9. // 实例
    10. li:nth-child(n)

    12、移动端软键盘变为搜索方式

    1. 默认情况下软键盘上该键位为前往或者确认等文字，要使其变为搜索文字，
    2. 需要在 input 上加上 type 声明：
    3. 需要一个 form 标签套起来,并且设置 action 属性,这样写完之后输入法的右下角就会自动变成搜索,
    4. 同时，使用了 search 类型后，搜索框上会默认自带删除按钮。
    5.  
    6. <form action="#">
    7.     <input type="search" placeholder="请输入..." name="search" />
    8. form>

    13、onerror 处理图片异常

    <img onerror="this.src='url;this.onerror=null'" />

    14、背景图片的大小

    1. .bg-img{
    2.     background:url(../img/find_pw_on_2.png)  no-repeat center center !important;
    3.     background-size: 27px auto !important;
    4.     /*background-size: 100% 100%;*/
    5.     /*background-size: 50px 100px*/
    6. }

    15、文字之间的间距

    单词text-indent抬头距离，letter-spacing字与字间距

    1. p{
    2.   text-indent：2em；//单词抬头距离(段落首位缩进两个字符)
    3.   letter-spacing：10px；//间距
    4. }

    16、元素占满整个屏幕

    heigth如果使用100%，会根据父级的高度来决定，所以使用100vh单位。

    1. .dom{
    2.   width:100%;
    3.   height:100vh;
    4. }

    17、CSS实现文本两端对齐

    1. .wrap {
    2.     text-align: justify;
    3.     text-justify: distribute-all-lines;  //ie6-8
    4.     text-align-last: justify;  //一个块或行的最后一行对齐方式
    5.     -moz-text-align-last: justify;
    6.     -webkit-text-align-last: justify;
    7. }

    18、实现文字竖向排版

    1. // 单列展示时
    2. .wrap {
    3.     width: 25px;
    4.     line-height: 18px;
    5.     height: auto;
    6.     font-size: 12px;
    7.     padding: 8px 5px;
    8.     word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/ 
    9. }
    10. // 多列展示时
    11. .wrap {
    12.     height: 210px;
    13.     line-height: 30px;
    14.     text-align: justify;
    15.     writing-mode: vertical-lr;  //从左向右    
    16.     writing-mode: tb-lr;        //IE从左向右
    17.     //writing-mode: vertical-rl;  -- 从右向左
    18.     //writing-mode: tb-rl;        -- 从右向左
    19. }

    19、使元素鼠标事件失效

    1.  
    2. .wrap {
    3.   // 如果按tab能选中该元素，如button，然后按回车还是能执行对应的事件，如click。
    4.  pointer-events: none;
    5.  cursor: default;
    6. }
    7.  
    8. 文字模糊且不可选中
    9. .wrap {
    10.   // 文字模糊
    11.   color: transparent;
    12.   text-shadow: #6ba31a 0 0 10px;
    13.   // 鼠标样式恢复
    14.   pointer-events: none;
    15.   cursor: default;
    16.   // 关键样式，选中失效
    17.   user-select: none;   
    18. }

    20、禁止用户选择

    1. .wrap {
    2.   -webkit-touch-callout: none;
    3.   -webkit-user-select: none;
    4.   -khtml-user-select: none;
    5.   -moz-user-select: none;
    6.   -ms-user-select: none;
    7.   user-select: none;
    8. }

    21、使用硬件加速

    1. .wrap {
    2.     transform: translateZ(0);
    3. }

    22、页面动画出现闪烁问题

    当我们使用CSS transforms 或者 animations时可能会有页面闪烁的效果，下面的代码可以修复此情况：

    1. .cube {
    2.    -webkit-backface-visibility: hidden;
    3.    backface-visibility: hidden;
    4.  
    5.    -webkit-perspective: 1000;
    6.    perspective: 1000;
    7.    /* Other transform properties here */
    8. }
    9.  
    10. // 在webkit内核的浏览器中，另一个行之有效的方法是:
    11.  
    12. .cube {
    13.    -webkit-transform: translate3d(0, 0, 0);
    14.    transform: translate3d(0, 0, 0);
    15.   /* Other transform properties here */
    16. }

    23、字母大小写转换

    1. p {text-transform: uppercase}  // 将所有字母变成大写字母
    2. p {font-variant: unicase}      // 将所有字母变成大写字母
    3. p {text-transform: lowercase}  // 将所有字母变成小写字母
    4. p {font-variant: all-petite-caps}  // 将所有字母变成小写字母
    5. p {font-variant: all-small-caps}  // 将所有字母变成小写字母
    6. p {text-transform: capitalize} // 首字母大写
    7. p {font-variant: small-caps}   // 将字体变成小型的大写字母

    24、将一个容器设为透明

    1. .wrap { 
    2.   filter:alpha(opacity=50); 
    3.   -moz-opacity:0.5; 
    4.   -khtml-opacity: 0.5; 
    5.   opacity: 0.5; 
    6. }

    25、消除transition闪屏

    1. .wrap {
    2.     -webkit-transform-style: preserve-3d;
    3.     -webkit-backface-visibility: hidden;
    4.     -webkit-perspective: 1000;
    5. }

    26、识别字符串里的 '\n' 并换行

    一般在富文本中返回换行符不是
    的标签，而且\n。不使用正则转换的情况下 \/n ，可通过下面样式实现换行。

    1. body {
    2.    white-space: pre-line;
    3. }

    27、移除a标签被点链接

    1. a {
    2.   outline: none；//或者outline: 0
    3.   text-decoration:none; //取消默认下划线
    4. }

    28、CSS显示链接之后的URL

    1. <a href="http://www.webqdkf.com">我这里是超连接
    4. // 展示效果： 
    5. 我这里是超连接(http://www.webqdkf.com)
    7. 这里扩展，attr里面可以添加任何希望展示的元素属性值*class名*自定义属性值*等等

    29、select内容居中显示、下拉内容右对齐

    1. select{
    2.     text-align: center;
    3.     text-align-last: center;
    4. }
    5. select option {
    6.     direction: rtl;
    7. }

    30、修改input输入框中光标的颜色不改变字体的颜色

    1. input{
    2.     color:  #fff;
    3.     caret-color: red;
    4. }

    31、CSS实现文字模糊效果

    1. color: transparent;
    2. text-shadow: #6ba31a 0 0 10px;

    32、通过滤镜让图标变灰

    1. 一张彩色的图片就能实现鼠标移入变彩色，移出变灰的效果。
    2.  
    3. a.icon{
    4.   -webkit-filter: grayscale(100%);
    5.   -moz-filter: grayscale(100%);
    6.   -ms-filter: grayscale(100%);
    7.   -o-filter: grayscale(100%);   
    8.   filter: grayscale(100%);
    9. }
    10. a.icon:hover{
    11.   filter: none;
    12.   -webkit-filter: grayscale(0%);
    13. }

    33、图片自适应object-fit

    当图片比例不固定时，想要让图片自适应，一般都会用background-size:cover/contain，但是这个只适用于背景图。css3中可使用object-fit属性来解决图片被拉伸或是被缩放的问题。使用的提前条件：图片的父级容器要有宽高。

    fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。contain: 保持原有尺寸比例。长度和高度中长的那条边跟容器大小一致，短的那条等比缩放，可能会有留白。cover: 保持原有尺寸比例。宽度和高度中短的那条边跟容器大小一致，长的那条等比缩放。可能会有部分区域不可见。（常用）none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。scale-down:保持原有尺寸比例,如果容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真；容器尺寸小于图片内容尺寸，用法跟contain一样。

    1. img{
    2.     width: 100%;
    3.     height: 100%;
    4.     object-fit: cover;
    5. }

    34、行内标签元素出现间隙问题

    1. 方式一：父级font-size设置为0
    2.  
    3. .father{
    4.  font-size:0;
    5. }
    6. 方式二：父元素上设置word-spacing的值为合适的负值
    7.  
    8. .father{
    9.    word-spacing:-2px
    10. }
    11. 方式三：float

    35、解决vertical-align属性不生效

    在使用vertical-align:middle实现垂直居中的时候，经常会发现不生效的情况。这里需要注意它生效需要满足的条件：

    作用环境：父元素设置line-height。需要和height一致。或者将display属性设置为table-cell，将块元素转化为单元格。
    作用对象：子元素中的inline-block和inline元素。

    vertical-align不可继承，必须对子元素单独设置。同时需要注意的是line-height的高度基于font-size（即字体的高度），如果文字要转行会出现异常哦。

  • 相关阅读:
    【Linux】UDP协议
    2022年6月青少年机器人技术（三级）等级考试试卷-实操题
    Python 中的方法重载
    python随手小练3
    fix: prosemirror adds two extra spaces when paste
    关于如何系统的学习python
    华为机试 - 最长的顺子
    资本方介入的第三方新能源充电桩平台到底“香”在哪里？
    38、Neural 3D Reconstruction in the Wild
    AI艺术的背后：详解文本生成图像模型【基于 VQ-VAE】
  • 原文地址：https://blog.csdn.net/COCOLI_BK/article/details/126008128