前端比較實用的CSS

CSS

display: flex; flex-direction: column; align-items: center;css

1.flex佈局

{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
 {
   flex:1   /* 全部的子元素平均分配 */
 }
}
複製代碼

我寫css一定會用到他，自此以後摒棄flaot,畢竟float要清楚浮動，在我看來他徹底能夠替代float,並且最大的好處就是對任何不肯定的寬和高，咱們均可以讓他垂直居中對齊，想要了解的更深點，能夠點擊這裏 Flex 佈局教程：語法篇html

2.移動端1px的實現

.person-infos{
        position: relative;
        &::before{
            content: "";
            pointer-events: none; /* 防止點擊觸發 */
            box-sizing: border-box;
            position: absolute;
            width: 200%;
            height: 200%;
            left: 0;
            top: 0;
            border-top:1px solid #fff;
            transform:scale(0.5);
            transform-origin: 0 0;
        }
}
複製代碼

必定要在改元素上設置position:relative,before內設置position: absoluteweb

3.利用::before,::after設置在元素先後設置border

{
  position: relative;
  &::before{
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   height: 1px;
   background: #f1f1f1;
   }
}
複製代碼

4.設置背景圖片，並該圖片在一個固定區域內，好比該區域是手機全屏區域減去頭部的標題欄

{
    background: url(/static/img/login-back.e7b2e5f.jpg) no-repeat;
    position: absolute;
    top: 40px;  /* 頂部標題欄的高度 */
    left: 0;
    width: 100%;
    background-size: 100% 100%;
    height: calc(100% - 40px);
}
複製代碼

推薦使用的是calc,加上咱們設置了背景圖片的寬和高是100%，100%，這時候咱們就能夠看到除去頭部的40px,剩下的區域都被背景圖片佔滿了。瀏覽器

5.一個值得推薦的 css寫的陰影效果，我一直都用，感受很是使用大部分場景

{   
    border: none;
    border-radius: 5px;
    box-shadow: 0 12px 5px -10px rgba(0,0,0,0.1), 0 0 4px 0 rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 12px 5px -10px rgba(0,0,0,0.1), 0 0 4px 0 rgba(0,0,0,0.1);
}
複製代碼

6.超出長度省略號

/* 1. 單行文本溢出用省略號顯示：*/
{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  
  width: 100%;                  /* IE6 須要定義寬度 */ 
  
  -o-text-overflow: ellipsis;    /* Opera */ 
  text-overflow:    ellipsis;    /* IE, Safari (WebKit) */ 
  -moz-binding: url('ellipsis.xml#ellipsis');    /* Firefox */ 
}
/* 2.多行文本溢出用省略號顯示： */
{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
複製代碼

7.顏色的漸變(right表示漸變的方向)

{
 background: linear-gradient(to right, #f5adc9, #f38eb6, #f977ab);
}
複製代碼

8.box-sizing

box-sizing: content-box|border-box|inherit;
複製代碼

有時候咱們設置內部的div一個固定的寬高，可是因爲受padding,border的影響，會讓他的寬高比設置的小，若是不想這樣，能夠設置box-sizing:content-box,具體看CSS3 box-sizing 屬性bash

9.禁用鼠標點擊

{ 
  pointer-events: none; 
}
複製代碼

10. input,寬改變border,而且聚焦除掉橙色的邊框

{
   border:none;
   outline:none;
   border:1px solid #eee  /* 自定義 */
}
複製代碼

11.設置透明，併兼容瀏覽器

{
  filter: alpha(opacity=50); /* internet explorer */
 -khtml-opacity: 0.5; /* khtml, old safari */
 -moz-opacity: 0.5; /* mozilla, netscape */
 opacity: 0.5; /* fx, safari, opera */
}
複製代碼

12.除input,textarea以外，讓任何標籤的內容可編輯，能夠在該元素上添加 contenteditable="true"

13.自定義滾動條樣式

/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/ 
::-webkit-scrollbar 
{ 
    width: 16px; 
    height: 16px; 
    background-color: #F5F5F5; 
} 
   
/*定義滾動條軌道 內陰影+圓角*/ 
::-webkit-scrollbar-track 
{ 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
    background-color: #F5F5F5; 
} 
   
/*定義滑塊 內陰影+圓角*/ 
::-webkit-scrollbar-thumb 
{ 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
    background-color: #555; 
複製代碼

14.實現按鈕一邊凹陷

.btn{
  display: block;
  width: 100px;
  height: 40px;
  background-color: lightcoral;
  text-align: center;
  line-height: 40px;
  position: relative;
  color: #FFF;
  font-size: 2em;
  margin: 0 auto;
  &::after {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background: #fff;
    position: absolute;
    display: block;
    right: -15px;
    top: 5px;
  }
}
複製代碼

效果以下圖： markdown