2016.07 第一周群问题分享

HTML+CSS

如何用CSS实现一个元素footer一直贴在浏览器底部

2016.06.27~2016.07.01

核心概念

margin-bottom负值、margin-top负值、Flexbox布局

参考答案

footer元素始终贴在浏览器底部。我们知道当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部。下面要讲的布局就是解决如何使元素贴住浏览器底部。

方法一：全局增加一个负值的下边距等于底部高度

有一个全局的元素包含除了底部之外的所有内容。它有一个负值的下边距等于底部的高度

结构如下：

<body>
  <div class="wrapper">
      content
    <div class="push"></div>
  </div>
  <footer class="footer"></footer>
</body>

样式如下：

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}

这个代码需要一个额外的元素.push等于底部的高度，来防止内容覆盖到底部的元素。这个push元素是智能的，它并没有占用到底部的利用，而是通过全局加了一个负边距来填充。

效果如下：

方法二：底部元素增加负值的上边距

虽然这个代码减少了一个.push的元素，但还是需要增加一层的元素包裹内容，并给他一个内边距使其等于底部的高度，防止内容覆盖到底部的内容。

结构如下：

<body>
  <div class="content">
    <div class="content-inside">
      content
    </div>
  </div>
  <footer class="footer"></footer>
</body>

样式如下：

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

方法三：使用Flexbox布局

结构如下：

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

样式如下：

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

如何用CSS实现背景透明文字不透明

2016.06.27~2016.07.01

核心概念

rgba()

参考答案

按照以前的写法是使用两个元素来控制，一个写背景透明、一个写文字。然后通过定位：absolute和层级：z-index来控制。现在我们可以通过如下方法使用一个元素来控制。

在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明，而文字保持不透明。而IE6/7/8浏览器不支持rgba，只有使用IE的专属特性filter:属性来制作透明背景。

.rgba{
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=  1,startColorstr=  #80000000,endColorstr=  #80000000)"; /*Filter for IE8 */    
     filter: progid:DXImageTransform.Microsoft.gradient(GradientType=  1,startColorstr=  #80000000, endColorstr=  #80000000); /*Filter for older IEs */
}
:root .rgba  {
    filter: none; /*IE9不需要filter*/
    background: #000;
    background: rgba(0, 0, 0, 0.5);
}

这里需要注意的是startColorStr和endColorStr的值#80000000，其中前两位是十六进制的透明度80，也就是透明值为0.5而后面6位是十六进制的颜色#000000(black黑色)。

如何用CSS写出三角形并兼容IE6

2016.06.27~2016.07.01

核心概念

盒模型的border

参考答案

/* create an arrow that points up */
.arrow-up {
  width:0px;
  height:0px;
  border-left:5px solid transparent; 
  border-right:5px solid transparent; 
  border-bottom:5px solid #2f2f2f; 
  font-size:0px;
  line-height:0px;
}
 
/* create an arrow that points down */
.arrow-down {
  width:0px;
  height:0px;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid #2f2f2f;
  font-size:0px;
  line-height:0px;
}
 
/* create an arrow that points left */
.arrow-left {
  width:0px;
  height:0px;
  border-bottom:5px solid transparent;
  border-top:5px solid transparent; 
  border-right:5px solid #2f2f2f;
  font-size:0px;
  line-height:0px;
}
 
/* create an arrow that points right */
.arrow-right {
  width:0px;
  height:0px;
  border-bottom:5px solid transparent;
  border-top:5px solid transparent; 
  border-left:5px solid #2f2f2f; /
  font-size:0px;
  line-height:0px;
}

JavaScript

JavaScript中的toString()方法怎么用

2016.06.27~2016.07.01

核心概念

toString()

参考答案

（1）Array.toString()：将数组转换成一个字符串，并且返回这个字符串。

描述：当数组用于字符串环境中时，JavaScript会调用这一方法将数组自动转换成一个字符串。toString()在把数组转换成字符串时，首先要将数组的每个元素都转换成字符串（通过调用这些元素的toString方法）。当每个元素都被转换成字符串时，它就以列表的形式输出这些字符串，字符串之间用逗号分隔。返回值与没有参数的jion()方法返回的字符串相同。

var arr = ['aa','bb','cc'];
console.log("使用join方法的结果" + arr.join()) // 使用join方法的结果aa,bb,cc
console.log("使用toString方法的结果" + arr.toString()); // 使用toString方法的结果aa,bb,cc

（2）Boolean.toString()：将布尔值转换为字符串。

描述：根据原始布尔值或者Boolean对象的值返回字符串“true”或“false”。

var b = new Boolean();// boolean对象默认值为false
console.log(b.toString()); // false
console.log(("chia" == "chia").toString()); // true

（3）Date.toString()：将Date对象转换成一个字符串，采用本地时间。

var today = new Date();
console.log(today); // Thu Jun 30 2016 16:45:14 GMT+0800 (中国标准时间)
console.log(today.toString()); // Thu Jun 30 2016 16:45:14 GMT+0800 (中国标准时间)
console.log(today.toLocaleString()); //2016/6/30 下午4:45:14

注意：toLocaleString()是返回使用地方日期格式规范的字符串。

（5）Number.toString()：将数字转换为字符串。用它的参数指定的基数或底数（底数范围为2-36）。如果省略参数，则使用基数10。当参数值为2时，返回二进制数。

var a = 34;
console.log(a.toString()); // 34
console.log(a.toString(2));// 100010
console.log(a.toString(8));// 42
console.log(a.toString(16));// 22

怎样改变this指向

2016.06.27~2016.07.01

核心概念

call()、apply()、bind()

参考答案

1、call()方法

用于操作this的函数方法是call()，它可以指定的this值和参数来执行函数。call()的第一个参数指定了函数执行时this的值，其后的所有参数都是需要被传入函数的参数。

2、apply()方法

apply()是你可以用来操作this的第二个函数方法。apply()的工作方式和call()完全一样，但它只能接受两个参数： this 的值和一个数组或者类似数组的对象，内含需要被传入函数的参数（也就是说你可以把arguments对象作为apply()的第二个参数）。你不需要像使用call()那样一个个指定参数，而是可以轻松传递整个数组给apply()。除此之外，call()和apply()表现得完全一样。

3、bind()方法

改变this的第三个函数方法是bind()。ECMAScript 5中新加的这个方法和之前那两个颇有不同。按惯例，bind()的第一个参数是要传给新函数的this的值。其他所有参数代表需要被永久设置在新函数中的命名参数。你可以在之后继续设置任何非永久参数。

HTML5学堂小编 - 陈林&堡堡耗时6h

2016.07 第一周 群问题分享

如何用CSS实现一个元素footer一直贴在浏览器底部

margin-bottom负值、margin-top负值、Flexbox布局

如何用CSS实现背景透明文字不透明

rgba()

如何用CSS写出三角形并兼容IE6

盒模型的border

JavaScript中的toString()方法怎么用

toString()

怎样改变this指向

call()、apply()、bind()

2016.07 第一周群问题分享