一个切图仔的 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那样填充整个空间 -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) { ... }