2016.06 第三周 群问题分享
HTML+CSS
怎么让一个容器里面不管存在2个子元素还是1个子元素都能垂直居中
2016.06.20~2016.06.24
核心内容
弹性布局
参考答案
实例：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂</title>
<link rel="stylesheet" href="reset.css">
<style>
.wrap {
width: 500px;
height: 500px;
border: 2px solid #f00;
/*兼容处理*/
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: -o-box;
display: box;
/*规定子元素水平排列还是垂直排列*/
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
-o-box-orient: vertical;
box-orient: vertical;
/*水平对齐*/
-webkit-box-align: center;
-moz-box-align: center;
-ms-box-align: center;
-o-box-align: center;
box-align: center;
/*垂直对齐*/
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-box-pack: center;
-o-box-pack: center;
box-pack: center;
}
.wrap a {
display: block;
width: 100px;
height: 200px;
border: 2px solid #000;
background-color: #fcc;
}
</style>
</head>
<body>
<div class="wrap">
<a href="###" title="">HTML5学堂 - 陈林</a>
<a href="###" title="">HTML5学堂 - 陈能堡</a>
</div>
</body>
</html>效果：
JavaScript
audio元素和video元素在iOS和Android中无法自动播放
2016.06.20~2016.06.24
核心内容
HTML5视音频
参考答案
音频，写法一
<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>音频，写法二
<audio controls="controls">
<source src="music/bg.ogg" type="audio/ogg"></source>
<source src="music/bg.mp3" type="audio/mpeg"></source>
<!-- 优先播放音乐bg.ogg，不支持在播放bg.mp3 -->
</audio>解决视音频无法自动播放的问题，可以通过JS来触发自动播放（操作window时，播放音乐）
$(window).one('touchstart', function(){
music.play();
})微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);一点心得：
1.audio元素的autoplay属性在iOS及Android上无法使用，在PC端能够正常使用；
2.audio元素没有设置controls时，在iOS及Android会占据空间大小，而在PC端Chrome浏览器是不会占据任何空间
移动端有哪些touch事件
2016.06.20~2016.06.24
核心内容
touch事件
参考答案
当用户手指放在移动设备的屏幕上滑动会触发的touch事件；
以下支持webkit内核的浏览器：
- touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
- touchmove——当手指在屏幕上滑动时连续触发。通常我们为了防止页面的滚动，会调用event的preventDefault()可以阻止默认事件的发生，达到阻止页面滚动的效果
- touchend——当手指离开屏幕时触发
- touchcancel——系统停止跟踪触摸时会触发。
TouchEvent说明：
- touches：屏幕上所有手指的信息
- targetTouches：手指在目标区域的手指信息
- changedTouches：最近一次触发该事件的手指信息
- touchend时，touches与targetTouches信息会被删除，changedTouches保存最后一次的信息，用于计算手指信息
参数信息(changedTouches[0])
- clientX、clientY在显示区的坐标
- target：当前元素
事件响应顺序
ontouchstart > ontouchmove > ontouchend > onclick
以下支持winphone 8
- MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指
- MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生：阻止页面滚动
- MSPointerUp——当手指离开屏幕时触发
如何用jQuery实现两个div等高
2016.06.20~2016.06.24
核心内容
jQuery
参考答案
有时你希望无论两个 div 各自包含什么内容，它们总有相同的高度：
$('.div').css('min-height', $('.main-div').height());这个例子设置了 min-height，意味着高度可以大于主 div 而不能小于它。然而，更灵活的方法是遍历一组元素，然后将高度设置为最高元素的高度：
var $columns = $('.column');
var height = 0;
$columns.each(function () {
if ($(this).height() > height) {
height = $(this).height();
}
});
$columns.height(height);如果你希望所有列高度相同：
var $rows = $('.same-height-columns');
$rows.each(function () {
$(this).find('.column').height($(this).height());
});为什么this指向全局
2016.06.20~2016.06.24
核心内容
this指向、setTimeout
参考答案
理解this的要点：关键在于将函数与函数名分开看待。同一个函数，在不同的执行方法下，会有不同的效果。
不要去看传的参数中函数的所有者，看执行函数的所有var obj = {};
obj.x = 1;
obj.y = 2;
window.x = 100;
window.y = 200;
obj.add = function () {
alert(this.x + this.y);
}
setTimeout(obj.add,1000);//this指向window,输出为300
setTimeout(function(){//this指向obj，输出为3
obj.add();
},1000);如果想具体了解关于this指向问题，可以在HTML5学堂官网搜索“this”，进一步深入了解关于this指向问题
HTML5学堂小编 - 陈林&堡堡 耗时2.5h