发表于

一个list代表一张地图

  • 雪地，四方格，可以捡枪，调节gravity可以飞天，开局46headshot
  • 像是雪地的布局，不过是在一个白色的墙里的，忘记名字了，到达对面可以买东西
  • $2000,一个直线图，中间有墙挡着，有枪有炸弹捡
  • awp的图，有很多石柱，地图很大
  • CT和T分别在两边，中间有一些荆棘，两边有一些玩具，还有个小水库
  • 一个拿着刀的图，首先上柱子，掉下去，然后跳到一个入口，前面有绿色的水，有个滑板来回移动，可以通过跳在上面过去；还有些跳柱子的关卡，有很多关，失败会回到当前开关点，最后可以捡m249
  • dust版雪地，地图大一点
    阅读全文 »

发表于

源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 解析url参数 */
/* @example ?id=12345&a=b */
/* @return Object {id:12345, a:b} */

export function urlParse() {
    let url = window.location.search;
    let obj = {};
    let reg = /[?&][^?&]+=[^?&]+/g;
    let arr = url.match(reg);
    // ['?id=12345', '&a=b'] arr
    if (arr) {
        arr.forEach((item) => {
            /* 干掉第一个字符，？和& */
            let tempArr = item.substring(1).split('=');
            let key = decodeURIComponent(tempArr[0]);
            let val = decodeURIComponent(tempArr[1]);
            obj[key] = val;
        });
    }
    return obj;
};

注意，由于Vue默认的路由是带有#的，就是hash，这样打出来的window.location.search得到的值是空值，所以如果是这种情况，要将上面的.search改成.hash！

发表于

  • 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.

  • 若是块级元素且定宽, 该元素设置 margin:0 auto 即可.

  • 若是 display:inline-block, 该元素的父元素设置 text-align:center 即可.

  • 若不论是块级还是行内，而且元素不定宽，可以给元素设置 display: table 然后设置 margin: 0 auto 即可.

  • 若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:

1
2
3
4
5
6
.parent{
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width:fit-content;
    margin:0 auto;
}

fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以轻松实现水平居中, 目前只支持Chrome 和 Firefox浏览器.

阅读全文 »

发表于

单行文本

  • 若元素是单行文本, 则可设置 line-height 等于父元素高度

使用伪元素和inline-block

  • 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央.
1
2
3
4
5
6
7
8
.parent::after, .son{
    display:inline-block;
    vertical-align:middle;
}
.parent::after{
    content:'';
    height:100%;
}

这是一种很流行的方法, 也适应IE7.

缺点：某些情况下，例如使用icon-font的时候不会绝对垂直居中，底对齐中间线的样子

利用absolute和margin:auto实现垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.wrapper {
    position: relative;
    background: red;
    height: 200px;
    width: 200px;
}

.inner {
    position: absolute;
    background: yellow;
    height: 20px;
    width: 20px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

优点：容易，兼容性好

阅读全文 »

发表于

1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?

行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的宽度不可改变，只能容纳文本或者其他行内元素；其中img是行元素

块级元素：总是在新行上开始，高度、行高及外边距和内边距都可控制，可以容纳内敛元素和其他元素；

行元素转换为块级元素方式：display：block；

2.将多个元素设置为同一行?清除浮动有几种方式?

将多个元素设置为同一行：float，inline-block

清除浮动的方式：方法一：添加新的元素 、应用 clear：both；

方法二：父级div定义 overflow: hidden；

方法三：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。

1
2
3
4
5
6
7
8
9
10
11
.clear{
    zoom:1;
}
.clear:after{
    content:””;
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
}

3.什么是盒模型box-sizing？弹性盒模型|盒布局?

阅读全文 »