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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-07-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的知识天地

JavaScript学习笔记

【如果大家对程序员,web前端感兴趣,想要学习的,关注一下小编吧。加群:731771211。免费赠送web前端系统的学习资料!!前端学习必备公众号ID:mtbc...

662
来自专栏前端儿

前端代码相关规范

项目目录和文件的命名使用小写字母,避免使用大写或驼峰,多个单词以下划线 _ 分隔  如:my_project/cast_detail.js

1103
来自专栏进击的君君的前端之路

jQuery动画与ajax

1353
来自专栏HTML5学堂

2016.05 第三周 群问题分享

HTML+CSS 一个div里面有个img标签,div的高度由img撑开;img的兄弟级有个div要使内层div的高度等于外层div的高度,除了用JS实现,还能...

34913
来自专栏Micro_awake web

HTML&CSS书写规范

第一部分:HTML书写规范: 1.1 HTML整体结构: 1.1.1:HTML基础设施: 文档以"<!DOCTYPE...>"首行顶格开始,推荐使用"<!DOC...

18610
来自专栏blackheart的专栏

[C#1] 7-枚举

1.Enum 枚举是定义了一组符号名称和数值对,如下: 1 //byte、sbyte、short、ushort、int、uint、long 或 ulong ...

19110
来自专栏对角另一面

读Zepto源码之Selector模块

Selector 模块是对 Zepto 选择器的扩展,使得 Zepto 选择器也可以支持部分 CSS3 选择器和 eq 等 Zepto 定义的选择器。 在阅读本...

1760
来自专栏性能与架构

JS中控制好this关键字的指向

javascript中的 this 的指向不太好控制,理解不好的话很容易错误 下面几个示例可以加深对this指向的理解 (1)内联事件 <a href="...

25911
来自专栏前端知识分享

第87天:HTML5中新选择器querySelector的使用

1、document.querySelector("selector"); selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回nu...

873
来自专栏前端说吧

vue-学习笔记(更新中...)

3885

扫码关注云+社区