应用html和css制作网页
制作网页之前，首先要看清楚网页的大体结构，然后要想清楚自己要怎么布局。需要用多少框，宽度，高度需要多少。记住一句话“一切皆为框”。只要了解框架的构成，就能把网页的大体结构做出来，然后只需要往里面加东西。就可以生成了 。
但框与框之间的距离，位置，并不是直接加上去就可以了。最直接的方法就是margin和padding。margin是可以用负数的，一旦用负数，就会脱离文档流。但是。有时使用它们不会按想法那样形成想要的距离和位置，因为对象不一样，它们不是相对移动，而是改变自身的大小。那这样就可能影响周围的元素的位置。所以我们要用到相对定位（relative）和绝对定位（absolu）。它们的对象是包含它们的父级，若父级没有规定定位，它们就会按顺序往上一级找。一直找到最大的html文档。所以有时在框内进行移动，感觉输入的距离很大，但没有怎么移动。那就可能是上一级没有设置定位。相对定位是元素移动了，但原来位置仍会保留。而绝对定位，原来的位置就不会保留，后面的元素就会补上去。所以，在移动之前，就应该想好怎么定位。
还有就是知道一些常用标签的含义和用法。块级元素是独占一行的，例如：<p>,<div>,<h>...,还有一些内嵌元素，就可以插在中间，比如：<a>,<span>,<strong>...还有有序列表<ol>和无序列表<ul>.正确的使用标签，就会更加准确的写好代码。
在写代码的过程中 id和class的使用也是很重要的。在<style>中引用id是用#xx的方式，而class则是.xx，这是必须要分清楚的。
在写代码的过程中，根据网页的布局，通常会用到浮动属性，可有左浮动和右浮动，浮动过后就会改变文档流，使得下面的内容会补到上面的空白处。有时候为了不让上面的浮动影响到下面内容的布局，就需要使用到清除浮动“clear属性”，有left，right，both。
还有display属性，可以改变元素的属性，是行内元素和块级元素互相转化，也是在网页布局中经常用到的。块级元素（block），行内块元素（inline-block）和内联元素（inline），行内元素是不支持高和宽的。
在调整位置的时候，会经常使用到border，但border通常会设置成1px，但是这样，就会多出1px的距离，有少许的影响布局的准确性。所以，outline就解决了这一个缺点。同样可以看到边框，确定div的位置，但是边框不会有1px的距离，所以，通常布局的时候可以用outline取代border。
原文：http://www.cnblogs.com/yj313530251/p/4929005.html