CSS中常用到的一些解决问题方法（整理一些真正有效能够使用到项目中的方法）（等待不断更新积累）

- 日理万妓 2022-04-13 11:25 144阅读 0赞

*  如何强制文本换行

{white-space:normal; width:200px; }

*  高度不固定的div，里面的文字垂直居中

// 加在父级div中
    垂直居中：align-items:center; display: -webkit-flex;
    水平居中：justify-content:center; display: -webkit-flex;

*  给table加滚动条

在table外加个div，然后再设置div和table的高度。最后，再给div加个overflow：scroll(横向滚动条为overflow-x:scroll；竖向滚动条为overflow-y:scroll

*  height：100%失效解决办法

给对应的父元素增加

height:100%

*  iframe自适应高度

外层div设为100vh,里面iframe设为100%

*  css利用linear-gradient实现渐变色背景

[CSS中颜色突变的实现方案 - 简书][CSS_ -]

[CSS3 linear-gradient线性渐变实现虚线等简单实用图形 « 张鑫旭-鑫空间-鑫生活][CSS3 linear-gradient_ _ _-_-]

![20190709100837950.png][]

background-image: linear-gradient(to right bottom, rgb(253, 243, 54) 0%,rgb(253, 243, 54) 50%,rgb(244, 51, 31) 50%, rgb(244, 51, 31) 100%);
    
    
    
    
    background:repeating-linear-gradient(to left top,black 0%,white 0.02%,white 0.1%);
    
    
    
    
    
    background: linear-gradient(to right bottom, #000000, #000000 10px, transparent 10px, transparent);border: 1px solid #000;

直线

background: linear-gradient(to bottom, white calc(50% - 1px), black calc(50% - 1px) calc(50% + 1px), white calc(50% + 1px));

虚线

background-image: linear-gradient(to bottom, #AAA 1px, transparent 1px), linear-gradient(to right, #AAA 1px, transparent 1px), radial-gradient(1px 1px at center, #AAA 1px, transparent 2px), radial-gradient(1px 1px at center, #AAA 1px, transparent 2px);
      background-size: 40px 60px, 120px 40px, 12px 60px, 12px 60px;
      background-position: 0px 0px, 0px 0px, 0px -10px, 0px 10px;

*  checkbox, radio跟文字在一行

*  animation设置每隔0.5秒显示一次

.hub_blinking_img{ -webkit-animation: NAME-YOUR-ANIMATION 1s infinite;
        -moz-animation: NAME-YOUR-ANIMATION 1s infinite;
        -o-animation: NAME-YOUR-ANIMATION 1s infinite;
        animation: NAME-YOUR-ANIMATION 1s infinite;
        opacity: 0;}
    @keyframes NAME-YOUR-ANIMATION {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @-webkit-keyframes NAME-YOUR-ANIMATION {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @-moz-keyframes NAME-YOUR-ANIMATION {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @-o-keyframes NAME-YOUR-ANIMATION {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @keyframes NAME-YOUR-ANIMATION {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

*  animation设置每隔2秒旋转

.desc_sync_status_img{
        -webkit-animation: spin 1s linear 1s 5 alternate;
        animation: spin 2s linear infinite;
    }
    @-webkit-keyframes spin {
        from {
            -webkit-transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
        }
    }
    @keyframes spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

*  text-overflow: ellipsis失效

添加如下代码

overflow: hidden;white-space: nowrap;

注意还必须当前为display:block或者inline-block

*  实现换行

word-break: normal;
    overflow: hidden;
    white-space: break-spaces;

*  设置当前元素的父元素的样式

利用js实现

let childNode = document.getElementsByClassName("notFinish_container")[0];
            let parentNode = childNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
            parentNode.style.backgroundColor="#0c004a"

*  实现两个盒子重叠的效果

box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.75), 0 2px 2px 0 rgba(0, 0, 0, 0.5);

给上面这个盒子增加阴影效果

还可以加简单阴影

box-shadow: -6px 0 6px -4px rgba(0,0,0,.15);

*  fixed想相对于父元素定位（跟随滚动条而一起滚动，永远在底端）

position: "fixed"

bottom: 0

z-index:999

*  对奇偶行进行不一样的样式设置

/*（偶数行）*/
    .details_table_container .rt-tr-group:nth-child(even) {}
    /*（奇数行）*/
    .details_table_container .rt-tr-group:nth-child(odd) {background-image: linear-gradient(#044664,#0b184a,#044664);}

*  双引号内实现换行：\\n

"当前版本较低，为不影响您的使用体验,\n请到软件仓库下载最新版本!"

*  实现宽度为百分比，高度跟随宽度变化，宽高一致

.rightImgWrap{
      height: 0;
      padding-bottom: 100%;
      background: #FFFFFF;
      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
      position: relative;
    }
    .rightImg{
      position: absolute;
    	top:10%;
    	left: 10%;
    	width: 80%;
    height: 80%;
    }

*  :after添加\*

当它所处的div有固定高度，通过vertical-align: middle;可以实现垂直居中

.label-text:after{
    				content: "*";
    				color: #FF3B30;
    				font-size: 16px;
    				vertical-align: middle;
    			}

[CSS_ -]: https://www.jianshu.com/p/b7aac233bd29
[CSS3 linear-gradient_ _ _-_-]: https://www.zhangxinxu.com/wordpress/2017/10/css3-linear-gradient-dashed-triangle-graph/
[20190709100837950.png]: /images/20220413/640907c489b54a0d86ac066cf8d8b5f6.png