一個切圖仔的 CSS 筆記

1，flexbox~注意，設爲 Flex 佈局之後，子元素的float、clear和vertical-align屬性將失效。

在ios8上要加上前綴  display: -webkit-box;  display: -webkit-flex;

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
flex兼容兼容寫法

容器屬性：
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;（默認值）：主軸爲水平方向，起點在左/右/上/下端。
  flex-wrap: nowrap | wrap | wrap-reverse;（默認）：不換行。/換行從上到下/換行從下到上
   justify-content: flex-start | flex-end | center | space-between | space-around;橫向居左/右/中/對齊貼邊/等分居中
   align-items: flex-start | flex-end | center | baseline | stretch;縱向居上/下/中/項目的第一行文字的基線對齊/（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度
 ---------------------------------------------------------------
 align-content: flex-start | flex-end | center | space-between | space-around | stretch; 多行上下對齊方式。若是項目只有一根軸線，該屬性不起做用。
  flex-flow: <flex-direction> || <flex-wrap>;flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
項目屬性：
.item {
  order: <整數>;  定義項目的排列順序。數值越小，排列越靠前，默認爲0。
  flex-grow: <number>; /* default 0 */項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。若是其餘都是1，一個爲2，那麼2的空間比1大一倍
   flex-shrink: <number>; /*default1*/若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，爲0縮小。
   flex-basis: <length> | auto; /* default auto */它的默認值爲auto，即項目的原本大小。設置項目數值將佔據固定主軸空間
   align-self: auto | flex-start | flex-end | center | baseline | stretch。屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。
   -------------------------------------------------------------------
   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
   放大, 縮小 和定寬的簡寫，默認值爲0 1 auto。後兩個屬性可選。
   該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
}

1，.item 設置margin：auto；自動等分
2，當flex-grow之和小於1時，只能按比例分配部分剩餘空間，而不是所有
3，tip:左邊固定右側自適應佈局：左側flex:0 0 100px;

2，input設置 placeholder 顏色

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
    color:#B3B3B3!important;
}
input:-moz-placeholder, textarea:-moz-placeholder { 
    color:#B3B3B3!important;
}
input::-moz-placeholder, textarea::-moz-placeholder { 
    color:#B3B3B3!important;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
    color:#B3B3B3!important;
}

3，input 設置size可調節填充父級元素

4，兄弟節點ul > li+li{}表示ul下第一個li後面的全部li。多用於寫上邊距

5，outline 描邊（參數同border）。outline-offset：20px偏移

6，圖片在指定尺寸後，能夠設置object-fit爲contain或cover保持比例

7，button設置disable後，設置button：disable{background：#eee; cursor: not-allowed;}

8,設置寬度爲fill-available，能夠使inline-block像block那樣填充整個空間 width: -webkit-fill-available;

9,設置寬度爲fit-content，能夠使block像inline-block那樣實現收縮寬度包裹內容的效果

10,能夠設置寬度爲min-content和max-content，前者讓內容儘量地收縮，後者讓內容儘量地展開

11, CSS強制性換行:

word-break:break-all; /*支持IE，chrome，FF不支持*/

word-wrap:break-word;/*支持IE，chrome，FF*/

//不換行
white-space:nowrap;
//自動換行
word-wrap: break-word; 
word-break: normal; 
//強制換行
word-break:break-all;

12，CSS動畫

//動畫耗時
     transition:All 0.4s ease-in-out;
    -webkit-transition:All 0.4s ease-in-out;
    -moz-transition:All 0.4s ease-in-out;
    -o-transition:All 0.4s ease-in-out;
//元素的動畫
     transform:scale(1.2);   
    -webkit-transform:scale(1.2);    
    -moz-transform:scale(1.2);    
    -o-transform:scale(1.2);    
     -ms-transform:scale(1.2);  

　　使用CSS transforms 或者 animations時可能會有頁面閃爍的bug
　　-webkit-backface-visibility: hidden;

13，陰影：box-shadow: 0px 0px 2px -5px #eee, 0px 0px 0px #eee, 0px 3px 10px #eee, 0px 2px 0px #eee;

<!-線性漸變->
div {
    linear-gradient(red, yellow)
}
background: linear-gradient(direction, color-stop1, color-stop2, ...);
background-image: linear-gradient(to right, transparent 50%, #655 0);//等分顏色

 

14，<input "IME-MODE: disabled;" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" maxlength="5"  type="text" name="" class="num" value="1" /> 禁止粘貼和輸入非數字文本

15，背景圖

background:url() no-repeat scroll center top(水平 垂直)
background-attachment：設置背景圖片是否隨着文字移動而移動，仍是固定在一個位置上。
scroll：背景圖像是隨對象內容滾動
fixed：背景圖像固定

16，省略號

N行省略號
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
     
單行省略號    
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

17，CSS3 filter Property 圖片過濾

img {
   
 filter: grayscale(100%); //灰度
 
 filter: blur(5px); //模糊

 filter:brightness(200%); //高亮
    
 filter:saturate(8); //飽和
  
 filter:sepia(100%); //懷舊
 
}

18，box-sizing 讓元素的寬度、高度包含border和padding {box-sizing: border-box;}

19，手機video 都在頁面中播放，而不是全屏播放了。  <video src="test.mp4" webkit-playsinline="true"></video>

20，頁面操做

<img src=」logo.gif」 width=88 height=31 ondragstart=」return false;」 > 
oncontextmenu=」return false;」 //禁止鼠標右鍵
ondragstart=」return false;」 //禁止鼠標拖動
onselectstart=」return false;」//文字禁止鼠標選中
onselect=」document.selection.empty();」//禁止複製文本

21，經常使用網頁字體設置

font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; //經常使用
宋體    SimSun
黑體    SimHei
微軟雅黑    Microsoft YaHei
微軟正黑體    Microsoft JhengHei
新宋體    NSimSun
新細明體    PMingLiU
細明體    MingLiU
標楷體    DFKai-SB
仿宋    FangSong
楷體    KaiTi
仿宋_GB2312    FangSong_GB2312
楷體_GB2312    KaiTi_GB2312

 22，

22-1，在設置背景圖後，經過 image-set( url() 1x， url() 2x) 設置不一樣分辨率下的圖片　　background-image: url(../img/test-icon_1x.png);　　background-image: -webkit-image-set(url(../img/test-icon_1x.png) 1x, url(../img/test-icon_2x.png) 2x);22-2， @media only screen and (-webkit-min-device-pixel-ratio:3) { ... }