skills

前端开发中小技巧和注意事项

1、浏览器地址栏中执行js代码

1
javascript:alert('hello,amo!');

这里需要注意的是：
如果是拷贝一段脚本到浏览器地址栏中，如果是IE或者Chrome会自动过滤掉javascript:部分，如果要保证能被正确执行请手动添加。但是对于Firefox不会。

2、浏览器地址栏中执行html代码

1
data:text/html,<h1>hello,amo!</h1>

这里需要注意的是：
只有在非IE内核的浏览器中才能正确显示。

3、把浏览器当编辑器

1
data:text/html, <html contenteditable>

这样浏览器就变成一个编辑器了。为什么可以实现呢？这是因为H5中新加了contenteditable属性，当元素指定了该属性，内容就变得可以编辑了。

如果对于一个现有的页面，想要将它变成编辑器模式怎么做呢？
可以在控制台中输入：

1
document.body.contenteditable = true;

4、清除浮动常用方法

在网页的布局上或多或少都会使用到浮动。但是浮动往往也会产生一些副作用，最常见的便是会影响兄弟元素和父元素。所以一定要记得清除浮动。我一般用以下两种方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.con {
    border: 1px solid #ddd;
    color: gray;
    margin: 10px auto;
    width: 500px;
}
.c-float {
    float: left;
}
.c-margin {
    margin-top: 50px;
}
.c-background {
    background-color: #ccc;
}
.clear {
    clear: both;
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
1
2
3
4
5
6
<!-- 被浮动影响，父元素高度塌陷 -->
<div class="con">
    <div class="c-float c-background">
        我设置了浮动
    </div>
</div>
1
2
3
4
5
6
7
8
9
<!-- 加入一个空的div，并设置清除浮动 -->
<div class="c-margin con">
    <div class="c-float c-background">
	    我设置了浮动
    </div>
    <div class="clear">
        我清除浮动
    </div>
</div>
1
2
3
4
5
6
<!-- 利用:after伪元素 -->
<div class="c-margin con clearfix">
    <div class="c-float c-background">
	    我设置了浮动
    </div>
</div>

demo