Jacques-YQ 发布的文章

示例新建一个test.html文件,内容如下:

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
<div style="background-color:green;position:absolute;">
<img  style="background-color:yellow" src="http://m.baidu.com/static/index/plus/plus_logo.png">
</div>
</body>
</html>

可以看到, img的下面总有3px 的底边,这是怎么回事呢?
原来, img也是被当做普通的text进行对齐,下面3px的底边是留给如g,j,y等向下戳出来的字母的. 也就是默认有这个css属性 vertical-align: baseline;
为img添加属性vertical-align: middle就可以解决这个问题.

批处理文件文件后缀可以是.cmd或者.bat,据说两者之间只有微小的区别;

使用call xxx.bat来运行其他bat文件,才能继续执行后面的内容.

%cd% 表示运行环境所在路径

%~dp0 表示被call的bat文件所在的路径

 

川普当选，舆论哗然。而且主要还是美国人自己的舆论。各大新闻报纸如ny times之流都纷纷开始反思自己压错了宝，而且错得如此离谱。

在美国，这个全球民主和自由实施的最好的地方之一(也许并没有“之一”)，在这个统计、民调、大数据、互联网、科学、教育水平最发达的国家，也会出这样的严重偏差，那么对还在发展中国家的我们来说，我们自以为是的那些真相又会多么脆弱不堪？放到产品开发和创业创新这个语义中，我们又会有多少创新需求只是自己的意淫？

这几天，似乎在川普的种族歧视言论鼓舞下，许多原本不敢发声的种族主义者开始让亚裔非裔滚回老家去，出现了不少种族歧视事件，比如，一个亚裔美国人在推特发文说，在大选结束后路过了一个日常走过几百次都相安无事的街区，喊着滚回老家去的白人美国人泼了一身的水。人人平等，不能种族歧视是美国的政治正确。而现在，这些饱受政治正确压抑的白人种族歧视者，现在终于有了言论自由和行动自由的机会。这是否说明了，即使在一个标榜言论自由的社会，也不可能实现真正的言论自由，而是同样表现为一种政治正确的言论自由。另外，所谓的高国民素质，在某些基础利益面前也是很快崩溃的，内心的愤怒歧视被平时的优雅克制掩盖，直到有个出口爆发出来。这一点，我们和美国人并没有什么不同。

知识是对体系的描述，一个体系包括概念，状态，能力，成分（四个基本要素）。概念由状态和能力定义，内涵为class，外延为object。状态为成员，有变量和常量，能力为方法。能力通过逻辑过程和一些概念改变另一些概念的状态和成分。概念切分为不同的成分，每个成分为一个子概念。

概念有实虚，对应具象和抽象概念。前者如人，后者如青春。

知识体系中，还包括人的特有要素，联想。两个毫无关系的概念、能力、状态、成分之间，可以产生联想。再从一个概念通过层层关系到达另一个概念后，这两个概念之间就产生了联想，下一次，这两个概念之间就不再需要层层关系，可以通过联想直接到达。两个概念之间到达的频次为联想的强度，强度越高的越容易被联想到。

1. <div hidden="hidden"></div>

完全隐藏了

2. <div style="display:none"></div>

完全隐藏，与上面的区别在哪儿，不大明确。有的说hidden会在使用zepto.fullpage.js的时候，使用这种方式隐藏整个.wp会出现问题。而使用hidden则不会。原因未知。

另有文章说

2. <div style="visibility: hidden"></div>

视觉隐藏，空间保留，相当于全透明了。

参考文档：

1) What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?
http://stackoverflow.com/questions/6708247/what-is-the-difference-between-the-hidden-attribute-html5-and-the-displaynone

2) HTML5 Accessibility Chops: hidden and aria-hidden
https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/

// 显示器的宽高像素
screen.height
screen.width

//HTML的可视宽高像素，不是物理像素，是缩放后视口viewport 的显示像素，随着视口的缩放而改变
document.documentElement.clientHeight
document.documentElement.clientWidth

//HTML的<body>的可视宽高像素，不是物理像素，是缩放后视口viewport 的显示像素，随着视口的缩放而改变，chrome默认有8px的margin，所以默认要比上面的documentElement窄
document.documentElement.clientHeight
document.documentElement.clientWidth

//窗体的可视宽高像素，会保留前一个页面的视口缩放比，如果前一个页面视口缩放了，此数值也会缩放
window.innerWidth
window.innerHeight

// 在华为内置浏览器上, screen.width显示与其他浏览器表现不同, 其他浏览器为虚拟尺寸, 并且所有其他显示都基于虚拟尺寸, 华为是实际尺寸, 而显示却基于虚拟尺寸.
// 导致华为浏览器缩放不准确. 需要用window.innerWidth替代. 而window.innerWidth是随着initial-scale变化的.

//旧代码在华为上出问题:

if (window.innerWidth != width) {
alert(width + " " + window.innerWidth)
document.getElementById("metavp").content = "width=" + width + ",initial-scale=" + screen.width / width + ", maximum-scale=" + screen.width / width + ", user-scalable=no"
}

//改为如下代码才正常

if (window.innerWidth != width) {
alert(width + " " + window.innerWidth)
document.getElementById("metavp").content = "width=" + width + ",initial-scale=" + window.innerWidth / width + ", maximum-scale=" + window.innerWidth / width + ", user-scalable=no"
}

动态效果：transition,定义在css属性值改变的时候，经过多久渐变过去
transition property duration timing-function delay
transition-property none/all | property
transition-duration ?s
transition-timing-function linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(n,n,n) ,n=[0~1]
transition-delay ?s
动态效果animation
animation name duration timing-function deley iteration-count direction
animation-name none | @keyframe规定的动画名称
animation-duration ?s
animation-timing-function linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(n,n,n) ,n=[0~1]
animation-delay ?s
animation-iteration-count infinite | n,取值自然数
animation-direction normal/alternate,在偶数次数反向播放
动画名称@keyframes
@keyframes xxxname{
from {} to{}
0%{} …%{} 100%{}
}
transition和animation区别 1. transition真的改变css属性，并且在改变属性的时候产生动画，动画则没有（或许因此动画的效率高？）
2. transition相当于只有from和to，且只运行一次，但是to是可以动态改变的；
静态效果：transform
transform none | transfrom-functions;
matrix(n,n,n,n,n,n) matrix3d(n,n,n,n…..*16)
translate(x,y) translate3d(x,y,z) translateX(x) translateY(y) translatez(y) 沿着x,y,z轴移动x,y,z长度
scale(x,y) scale3d(x,y,z) scaleX(x) scaleY(y) scaleZ(z) 沿着x,y,z轴方向缩放x,y,z比例，取值0~1
rotate(angle) rotate3d(x,y,z,angle) rotateX(angle) rotateY(angle) rotateZ(angle) 沿着中心旋转，或者沿着x,y,z轴旋转，x,y,z取值0或者1，angle取值0~360deg
skew(x,y) skewX(x) skewY(y) 沿着X，Y倾斜的角度，取值-90~90deg，如果等于90，则因为太倾斜而消失。

1）需要确认整个页面（含各种链接资源）加载完毕后才执行，需要用js的onload事件。

<script>

window.onload = function(){

//回调函数

}

</script>

2）确认某一个资源加载完毕后执行，用id的onload事件

<img id="sugar_img" src="sugar.jpg">

<script>
sugar_img.onload = function(){//回调函数
}
<script>

测试发现，如果有两个元素是同一个id，则回调会失败。

3）上述资源回调的另一种写法：

<img onload="sugar_img()" id="sugar_img" src="sugar.jpg">

<script>
sugar_img = function(){//回调函数
}
<script>

4) 如果只是DOM加载完毕就执行，可以用jquery的$.ready()

 

 

HTML布局无疑是HTML+CSS了。另外使用jquery或vue.js更可以使得布局方便灵活；进一步的，CSS还有各种变体，LESS、stylus等让布局更方便。

Windows的C#，似乎力推的是WPF（XAML），用XML形式描述布局，而不是用C#语句一个个去创建和定义，应该方便了很多。

跨界，WxWidgets，支持不同操作系统和不同语言，如python、ruby。然而是使用程序的方式制造界面，并不喜欢。

1）安卓手机打开USB调试模式；

2）PC用USB连接安卓手机，驱动什么都装好；

3）PC端Chrome中输入：

chrome://inspect

这时应该已经看到了手机连接上了。

4）手机端用Chrome开启网页，这时候在PC端chrome上应该已经看到了手机上的网页名称；

5）PC Chrome上点击要调试的网页下面的inspect，开始调试

基于node.js、chromium的本地app开发框架electron，官方有三步安装使用法：

# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies and run
$ npm install && npm start

在npm install这一步，经常会出现下载出问题，如果是windows 10，将下载类似“electron-v1.4.3-win32-x64.zip”这样的文件，大约50MB，经常下一半就断了，下次还要重新来过。

这时候需要设置系统环境变量：

ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"

如果是windows，在“系统”-》“高级系统设置”-》“环境变量”-》“系统变量”-》“新增”中增加即可。

如果是linux，设置：

export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"

  1. 1
  2. ...
  3. 66
  4. 67
  5. 68
  6. 69
  7. 70
  8. 71
  9. 72
  10. 73