CSS布局(下)

上篇博文讲解了float布局.这篇讲解position. position也会脱离文档流.但是和float有区别

首先声明position属性有三个可选的值.分别是absolute,relative,fixed

对比

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<style>
#first{
width: 500px;
height: 200px;
position: absolute;
background-color: red;
left: 50px;
}

#second{
width: 500px;
height: 200px;
position: absolute;
background-color: black;
right: 50px;
}

</style>

<body>
<div id="first"></div>
<div id="second"></div>
</body>
阅读全文 »

CSS布局(上)

提到布局,立马有些人想到响应式布局,如果再说float,position略显寒碜.
不过又有多少人能真正掌握浮动布局,定位布局呢
再讲解float和position之前先要明白.使用float和position的元素会脱离文档流.

①     
   > 一个左浮动,一个右浮动
   > 从右向左拖动浏览器右侧
   > 现象:左的div不动,右侧div依然出现在浏览器窗口随着移动    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <style>
#first{
width:100px;
height:100px;
background:red;
float: left;
}

#second{
width:100px;
height:100px;
background:black;
float: right;
}

</style>

<div id="first"><div>
<div id="second"><div>
阅读全文 »

JavaScript中的this

和变量不同,关键字this没有作用域的限制,嵌套的函数不会从调用的函数中继承this
如果嵌套函数是方法调用,其this的值指向调用他的对象
如果嵌套函数作为函数调用,其this值不是全局对象(非严格模式)就是undefined(严格模式)

很多人误以为调用嵌套函数时this会指向调用外层函数的上下文.如果你想访问这个外部函数的this,
需要将this的值保存在一个变量里,这个变量和内部函数都在同一个作用域内,通常使用变量self(_this)来保存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var o = {
m:function(){
var self = this;
console.log(this === o); // =>1
console.log(this === window); // =>0

function f(){
console.log(this === o);// =>0
console.log(this === window);// =>1
console.log(self === o);// =>1
}
f();
}
}
o.m();

有些烦心事

Beautiful

Ajax

Ajax简介

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax</title>
</head>
<body>
<script>
function CreateAjax(){
return new XMLHttpRequest();
}
var XHR = CreateAjax();
XHR.onreadystatechange = function(){
if(XHR.readyState == 4 ){
if(XHR.status == 200){
alert(XHR.responseText);
}
}
}

阅读全文 »