发表于

1、定位+盒子宽高已知 

1
2
position: absolute; left: 50%; top: 50%; 
margin-left:-自身一半宽度; margin-top: -自身一半高度;

2、table-cell布局 

1
2
3
4
/*父级*/
display: table-cell; vertical-align: middle; 
/*子级*/
margin: 0 auto;

3、定位 + transform ; 适用于 子盒子 宽高不定时 

1
2
3
4
5
6
position: absolute;
 /*top和left偏移各为50%*/
top: 50%;
left: 50%; 
/*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
transform: translate(-50%, -50%);

4、flex 布局 

1
2
3
4
5
6
7
/*父级：*/
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;

5、水平方向上居中 

1
2
margin-left : 50% ;
transform: translateX(-50%);

发表于 
1
document.getElementById("target").onclick()

btnObj.onclick()只是简单地调用了btnObj的onclick所指向的方法，只是调用方法而已，并未触发事件

1
document.getElementById("target").click()

btnObj.click()是真正地用程序去点击按钮，触发了按钮的onclick（）事件

发表于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
input::-webkit-input-placeholder {
    /* WebKit browsers */
    font-size: 14px;
    color: #333;
}

input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    font-size: 14px;
    color: #333;
}

input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    font-size: 14px;
    color: #333;
}

发表于 
1
2
3
<input type="text" id="inputText" value="测试文本" />
<input type="button" id="btn" value="复制" />
<textarea rows="4"></textarea>
1
2
3
4
5
6
7
8
9
10
11
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
    var inputText = document.getElementById('inputText');
    var currentFocus = document.activeElement;

    inputText.focus();
    inputText.setSelectionRange(0, inputText.value.length);
    document.execCommand('copy', true);

    currentFocus.focus();
});


阅读全文 »

发表于

1、打开开发者选项，勾上调试模式

2、chrome浏览器中输入chrome://inspect/#devices


微信：查看log

1、微信内打开：http://debugx5.qq.com

2、【信息】->【TBS settings】，勾选 【是否打开 TBS 内核 Inspector 调试功能】

发表于

一、码点和含义

Unicode 只是规定了 Emoji 的码点和含义，并没有规定它的样式，由各个系统自己实现


二、使用方式

Emoji 虽然是文字，但是无法书写，必须使用其他方法插入文档。

（1）最简单的方法当然是复制/粘贴，你可以到 getEmoji.com 选中一个 Emoji 贴在自己的文档即可。

（2）另一种方法是通过码点输入 Emoji。以 HTML 网页为例，将码点U+1F600写成 HTML 实体的形式😀（十进制）或😀（十六进制），就可以插入网页。码点到这个页面查询。

（3）JavaScript 输入 Emoji，可以使用 node-emoji 这个库。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var emoji = require('node-emoji');

// 返回 coffee 的 Emoji
emoji.get('coffee');

// 返回文字标签对应的 Emoji
// https://www.webpagefx.com/tools/emoji-cheat-sheet/
emoji.get(':fast_forward:');

// 将文字替换成 Emoji
emoji.emojify('I :heart: :coffee:!');

// 随机返回一个 Emoji 
emoji.random();

// 查询 Emoji
// 返回结果是一个数组 
emoji.search('cof');

（4）还可以通过 CSS 插入 Emoji。 

1
2
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<i class="em em-baby"></i>

发表于

一、演变

http协议本身的原始方法不支持multipart/form-data请求，是由一些原始的方法演变而来的

1、multipart/form-data的基础方法是post，也就是说是由post方法来组合实现的

2、multipart/form-data与post方法的不同之处：请求头，请求体。

3、multipart/form-data的请求头必须包含一个特殊的头信息：Content-Type，且其值也必须规定为multipart/form-data

4、规定一个内容分割符用于分割请求体中的多个post的内容

具体的头信息如下：Content-Type: multipart/form-data; boundary=${bound}，其中${bound} 是一个占位符，代表我们规定的分割符，可以自己任意规定，但为了避免和正常文本重复了，尽量要使用复杂一点的内容。


二、请求体

multipart/form-data的请求体也是一个字符串，不过和post的请求体不同的是它的构造方式，post是简单的name=value值连接，而multipart/form-data则是添加了分隔符等内容的构造体。具体格式如下: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
--${bound}
Content-Disposition: form-data; name="Filename"
HTTP.pdf
		
		
--${bound}
Content-Disposition: form-data; name="file000"; filename="HTTP协议详解.pdf"
Content-Type: application/octet-stream
		
%PDF-1.5
file content
%%EOF
		
--${bound}
Content-Disposition: form-data; name="Upload"
		
Submit Query
--${bound}--

发表于

一、资源

REST，即Representational State Transfer的缩写，资源表现层状态转化

所谓”资源”，就是网络上的一个具体信息。你可以用一个URI（统一资源定位符）指向它，每种资源对应一个特定的URI，因此URI就成了每一个资源的地址或独一无二的识别符。

  • “资源”表示一种实体，所以应该是名词，URI不应该有动词
  • 数据库中的表都是同种记录的”集合”（collection），所以API中的名词也应该使用复数。


二、表现层

“资源”是一种信息实体，它可以有多种外在表现形式。我们把”资源”具体呈现出来的形式，叫做它的”表现层”（Representation）。

比如，文本可以用txt格式表现，也可以用HTML格式、XML格式、JSON格式表现，甚至可以采用二进制格式；图片可以用JPG格式表现，也可以用PNG格式表现。

URI只代表资源的实体，不代表它的形式。严格地说，有些网址最后的”.html”后缀名是不必要的，因为这个后缀名表示格式，属于”表现层”范畴，而URI应该只代表”资源”的位置。它的具体表现形式，应该在HTTP请求的头信息中用Accept和Content-Type字段指定，这两个字段才是对”表现层”的描述。


阅读全文 »

发表于

一、定义

层叠上下文是HTML元素的三维概念，这些HTML元素在z轴上延伸。HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。层叠上下文是可以相互嵌套的，一个层叠上下文中包含了普通元素以及子层叠上下文。


二、形成

文档中的层叠上下文由满足以下任意一个条件的元素形成：

  • 根元素 (HTML)
  • z-index 值不为 “auto”的 绝对/相对定位
  • 一个 z-index 值不为 “auto”的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex
  • opacity 属性值小于 1 的元素
  • transform 属性值不为 “none”的元素
  • mix-blend-mode 属性值不为 “normal”的元素
  • filter值不为“none”的元素
  • perspective值不为“none”的元素
  • isolation 属性被设置为 “isolate”的元素
  • position: fixed
  • 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
  • -webkit-overflow-scrolling 属性被设置 “touch”的元素

注：

  • 在层叠上下文中，其子元素同样也按照上面解释的规则进行层叠
  • 其子元素的 z-index 值只在父级层叠上下文中有意义

  • 子级层叠上下文被自动视为父级层叠上下文的一个独立单元

  • 没有创建自己的层叠上下文的元素 将被父层叠上下文包含


阅读全文 »

发表于

一、getter

1
2
3
{get prop() { ... } }
 
{get [expression]() { ... } }
1
2
3
4
5
6
7
var obj = {
  log: ['example','test'],
  get latest() {
      return this.log[this.log.length - 1];
  }
}
console.log(obj.latest); // "test"


二、setter

1
2
3
{set prop(val) { . . . }}

{set [expression](val) { . . . }}
1
2
3
4
5
6
7
8
var language = {
    set current(name) {
        this.log.push(name);
    },
    log: []
}
language.current = 'EN';
console.log(language.log); // ['EN']


三、注意

1、不能将一个 getter或setter 绑定到一个具有真实值的属性上

2、使用delete操作符可以删除getter和setter