前端小tips之标签

文本溢出 省略号
================
overflow: hidden;zoom:1;white-space:nowrap;text-overflow:ellipsis;


---------------------------------------------------------------------------------------------------------------
文本首行缩进
=============
text-indent: 2em;
---------------------------------------------------------------------------------------------------------------


圆角
=====
border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;behavior:url(css/iecss3.htc);
border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;-webkit-border-radius:0 3px 3px 0;behavior: url(css/iecss3.htc);


同样的类名
第一个 
   .input-group-addon:first-child {
        border: 1px solid #ccc;
        border-radius: 4px;
        display: table-cell;
        white-space: nowrap;
        vertical-align: middle;
        background-color: antiquewhite;
        width: 100px;
        float: left;


        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
最后一个 就是更改了 
      border-left: 0;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
注意：IE9+才支持


---------------------------------------------------------------------------------------------------------------


透明度
======
filter:alpha(opacity=50);opacity:0.5;
rgba(20, 20, 20, 0.1);


---------------------------------------------------------------------------------------------------------------


滚动标签 
========
<marquee> 缺陷：不能实现无缝滚动
属性：behavior:设置滚动的方式：


scroll：表示由一端滚动到另一端，会重复,缺陷是不能无缝滚动


     direction：设定活动字幕的滚动方向


     loop：设置滚动的次数默认为-1会一直滚动下去。


     scrollamount：设置滚动字母的速度


     scrolldelay：设定活动字幕滚动的两次之间的延长时间。（单位毫秒）


---------------------------------------------------------------------------------------------------------------


平滑过渡 transition
===================
css3 的transition：允许css属性值在一定的时间区内平滑的过渡。


transition-property：变换延续的时间


transition-duration：在延续时间段


transition-timing-function：变换速度变化


transition-delay：变化延迟时间


transition简写模式： 顺序为：transition-property transition-duration transition-timing-function transition-delay 


兼容性问题的解决：

-webkit-transition，-moz-transition，-o-transition，-ms-transition




---------------------------------------------------------------------------------------------------------------


Math应用
==========
Math.ceil()   向上取整
Math.floor()  向下取整
Math.abs()    绝对值
Math.round()  四舍五入


---------------------------------------------------------------------------------------------------------------


table 标签应用
=============
border-collapse:collapse; 表示边框合并在一起。
border-collapse:separate;表示边框之间的间距，间距的大小用border-spacing:0px;定义大小。
caption-side:top;设置表格标题的位置。
empty-cells:hide;隐藏空单元格。


隔行变色：
background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0") //设置隔行变色
table-striped > tbody > tr:nth-of-type(odd) { background-color: #f9f9f9;}


---------------------------------------------------------------------------------------------------------------


媒体查询
========
@media screen and (-webkit-min-device-pixel-ratio: 0)


@media screen and (max-width: 767px){} 宽度小于767px时使用


@media (min-width: 768px)


@media (max-device-width: 480px) and (orientation: landscape) max-device-width指的是设备整个渲染区宽度（设备的实际宽度）


@media all and (transform-3d), (-webkit-transform-3d)


iPads (portrait and landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}


iPads (landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}


iPads (portrait)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}


iPhone 4
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}


---------------------------------------------------------------------------------------------------------------


水平垂直居中
=============
.DivCen{ width:500px; height:200px; position:absolute; top:50%; left:50%; margin-left:-250px; margin-top:-100px;}
---------------------------------------------------------------------------------------------------------------


flex布局
========
flex 是Flexible Box的缩写，意思是“弹性布局”
支持的浏览器：chrome21+，opera12.1+，FF22+，Safari6.1+，IE10+


任何容器都可以使用
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}
行内元素：
.box{
  display: inline-flex;
}
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。


容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。


【【【【【【属性】】】】】】】


以下6个属性设置在容器上。
【flex-direction属性】
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。


【flex-wrap属性】
flex-wrap属性定义，如果一条轴线排不下，如何换行。
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。


【flex-flow属性】
是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}


【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（默认值）：轴线占满整个交叉轴。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。


以下6个属性设置在项目上。


【order属性】
定义项目的排列顺序。数值越小，排列越靠前，默认为0。


【flex-grow属性】
定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。


【flex-shrink属性】
定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。


【flex-basis属性】
定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。
它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。


【flex属性】
是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。


【align-self属性】
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。该属性可能取6个值，除了auto，其他都与align-items属性完全一致。




【【【【【【布局】】】】】】】


【单项目】
水平线 默认为左上角 justify-content: center;居中 justify-content:flex-end;居最右
垂直线 align-items: center;垂直居中 align-items: flex-end;局最低端


【双项目】


  justify-content: space-between;
  flex-direction: column;
  align-items: center;

---------------------------------------------------------------------------------------------------------------

字符串操作
===========
search 查找，找不到返回-1，找到则返回他的位置
substring 获取子字符串，字符串截取，substring(起点，终点)，不包括终点位置，如果没有终点，则截取到字符串结束
charAt 获取某个字符串
split 分割字符串，获得数组 切片


---------------------------------------------------------------------------------------------------------------

兼容性问题的解决
=================


<!--[if lt IE 9]>
      <script src="http://css/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://css/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<script src="http://css/jquery/1.11.1/jquery.min.js"></script>


---------------------------------------------------------------------------------------------------------------


手机页面，头部
=========
<!DOCTYPE html>
<html>
<head>
<title>移联网信</title>
<meta charset="utf-8">
<meta name="data-spm" content="1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="keywords" content="移联网信">
<meta name="description" content="移联网信">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="css/base.css" rel="stylesheet" type="text/css">
</head>


---------------------------------------------------------------------------------------------------------------


公共标签属性
============
@charset "utf-8";
::selection{color:#fff;background-color:#f47264;}
::-moz-selection{color:#fff;background-color:#f47264;}
::-webkit-selection{color:#fff;background-color:f47264;}
html{height:100%;}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,figure{padding:0;margin:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;vertical-align:bottom;}
button,input,select,textarea{font:12px/1.125 "Microsoft Yahei",Arial,Helvetica,sans-serif;}
input,select,img{vertical-align:middle}
input,select,textarea{outline:none;appearance:normal;-moz-appearance: normal;-webkit-appearance: normal;-o-appearance: normal;}
a, input[type="submit"], input[type="reset"], input[type="button"] {appearance:none;-moz-appearance: none;-webkit-appearance: none;-o-appearance: none;}
input[type="submit"], input[type="reset"], input[type="button"]{border: 1px solid #d2cec5;background-color: white;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;behavior:url(css/iecss3.htc);cursor: pointer;}
a:focus,input:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-modify:read-only;}
ul,ol{list-style:none;}
img{-webkit-tap-highlight-color:transparent;-webkit-touch-callout: none;-webkit-user-select: none;}
a{color:#000;-webkit-tap-highlight-color:transparent;-webkit-touch-callout: none;-webkit-user-select: none;}
a:hover{color:black;}
a:focus{outline:none;-moz-outline:none;-webkit-outline:none;}
a,del,ins{text-decoration:none;}
label{cursor:pointer}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,i,em,var{font-style:normal;}
body{font:12px/1.125 "Microsoft Yahei",Arial,Helvetica,sans-serif;height:100%;word-wrap:break-word;-moz-user-select:none;-webkit-user-select:none;user-select:none;}
.adaptive {overflow:hidden;zoom:1;}
.floatL {float:left;}
.floatR {float:right;}
.clear {clear:both;height:0;font-size:0;overflow:hidden;}
.clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both;}
.clearfix{zoom:1;}


---------------------------------------------------------------------------------------------------------------
IE9以下
========
<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->


---------------------------------------------------------------------------------------------------------------