前端开发中的css技巧

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

刚开始的时候如下                  而需要改变为这种 

html代码抒写如下：

 

        发件人：
        

          

            
Siyu
            
          
        
      
      

        收件人：
        

          

            
Siyu
            
          
        
      
      

        抄送人：
        

          

            
Siyu
            
          
        
      


css：

.mailDetailSent>span{
    width:0.6rem;
    text-align: justify;
}
.mailDetailSent>span i{
    display: inline-block;
    width: 100%;
}

利用到了text-align的justify的特性。这时候文字的两端对齐就完美解决了。

2：css中强制断行

强制不换行
p { white-space:nowrap; }

自动换行
p { word-wrap:break-word; }

强制英文单词断行
p { word-break:break-all; }

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

 

3:设置边框  四个边都有阴影 box-shadow: 0 0 5px #ccc;

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

table-layout: fixed;

 width: calc(100% + 170px); 

border-collapse: collapse;

5：制作√打钩

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);

6:制作三角形

.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;

}