网页前端DIV定位笔记

从以前的Table做框架到现在最新的div定位，过程确实不是很适应，总怕出现不少的页面混乱。在转型过程中学习了不少东西，与大家共勉：

1、怎么让div居中

以前用Table的时候都是使用align，但现在很多浏览器都失效了。使用div+css，就很简单了，

给div加上margin:0 auto

0是指上下边距为0px，而auto就比较特别，他是使左右自动适应，就是居中的意思。这个对所有块元素都可以使用

而使块元素内文字、图片居中，就需要使用text-align：center了。text-align很特别，他不光针对text，还针对其他的块内容。

因为align已经被他替代了。

2、如何让div中内容贴近容器底部

如果是文字或者其他块级元素。使用定位的思想。position：absolute，然后boottom：0。

父元素注意要设置一下position：relative。因为绝对定位是相对于最近一个非static定位的元素的相对位置。

 但是如果出现多个元素在同一父元素内 同时需要绝对定位移动位置，那么需要注意，如果直接这样做，

会造成那些元素重叠，而不是与float一样的正常排布，这是因为他们有相同的父元素，使用绝对定位之后就都会移动到父元素的左边，

而不是还处在原来的位置，为了解决这种情况，需要给那些需要移动位置的元素 嵌套一个父元素，让他们的父元素去定位，

给他们的父元素设置relative，这样原先的父元素就变成了爷元素。这样一来，再给他们设置完绝对定位加位置属性之后就不会出现重叠的效果，

因为他们都是在父元素的限度内去移动，再跑也跑不出来。这样就又不重叠，又能贴近底部，但是需要注意。新嵌套的父元素需要一个固定的高度，

高度要高于内部元素。不然他的高度就是被内部元素撑开的。

3、Box模型

要做出好看的框架，这个Box模型就需要好好的认清楚，设置的width和height只是设置了CONTENT的大小。

BOX的宽度=MARGIN*2+BORDER*2+Padding*2+CONTENT（width）