CMeUp

记录一些学习心得,QQ:1139723651.

当网页文档足够宽时,设置 viewport width=device-width 也会出现水平滚动条。可能因为有个最大上限制,超过后,假设屏幕会缩放,则可能完全看不清。因此浏览器选择水平滚动以保持文字的可读性。
现代移动浏览器会自动采用 viewport width=device-width ??? 因为不设置这个,也会按这个显示。有待考证。首先如果不设置 meta viewport 标签,那么移动设备上浏览器默认的宽度值为 800px,980px,1024px 等这些,总之是大于屏幕宽度的。这里的宽度所用的单位 px 都是指 css 中的 px,它跟代表实际屏幕物理像素的 px 不是一回事。
以下为个人拙见,虽没官方依据,但帮助了我理解。
width 设置内容的最小宽度(如果内容比你设置的还宽,以内容为准,并且值必须比屏幕宽),这个也是可见像素宽度。
如果不设置缩放,此时一般没有水平滚动条(默认的 initial-scale 会让文档全屏显示)。
若设置 initial-scale,会改变屏幕的水平像素值。如,设置为 1 时,水平像素值为 400px,设置为 0.5 时,水平像素值为 800px。这也是为什么设置了 width 和 initial-scale=1 时,不全屏的原因,因为 width 设置为屏幕宽度数值后(其实很小,不是像素数值,一般由于这个值小于文档本来宽度,故无效),设置 initial-scale=1 时,一屏像素宽度为 400px,显示不完整个文档,当然有水平滚动条。设置 initial-scale 后,会让水平像素值为屏幕宽度的缩放倍数。

假如有一个地址为,
http://user:pass@host.com:8080/p/a/t/h?query=string#hash

属性

  1. href
    The full URL that was originally parsed. Both the protocol and host are lowercased.
    Example: ‘http://user:pass@host.com:8080/p/a/t/h?query=string#hash
  2. protocol
    The request protocol, lowercased.
    Example: ‘http:’
  3. host
    The full lowercased host portion of the URL, including port information.
    Example: ‘host.com:8080’
  4. auth
    The authentication information portion of a URL.
    Example: ‘user:pass’
    阅读全文 »

display:table 相关属性

属性特性

  • table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符
  • table-row-group 此元素会作为一个或多个行的分组来显示(类似
  • table-header-group 此元素会作为一个或多个行的分组来显示(类似
  • table-footer-group 此元素会作为一个或多个行的分组来显示(类似
  • table-row 此元素会作为一个表格行显示(类似
  • table-column-group 此元素会作为一个或多个列的分组来显示(类似
  • table-column 此元素会作为一个单元格列显示(类似
  • table-cell 此元素会作为一个表格单元格显示(类似
  • table-caption 此元素会作为一个表格标题显示(类似
  • display: table-cell

    属性特性

    display:table-cell 属性指让标签元素以表格单元格的形式呈现,类似于 td 标签。但是 IE6/7 不支持。table-cell 同样会被其他一些 CSS 属性破坏,例如 float, position:absolute。设置了 display:table-cell 的元素对宽度高度敏感,对 margin 值无反应,响应 padding 属性,基本上就是活脱脱的一个 td 标签元素了。

    应用

    1, 实现行内效果
    2, 等高布局
    3, 垂直居中

    。)。)。)。)。)。)

用法

replace 最难用法

1
2
3
4
5
6
7
8
var a = "thsif fsejf dsfse jsfs fesjf sef sjfes fesj fse";
a.replace(/(es)j/g, function(match, $1, $2, $3){console.log(arguments )});

// log
(4) ["esj", "es", 24, "thsif fsejf dsfse jsfs fesjf sef sjfes fesj fse", callee: function, Symbol(Symbol.iterator): function]0: "esj"1: "es"2: 243: "thsif fsejf dsfse jsfs fesjf sef sjfes fesj fse"callee: function (match, $1, $2, $3)length: 4Symbol(Symbol.iterator): function values()__proto__: Object
(4) ["esj", "es", 40, "thsif fsejf dsfse jsfs fesjf sef sjfes fesj fse", callee: function, Symbol(Symbol.iterator): function]
"thsif fsejf dsfse jsfs fundefinedf sef sjfes fundefined fse"

由以上可知,当 replace 第二个参数为函数的时候,接受一系列参数值,第一个参数值是匹配到的值(正则表达式匹配到的全部的值),从第二参数以后分别是 $1, $2 …. 分别代表正则表达式中的第一个分组,第二个分组。。。分组完之后,便是匹配到的值的位置索引,下一个参数是调用的回调函数,再下一个是 Symbol,具体啥用还不清楚。js 中 replace 的正则形式复杂,但功能强大。

普通用法

1
2
3
4
5
6
var a = "thsif fsejf dsfse jsfs fesjf sef sjfes fesj fse";
a.replace(/(es)j/g, "$1");
a.replace(/(es)j/g, "$&");//$&是匹配到的子串,相当于没有改变。
// log
"thsif fsejf dsfse jsfs fesf sef sjfes fes fse"
相当于去掉所有esj中的j

querystring

作用

The querystring module provides utilities for parsing and formatting URL query strings.
它可以解析和格式化 URL 的查询字符串。

方法

querystring.escape(str)
querystring.escape () 方法以针对 URL 查询字符串的特定要求进行了优化的方式对给定的 str 执行 URL 百分比编码。
querystring.parse(str[, sep[, eq[, options]]])
将查询 URL 的参数解析为键值对对象。如’foo=bar&abc=xyz&abc=123’被解析为:

1
2
3
4
{
foo: 'bar',
abc: ['xyz', '123']
}

querystring.stringify(obj[, sep[, eq[, options]]])
解析的逆过程
querystring.unescape(str)
编码的逆过程

0%