基本位置属性，定位布局

一，基本位置属性

            display: block;

            块级标签：

             1、独占一行

             2、不设置宽度的时候默认占满父级宽度

             3、居中：margin:auto;            

            display: inline-block;

            内联标签：

             1、同行排列

             2、不设置尺寸时，靠内容撑开

             3、文字居中：父级设置：text-align:center;

            display: inline;

             1、同行排列

             2、尺寸设置无效

            默认文本流水布局

             1、移动盒子方法：通过margin方法或者设置父级弹性盒子

             2、所有盒子都在一层，一个移动了，另一个就跟着移动

             3、应用场景：常见页面中90%布局都是默认文本布局

             

二、定位布局

position ：static

静态定位/常规定位/自然定位

作用：使元素定位于常规流/自然流中

特点：

• 忽视top、bottom、left、right、z-index，是这些关键字作用失效
• 如果两个元素都设置了外边距，最终的外边距取决于外边距大的
• 在具有固定width和height值时的元素，如果把左右边距设置成auto，则左右边距会自动扩大占满剩余宽度，实现这个块水平居中的效果

position : relative 相对定位

           盒子特性与static完全一致，所有盒子都在一层

           移动方式：通过left, top, bottom right 四个值修改盒子位置

               left > 0 向右移动

               left < 0 向左移动

               right  > 0 向左移动

               right  < 0 向右移动

               top > 0  向下

               top < 0 向上

               bottom > 0向上

               bottom < 0 向下

            通过left,right,bottom,top修改盒子位置时，对页面布局没有任何影响

            应用：

                    布局完成后，盒子的位置微调整

                    定位父级标识

            positon：fixed  固定定位

            1、possition：fixed 盒子不在具有默认文本流盒子的布局特性，变成一个支持所有CSS样式设置

            并且不具备任何样式的普通盒子。脱离原始文本流，生成一个独立位置图层，对其它盒子位置没有

            任何影响。

            2、改变位置方式：通过定位属性left、top、right、bottom

                left：盒子的左边到浏览器左边之间的距离

                right：盒子的右边到浏览器右边之间的距离

                top：盒子的上边到浏览器上边之间的距离

                bottom：盒子的下边到浏览器下边之间的距离

                水平方向：

                width设置了：一次只能设置一个定位属性left，right。如果同时设置，left生效

                width没有设置：left，right将同时生效，将盒子宽度拉开或者压缩

                htight设置了：一次只能设置一个定位属性top、bottom。如果同时设置，top生效

                height没有设置：top，bottom将同时生效，将盒子高度拉开或者压缩

            3、移动过程中，每个fixed盒子都是一个独立的图层，如果位置重叠会出现覆盖的情况

                通过z-index属性设置，可以来明确盒子的图层等级，值越大，图层等级越高，越能

                覆盖在其它盒子之上

            4、应用场景：

                     只要不随浏览器内容滚动而滚动，固定停留在浏览器视窗范围内的盒子，都可以使                  用 fixed定位，一般使用时，只要给固定内容的父级添加fixed即可，内部布局依然使默                    认文本流布局法，需要固定定位标签结果可以卸载文档的任意位置，不影响渲染结果。

position : absolute 绝对定位

          1、盒子特性布局特性： 生成自己的独立图层，不在占有默认文本界面位置，不再具备默认文本流盒子特性，变成一个支持所有CSS样式的，普通盒子

          2、通过left,top,right,bottom四个属性修改盒子位置

             left : 盒子的左边，到其“定位盒子”左边的距离

             right: 盒子的右边，到其“定位盒子”右边的距离  

             top : 盒子的上边，到其“定位盒子”上边的距离

             bottom : 盒子的下边，到其"定位盒子"下边的距离

             定位父级：

                1、位置属性不是static， 一般在没有位置属性设置的前提下，主动设置成relative

                2、当有多个父级，位置属性都不是static时，在文档书写结构与定位盒子距离最近的标签为定位父级

             left,top,bottom,right, 在不设置宽高的时候，默认都会生效，将盒子尺寸拉开，或者压缩。

             如果设置width,height,那么 left, top优先生效  

           3、绝对定位的盒子，移动过程中，由于各自的图层互相独立，因此在移动时会出现区域互相覆盖叠加的情况

              通过z-index可以设置图层等级，z-index越大，图层等级越高，越能盖在其他盒子之上

           4、应用：

             再需要实现，图层叠加的场景下，并且叠加关系，要能够固定，并随着页面一起滚动。那么盖再其他元素上的标签

             需要使用绝对定位 

             4-1 ： 图片之上叠盒子

             4-2：  与hover交互相互配合，隐藏显示一个新盒子时，需要绝对定位

             4-3： 游戏动画场景的元素需要使用 绝对定位