解决使用display:table-cell;vertical-align:middle;无法水平居中的问题

.box {
    display:table-cell;
    vertical-align:middle;
}

使用以上方法,做多行垂直居中的时候,原来设置的,margin:0 auto;水平居中会失效,因为table-cell是不支持margin的
那么我们可以在box外面包裹一层,使得原来无法居中,现在居中了。
.wrapper {
    display:table;
    margin:0 auto;
}

自己做一个Bootstrap:带三角形的popup

screen-shot-2016-12-08-at-22-29-31

这个widget的难点在于上面的三角形的部分,我们需要用CSS实现一个看起来“有边框”的三角形。

我们利用没有长宽的Div,设置它的border为需要的宽度,并隐藏其他三边,这样三角形就做好了。

同样的原理,再定义一个三角形,将这个三角形位置下移两个像素(一个像素边框看起来很细,跟旁边的不匹配),覆盖于原理的三角形上面,这样看起来,就有了边框。

Angular坑01:多次module后Directive被覆盖

刚开始用Angular JS的时候遇到了一个问题,定义了两个Directive(DATE和WEATHER)两个directive单独使用的时候都没有问题,但是同时使用的时候,前一个date的directive会被覆盖掉,这个问题在两个directive写在一个js文件的时候没有出现,所以第一直觉是,分开两个文件之后:

“某些公用的东西,被重复建立覆盖掉了”

那么我们看回原来的代码,唯一有可能重复定义的地方只有

angular.module(‘personalPage’,[]){

}

在单独一个文件里的时候,这个只使用了一次,而分两个文件的时候,使用了两次,所以问题会不会重复定义了personalPage这个module导致后面的directive被覆盖掉了呢?
screen-shot-2016-11-15-at-15-34-14

我们修改代码之后,看看,在app.js里面定义personalPage并且赋值给一个变量,将这个变量作为参数传入两个directive中。

(function(window, document, personalPageApp) {
// body…
})(window, document, personalPageApp);

ok!!问题解决

真的是因为重复定义了module导致的问题。screen-shot-2016-11-16-at-13-57-12

经过测试,如果两个module不同名字的话,建立两个app,是没有问题的,但是和我们想要的不是一个业务逻辑了。