关于网页布局

最近在做一些关于网页布局的任务，关于网页布局和样式等方面的知识，一直没有一些系统的资料将所有使用场景全部囊括，这方面的知识总是需要不断的实践和积累的，所以突然想要做一些总结，以便应对之后可能出现的情况。现在将关于网页布局的一些知识进行说明。

网页布局总共有三种定位方式，分别为标准文档流，绝对定位、浮动定位方式。

当然在此之前，须知CSS3的最基本的概念。盒子模型：外边距（margin），边框（border），内边距（padding），盒子中的内容（content）。这是设置样式必须了解的。

自动居中：设置width的值（–px或–%均可），然后设置margin设置为0 auto。注意：设置了自动居中不要设置position：fixed。可以设置这个body处于居中的样式。

下面就3种定位机制分别说明:

• 1、标准文档流：满足输出内容按照从上到下、从左到右的顺序进行输出显示，当元素为行级元素时在上一元素后显示，当为块级元素时另起一行并占据一行。
• 2、浮动定位（float）：浮动float属性有left、right、none。浮动模块之间的间距通过设置margin值来设置。在设置浮动属性后可能对其他元素有影响（如在mainbody中设置left和right，可能使mainbody和footer产生影响，使布局混乱。）在此时需要清除浮动产生的影响，设置overflow：hidden；即可消除。
• 3、绝对定位（position）:又可分为3中定位方式，分别为静态定位（static）、绝对定位（fixed和absolute）、相对定位（relative）。下面将对其进行一一说明。 （1）静态定位（static）：默认的定位方式，出现在正常流中，不受left，right，bottom和top的影响。 （2）绝对定位： a）固定定位fixed：相对于浏览器窗口为偏移标准，设置left和top等值。当滚动条滚动时，位置固定，不移动，其他元素可从下方穿过。应用在如网页广告始终位置不变出现在一定位置。 b）绝对定位absolute：当有使用绝对定位的祖先元素时，根据最近的绝对定位祖先元素偏移，当没有时根据进行偏移。设置left和top等值。当设置了绝对定位而没有设置宽度时，元素宽度自适应。 （3）相对定位（relative）：仍处于文档流当中，相对于自身原位置进行偏移，设置top和left等值。