8_3_html_div布局

Div布局

<div></div> 默认占据一行;

Float:left

由于每一个div都默认占据一行，所以设置 float属性可以设置div层向左浮动，即不再重新占据一行;在开发是最好所有的div都设置成浮动;

Overflow:hidden

在有些浏览器中div是有最小高度的，比如在IE6中默认高度为18px;当想要添加一个高度小于18px的div时，我们最好加上overflow属性，可以隐藏溢出的部分;

 

在整个页面开始时我们可以用*通配符设置网页所有标签下文字的大小等，

Etc：

*{ font-size:14px; margin:0px auto;}

这样还可以设置页面去掉顶部空白，居中;

 

在使用div布局时需要特别注意给每一个div定义样式，设置width和height，最好加上颜色,而且都要经过精确的计算;考虑到多种浏览器的兼容性，在页面中不应该出现<br/>或 之类的符号;由于margin和padding属性的兼容性较差,所以我们也最好不去使用这些属性，遇到文字在一个div中垂直居中的时候，我们在文字上方填充一个div;

 

最近学习的时候一直很在意浏览器兼容这件事，所以去查了一下主流浏览器内核的资料，下面是一篇文章中自己记下的内容;

 

1.Trident内核{windows} 即IE内核

老的Trident内核（比如IE6内核）一直是不遵循W3C标准的;

2.Gecko内核（跨平台）

Netscape6应用的内核，firefox浏览器也是gecko内核;

3.KHTML（Linux）

4.Webkit（跨平台）

Webkit脱胎于KHTML，safari浏览器就是Webkit内核;

5.chromium（跨平台）

Chromium其实就是Webkit，google的chrom浏览器采用这一内核;

6.presto（跨平台）

Opera采用的是这一内核;

 

由于html代码在被浏览器解释时是逐行解释的，所以采用div布局要比采用table布局的运行速度快一些（以我现在的经验是这么理解的）;如果遇到页面中存在非常整齐的文字块时，我们也会使用table布局，不过在这里可以使用div中嵌套<ul><li></li></ul>列表的方式布局文字;设置列表ul、li的list-style属性为none,设置向左浮动即可;

 

<span></span>

在页面中经常会出现一行文本中有几个字都单独的字体属性，在这里我们一般不使用<font>标签去设置，而是使用<span>标签更改样式;<span>标签和<div>一样都是层的概念，我们一般使用div对页面进行布局，二span则不能用来布局;

 

display:block

<a></a>标签中有设置属性display:block,可以使超链接以块状方式显示，并且可以设置块的宽度和高度;

 

在开发一个大型项目是可能会有上千张网页，而且很多情况下，非常多的网页会有相同的比如说头部页眉和底部页脚，如果我们每一张网页都去写或者复制代码的话，工作量就非常大，而且当相同的部分代码需要更改了，也会造成很大的困难;所以这里就有一个模板的技术;建立一个站点，添加模板*.dwt文件，写好模板后，其他页面只要使用模板就可以了，相同的代码部分在需要修改是指要更改模板，应用到所以网页即可;需要注意的是，只有在模板中插入模板对象 可编辑区域，才可以在应用了模板的网页中进行编辑;