CSS 布局

布局的基本位置

top         距离上边的距离
right       距离右边的距离
bottom   距离下边的距离
left         距离左边的距离

 

去掉布局时 html 的3mm 边框 

 * {

         padding:0;

         margin:0;                       

    }

 

流式布局    -- 最基本的布局方式

 float

 float： left   向左流
 float： right   向右流
 clear： both   清掉流

 

       

 

       -- 在流式布局中，默认往下流动，并且占据整行位置

       -- 只有在给 float 一个方向时模块才会浮动起来

 

定位布局

  position

     position： fixed      -- 固定定位 

                 锁定位置（相对于浏览器的位置），例如有些网站的右下角的弹出窗口。

 

     position： absolute    --绝对位置 

           相对于父级元素（浏览器，绝对定位的上级）

           absolute  是为一个浮动的模块，占不住位置，

           可以随意排列位置，不会对其它任何布局位置有影响

 

     position： relative     -- 相对位置 

             相对于自身应该出现的位置

             是一个固定模块，能占住自己的位置   

             在 模块位置根据上下左右位置发生变化时，其自身应该出现的位置保留，不被其他模块占据  

             -- 常常用来作为 absolute 的父集使用
 

分层     

z-index： 数字                  

     值越大越靠上

 

转载于:https://www.cnblogs.com/Tanghongchang/p/6629567.html