(1)百分比布局,要结合min-width使用,使用定宽的话会出现文字脱离盒子的情况
(2)no选择器使用
div:not(:last-child){}
(3)nth选择器,nth-child()是非兄弟元素的选择器,也就是必须是同一个元素之下选择;nth-of-type()是兄弟元素下选择,可以是不同元素的选择器
div:nth-of-type(-n+10) 选择前十个同类型容器
div:nth-of-type(10+n) 选择第十个后面的所有同类型容器
(3)z-index高级别的覆盖不了低级别的问题
原因如下:z-index只是比较同级元素,如果父元素的级别低,即使子元素级别再高也没用
(4)div默认一行的情况下,div默认跟随父级结构宽度,如果div暴露在最外层的div中,那么默认就是100%,在此情况下设置宽度跟随文字自适应,设置width:fit-content;但是一般情况下,一行有多个div或者其他元素情况下,宽度是自动自适应的
(5)修改滚动条样式
/*修改滚动条样式*/
div::-webkit-scrollbar{
width:10px;
height:10px;
/**/
}
div::-webkit-scrollbar-track{
background: rgb(239, 239, 239);
border-radius:2px;
}
div::-webkit-scrollbar-thumb{
background: #bfbfbf;
border-radius:10px;
}
div::-webkit-scrollbar-thumb:hover{
background: #333;
}
div::-webkit-scrollbar-corner{
background: #179a16;
}
参数说明
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)
::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
(6)Background-color如果用#f0f0f0这种十六进制的和opacity结合使用,会导致字体的color颜色透明,所以如果想用透明背景要采用background-color:rgba()方式,color正常使用
(7)将十六进制颜色转化成rgba颜色
export const conversionColor = (color) =>{
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
let res=`rgba(${parseInt(result[1], 16)},${parseInt(result[2], 16)},${parseInt(result[3], 16)},0.12)`
return res; // Color
}
(8)移动端设置0.5px的样式
.border-1px(@color: #ccc, @radius: 3px, @style: solid) {
position: relative;
&::after {
content: '';
pointer-events: none;
display: block;
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
border: 1px @style @color;
border-radius: @radius;
box-sizing: border-box;
width: 100%;
height: 100%;
@media (min-resolution: 2dppx) {
width: 200%;
height: 200%;
border-radius: @radius * 2;
transform: scale(0.5);
}
@media (min-resolution: 3dppx) {
width: 300%;
height: 300%;
border-radius: @radius * 3;
transform: scale(0.333);
}
}
}
(9)根据每一列的高度实现其他列自动居中
ul{
display: flex;
justify-content: space-between;
li{
width: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
text-align: right;
font-size: 0.28rem;
font-family: PingFangSC, PingFangSC-Medium;
font-weight:500;
opacity: 1;
color: #333333;
}
(10)tab切换底部横线为父级元素的50%
.tabItem{
padding-top: 10px;
box-sizing: border-box;
height: 100%;
cursor: pointer;
margin-right: 40px;
font-size: 14px;
font-family: 'PingFang SC','PingFangSC-Regular';
font-weight: 400;
text-align: center;
color: #595959;
line-height: 21px;
box-sizing: border-box;
}
.activeTab{
font-size: 14px;
font-family: 'PingFang SC','PingFangSC-Medium';
font-weight: 500;
text-align: center;
color: #111111;
line-height: 21px;
position: relative;
&::after{
content: '';
position: absolute;
width: 50%;
height: 0px;
bottom: 0px;
left: 50%;
border-radius: 3px;
border-bottom: 2px solid #ff7500;
transform:translateX(-50%) ;
}
}
(11)伪类元素实现背景附带
<style>
div::before{
content: '';
background: url('./img/Group@2x.png') no-repeat;
background-size: 12px 12px;
padding: 7px;
font-size: 0;
vertical-align: middle;
}
</style>
<body>
<div></div>
(12)实现向上小箭头
div{
width: 100px;
height: 100px;
background-color: #f0f0f0;
position: relative;
}
div::after{
width: 0;
height: 0;
content: '';
right: 10px;
bottom: 100%;
position: absolute;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #f0f0f0;
}
禁止浏览器自动填充文本、密码
<input type='text' autocomplete='off' />
(13)Css样式实现步骤条(主要通过li前面的border-left和:before实现)
ul {
min-width: 428px;
margin-left: 17px;
}
li {
margin-top: 10px;
position: relative;
padding: 0 0 24px 8px;
list-style: none;
border-left: 1px dotted #ccc;
li:before {
content: "";
display: block;
position: absolute;
top: 0;
left: -4px;
width: 7px;
height: 7px;
line-height: 22px;
text-align: center;
//background: #1c54ec;
background: #ffffff;
border: 1px solid #6b6d74;
color: #fff;
font-size: 14px;
//border: 1px solid #ffffff;
border-radius: 50%;
}
(14)动态修改伪元素样式,主要原理是在父级元素上直接生成一个style样式,然后将样式进行覆盖,从而达到实现自己的样式效果
$('.breachContract').append(`<style> .breachContract>ul>li::before{background: #ffffff !important;border: 1px solid #6b6d74 !important;}</style>`);
$('.breachContract').append(`<style> ul li:nth-child(${idx+1})::before{background: #1c54ec !important;border: 1px solid #ffffff !important;}</style>`);