网页制作的总结

一. 盒子模型

在css中，width和height指的是内容区域的宽度和高度，增加内边距， 边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。

二.清除浮动，清除默认样式

````
 /*清除默认样式*/
body{
    margin: 0px;
    padding: 0px;
}

/*清除浮动*/
.clearfix {
    zoom: 1;
    display: table;
}
````

三.使用float应该注意

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。 注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

• 注意，图片本身有高度和宽度。其他浮动元素会碰到它的边框停下。 这就是文字环绕图片的原理。
• 浮动会让元素塌陷。即被浮动元素的父元素不具有高度。例如一个父元素包含了浮动元素，它将塌陷具有零高度。你可以按以下方法处理：

1. 在浮动元素后加个div设置clear: both; height:0,overflow:hidden
2. 使用clearfix;
3. 设置父元素浮动;

四.制作弹出层

需要的知识点：

• 定位：absolute,relative,fixed
• 事件：onload,onclick
• DOM操作：getElementById(),scrollHeight(),clientHeight(),createElement(),appendChild(),removeChild(). 静止定位：相对与当前状态的屏幕静止。