前端学习笔记

透明度

IE：  filter:alpha(opacity:80)

火狐  opacity:0.8

 

不设置浮动情况下，图片垂直居中：

vertical-align:middle;

 

div中的图片文字垂直居中:

vertical-align:middle;以及给img和p设置display:inline-block;

 

 

webkit目前支持最小字体12px，所以要用rem或em的时候，设置html为100px。

 

 

  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */

  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */

  display: -ms-flexbox;      /* TWEENER - IE 10 */

  display: -webkit-flex;     /* NEW - Chrome */

  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */ 

 

 

-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */

  -moz-box-flex: 1;         /* OLD - Firefox 19- */

  -webkit-flex: 1;          /* Chrome */

  -ms-flex: 1;              /* IE 10 */

  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

 

 

 

 

display:table;

 

 

a嵌套img出现高度问题：

 

a元素下有一个匿名文本，这个文本外有一个匿名行级盒子，它有的默认vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，所以把a撑高了。

 

解决办法一是消除掉匿名盒子的高度，也就是给a设置line-height:0或font-size:0;

解决办法二是给两者vertical-align:top，让其top对齐，而不是baseline对齐

解决办法三是给img以display:block，让它和匿名行级盒子不在一个布局上下文中，也就不存在行级盒的对齐问题'

 

 

DIV与图片之间有缝隙

图片设置一个line-height:0

或者  vertical-align:top;

 

 

同一div下，img和label垂直居中做法:

.div *{vertical-align:middle}

 

 

IE9以前版本

<!--[if lte IE9]><script>window.location.href='http://cdn.dmeng.net/upgrade-your-browser.html?referrer='+location.href;</script><![endif]-->

 

 

input点击取消边框

 outline:medium;

 

 

赋值数组到隐藏域

var a = $("#div").val();

var b=$("div1").val+a+',';

 

 

同一行span和input有空隙（例子，购物车加减）

将父级设置:font-size:0;

 

 

json返回值带有<pre>前端处理方法

onComplete: function (file, response) {

    if (response == "Success")

        $("#state").val("上传完成！");

    var a = response;

    var reg = /(<pre.+?>)(.+)(<\/pre>)/g;

    var result = a.match(reg);

    b = RegExp.$2;

 

jq去除指定字符

$(".detail-box-trip-content-h1").each(function(){

           var index = $(this).html().indexOf('DAY');

              if(index != -1){

              var el = $(this);

                el.html(el.html().replace("DAY", ""));

              }

           });