实用的css技巧

css中的样式优先级

如何让长度不一的文字 两端对齐

对左侧的文字部分需要设置为文字左右对齐， 利用到了text-align的justify的特性。这时候文字的两端对齐就完美解决了 我们需要这样写

 <div class="mailDetailSent">
        <span>发件人：<i></i></span>
        <ul>
          <li>
            <p>Siyu</p>
            <span></span>
          </li>
        </ul>
      </div>
      <div class="mailDetailSent">
        <span>收件人：<i></i></span>
        <ul>
          <li>
            <p>Siyu</p>
            <span></span>
          </li>
        </ul>
      </div>
      <div class="mailDetailSent">
        <span>抄送人：<i></i></span>
        <ul>
          <li>
            <p>Siyu</p>
            <span></span>
          </li>
        </ul>
      </div>
 
 
css：
 
.mailDetailSent>span{
    width:0.6rem;
    text-align: justify;
}
.mailDetailSent>span i{
    display: inline-block;
    width: 100%;
}

css中强制断行

 强制不换行
    p { white-space:nowrap; }
    自动换行
    p { word-wrap:break-word; }
    强制英文单词断行
    p { word-break:break-all; }

*注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。

设置边框 四个边都有阴影

box-shadow: 0 0 5px #ccc;

table如何横向滚动同时使间隙消失

table-layout: fixed;
width: calc(100% + 170px); 
border-collapse: collapse;

制作√打钩样式

content: "";
position: absolute;
top: 2px;
left: 1px;
width: 9px !important;
height: 6px !important;
border: 2px solid #fff;
border-radius: 1px;
border-top: none;
border-right: none;
background: transparent;
transform: rotate(-45deg);

制作三角形

.statusHoverList::before{
position: absolute;
left:45%;
top:-15px;
width:0;
height:0px;
content: "";
border-top:7px solid transparent;
border-right:7px solid transparent;
border-left:7px solid transparent;
border-bottom:7px solid #ccc;
}

制作矩形

 position: absolute;
    content: "";
    right: 0;
    top: 0;
    height: 48px;
    width: 0px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid transparent;
    border-right: 4px solid #ec3504;

设置滚动条的样式

样式如下

//滚动部分
.ic-content2{
	top: 30px;
	width:360px;
	overflow: hidden;
    overflow-y: auto;
}
.ic-content2::-webkit-scrollbar {
	height: 12px;
	width:6px;
  }
  .ic-content2::-webkit-scrollbar-thumb {
	margin-top: -8px;
	background: #ccc;
	border-radius: 6px;
  }
  
  
  
  
  .scroll_bar::-webkit-scrollbar {
  width: 7px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
}

.scroll_bar::-webkit-scrollbar-thumb {
  /*滚动条里面小方块样式*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: #373a3f;
}

.scroll_bar::-webkit-scrollbar-track {
  /*滚动条里面轨道样式*/
  -webkit-box-shadow: inset 0 0 0px rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: transparent;
}

input框 清除默认保存上次填写的值

每次鼠标进入input框的时候都把上一次确认的值显示在下方

执行方法

 <input id="tipinput" autocomplete="off" />
 //增加参数autocomplete 赋值为 off 这时就不会显示值

设置对角线

// 标题样式
.title-box {
  background: #f2f2f2;
  position: relative;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  font-weight: bold;
  color: #333;
  z-index: 1;
  &::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(
      to top right,
      transparent 49.5%,
      #797979 50%,
      #797979 50%,
      transparent 50.5%
    );
    z-index: -1;
  }
  &::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(
      to bottom right,
      transparent 49.5%,
      #797979 50%,
      #797979 50%,
      transparent 50.5%
    );
    z-index: -1;
  }
  span {
    z-index: 9;
    background: #f2f2f2;
  }
}