div+css布局总结

一 布局分为静态布局和响应式布局。我们div和css布局是静态布局。

    在静态布局下，用百分号和像素设置div等区块的width和heigth属性效果是不一样的。

                                                           百分号

    1 当你用百分号设置各个div（区块）的时候，是相对父元素的，当父元素相对父元素，父元素与又相对父元素最终到

      html元素的时候是相对的屏幕的height和width的，所以当你把所有的div（区块）的height和width的都用百分号的时候

      就可以实现响应式布局的效果，随着不同的屏幕分辨率来改变区块的实际像素。

   2 position：abselute；

      position：relative；

     abselute ： 来布局的时候父容器里面的子容器其都是相对于父容器来实现位置的偏移的，就是说div的左上角是和父元素的

      左上角对齐的（在没有内外边距的情况下）每一个子元素都是这样，都是独立于其他子元素来布局的，不会考虑覆盖的情况

      详细可以参考abselute和relative的使用。所以用abselute定位时，参照父元素，用百分比来实现响应式布局效果。

      设置top，left的值（用百分号）来实现位置的相对偏移。

      relative：relative是相对定位，区块的初始位置和偏移不是参照父元素，而是参照最近的一个父元素里面的他的上一个元素

      这样也可以设置top，left等属性的值（用百分号）来实现位置的偏移，而且可以达到响应式布局的效果。

                                                                像素px

用像素px来实现布局，直接设置父元素的height和width像素数，这样网页就是定长和定宽的了，遇到小屏幕会出现滚动条。