黄玲前端培训材料初稿.doc

第PAGE页

前端、、质检总结文档

一、总结

1.1样式文件管理

样式目录

1.2基本样式重置

网页设计，让人最头疼的莫过于让页面兼容各大浏览器，准确些是兼容它们“默认”的样式表。这样，“抹掉”这些默认样式表成了首要问题，也就有了样式表重置一说，目前用的最多的，添加以下代码：

第一种方式

*{:0;:0;}

现在众多的设计师发现，这行代码虽然简单，但却让网页解析太慢，呵呵，当然了，自己是业余的，不用太在意。

于是出现了几种重置方法：

第二种方式

,,,,,,p,h1,h2,h3,h4,h5,h6,,,,

,,,,,a,,,,

{:0;:0;:0;:;}

{:1:88%/*.*/;}

h1,h2,h3,h4,h5,h6{:100:.60:015;}

a{::;}

{::.5.5.50;}

{::.50.5.5;}

这个方法适用于大多数的网页设计。

第三种方式

一部分人追求彻底抹去浏览器影响

h1,h2,h3,h4,h5,h6,p,,,

a,,,,,,,

,,,,,,,q,s,,

b,u,i,,

:0;

:0;

:0;

:0;

:100%;

{:1;}

,q{:;}

{:0;}

/*0*/

{::0;}

第四种方式

还有提到的的提供的重置文件

123456{

:0;

:0;

{:0;}

{:0;}

h123456{:100;}

{:0;}

这些，没有谁好谁坏一分，大多数设计师并不推荐第一种方法。

1.3重点样式应用介绍：、

1.3.1盒子模型

在中元素的盒子模型分为两种：块状元素、行内元素，请注意这里的块状元素（）和行内元素（）及属性中的、两个属性值并不等同。盒子模型中的、类似于是属性的父类，例如：属性中的属性值是属于块状（）类型的。

我们直观的上看两种盒子模型的区别

块状（）类型的元素可以设置、属性，而行内（）类型设置无效。

块状（）类型的元素会独占一行（直观的说就是会换行显示，无法及其他元素在同一行内显示，除非你主动修改元素的样式），而行内（）类型的元素则都会在一行内显示。

块状（）类型的元素的默认为100%，而行内（）类型的元素则是根据自身的内容及子元素来决定宽度。

列举出一些大家常见的元素的分类

块状元素：P、、、、、...

行内元素：A、、、...

1.3.2的普通流

浏览器在读取源代码的时候是根据元素在代码出现的顺序读取，最终元素的呈现方式是依据元素的盒子模型来决定的。行内元素是从左到右，块状元素是从上到下。（如下图）

{:100;:50;:50;:;:;}

{:#808080;}

{:800;}

{:600;}:A:B:C

如果你不改变元素的默认样式前提下，元素在的普通流中会“占用”一个位置，而“占用”位置的大小、位置则是由元素的盒子模型来决定。因此，在后续讲的、属性是否会使元素脱离这个普通流是一个关键点。

1.3.3属性

属性定位的元素位于:0层。它是通过和来控制元素在0层左浮或右浮。会改变正常的文档流排列，影响到周围元素。元素在文档流中一个挨一个排列。但注意，只是元素之间一个挨一个排列，对于非的元素，元素是视而不见的，会越过它们。

如下面的一段代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

????{1#00f;}

????{01#000;}

????我是元素1

????我是非元素

????我是元素2

????我是元素3

1、2、3三个元素是的，它们会越过非元素一个挨一个排列，把非元素挤到最后了。效果如下图：

1.3.4属性

我们首先来谈谈属性，因为属性能够很好的体现普通流这个特征。重点在于应用了不同的值之后是否有脱离普通流和改变属性这两点。

的属性值共有四个、、、。

1.3.5

所有元素在默认的情况下属性均为，而我们在布局上经常会用到的相对定位和绝对定位常用的属性、、、在为的情况下无效。其用法为：在改变了元素的属性后可以将元素重置为让其回归到页面默认的普通流中。

1.3.6

俗称的相对定位，重点在于对相对理解。我们此前说过每个元素在页面的普通流中会有“占用”一个位置，这个位置可以理解为默认位置，而相对定位就是将元素偏离元素的默认位置，但普通流中依然保持着原有的默认位置，并没有脱离普通流，只