零基础HTML5+CSS3学习笔记（一）

观看万门大学的免费课程跟着学习的。

参考书目：W3school

配置环境：工具准备：HBuilder，Google Chrome，FireFox，IETester，Opera(挪威公司的浏览器)

       安装HBuilder时，将压缩包解压到C盘programe files(x86)，在属性兼容性里选择以管理员身份运行软件，不然在后面会找你要各种权限你没有。这样环境配置就完成了。

先小试牛刀一下：

以淘宝网为例：

新建web项目

 ul>li*3这时候按Tab就可以迅速设置ul和li.

	
		
		
		
	
	
		

			

				
天猫
				
聚划算
				
天猫超市
			
		
	

效果 :

到此HTML部分就写好了，接下来是css部分：

 float:left是让三个词条横着排列，

line-height是字体上下居中，

font-weight:bold是字体加粗，

text-align是字体居中，

margin : 0 auto是导航条居中。

结果：

重要概念：块状元素和内联元素

块状元素：
                 1，容器，可以容纳其他的块元素和内联元素
                 2，块元素，排斥与其他元素排在同一行
                 3，块元素，width height起作用

内联元素：
                 1，容器，只容纳文本或其他的内联元素
                 2，内联元素，可以与其他的内联元素排在同一行
                 3，内联元素，width height不起作用

演示代码：

	
		
		
		
	
	
		

			
块元素
			
块元素3
			内联元素
			内联元素2
		
	

结果：

那么如何让一个内联元素能够有大小，能够有宽高？

加一句：display:block;

这就将内联元素改成了块状元素

结果显而易见，宽高出来了且单独一行。

浮动与定位：

div*2再tab一下就会有两个div出来。

在火狐和IE6中显示是一样的

 

将div2的宽度改成400px后，在#div1中加float:left;后，会发现一个有趣的现象

火狐中绿色在红色后面，而在IE6中却是排在后面的。同样的代码在不同浏览器中显示的不一样。

 

要想火狐也显示正确，就要在#div2中也加float:left;

IE的一个bug:

在#div1和#div2中加margin-left和margin-top;

结果显示是IE6的margin-left是60px,

 

IE在浮动中的一个bug出现条件：1，是块元素   2，使用了float:left  3，margin-left不为0

只要同时满足这三个条件，margin-left会double

那么怎么解决呢？

前面将内联元素变成块状元素用的display:block;

这里将块状元素变成内联元素就可以了，在#div1中加display:inline；

变成内联元素后宽高依旧存在。

想让两个块状元素平着排列用float的时候：

上面一个float，叠一个float，如果有margin-left的时候，前面一个要写display:inline;/*only for IE*/

。。。。。。。。。。。。。。。。。。。。。。

接下来，增加一个div

 

在两个浏览器中又显示不同

 

如何让火狐中蓝色排在绿色后面去？要用到clear

结果显示：

增加了第三个div,他有一个clear:both;在火狐中，让后续的块重起一行。