css传统布局

1、position.

       1)position:relative;      相对定位.    以自己所在位置为参考点.

                                                                    自己所在位置为 top:0; left:0;

                                                                    设置position:relative;后，元素位置不变，而且会占据自己所在位置.

                                                                    可通过设置left, top,(这两个很常用) right,bottom,来改变元素所在的位置，

                                                                   此时该元素属于浮动状态，但自己最初的位置不会被其他元素占用，自己也不会占据其它元素位置.

       

     2)position:absolute;      绝对定位.    以body左上角为参考点.

                                                                    body左上角位置为 top:0; left:0;

                                                                     设置position:absolute;后，元素不占据位置，会浮动起来，原来位置会被其他元素占据.

                                                                     可通过设置left, top,(这两个很常用) right,bottom,来改变元素所在的位置，

                                                                    对两个元素都设置position:absolute;时，可能会出现两个元素覆盖的现象，

                                                                    此时可以通过设置z-index:数值; 对它进行调节，数值大的会显现在上面.

     3)position:fixed;             一种定位：  以body左上角为参考点.

                                                                    body左上角位置为 top:0; left:0;

                                                                    设置position:fixed;后，此元素会定在页面所在的位置，不会随着页面的刷新而改变.

                                                                    而且此元素会浮动起来，不会占据任何位置，自己本身位置还会被其它元素占据.

                                                                     可通过设置left, top,(这两个很常用) right,bottom,来改变元素所在的位置.

     4)position:relative;  position:absolute;  联用：

                                                当元素设置 position:relative; 不设置其它改变值时，就表示此时元素是在给它的子级元素设置参考点，

                                                它的子级元素设置position:absolute;此时参考点便是父级元素所在的位置，

                                                 而且子级元素会随着父级元素的改变而改变.

2、margin. padding.

     1)margin.      元素与父级元素间的边距关系.

                             margin-left:10px;  左边距，margin-top:20px;  上边距，margin-right:30px; 右边距，margin-bottom:40px;  下边距

                             margin:10px 20px 30px 40px;  表示的顺序是 上 10px，右20px， 下 30px，左40px.

                             margin:10px 20px;  表示的是上 下是10px，左 右是20px，

                             margin:数值  auto:  可以使元素左右居中.

                             margin 有时设置单个值时会出现无反应的情况，此时可以尝试同时设置4个值.

    

     2)padding.    元素与子级元素间的边距关系.

                            padding-left:10px;  左边距，padding-top:20px;  上边距，padding-right:30px; 右边距，padding-bottom:40px;  下边距

                            padding:10px 20px 30px 40px;  表示的顺序是 上 10px，右20px， 下 30px，左40px.

                            padding:10px 20px;  表示的是上 下是10px，左 右是20px，

                            padding 有时设置单个值时会出现无反应的情况，此时可以尝试同时设置4个值.

      3)margin.   padding.   区别：

                       

3、float

    当元素设置float时，此时元素会浮动起来，不会占据位置.

    float:left;  左浮动，  float:right;  右浮动，

    两个元素只有同时设置float时，这两个元素才会排列在一排上，

    若只有第一个元素设置float，则第二个元素会在第一个元素下面的位置，

    若只有第二个元素设置float，则第一个元素不浮动，不会并列在一排，

    当有多个元素时，会使下面的元素出现浮动的现象，此时便需要清除浮动，

    clear:left;  清除左浮动，  clear:right; 清除右浮动，

    clear:both; 清除所有浮动       最常用

4、box-sizing.

     在规划页面时，常会因为边框要计算宽度和高度.

     box-sizing:border-box;   这样设置可以使边框不计入长度与宽度的计算，

     以便我们更好的进行页面的规划 .

   

                 注释：1、2、3为css中布局的知识，4是css3中布局的知识.

                             top,left,right,bottom    设置值时，值为0时 后面不需要写px，值为其它值时，必须要写上px才有效.