CSS_定位_宽高自适应下

 和宽高自适应下

1.定位的基础属性，属性值

         2.定位的特殊情况

            1）绝对定位在兄弟关系中的演示效果

                 都添加定位（兄弟元素）====相对，绝对，固定

                 默认的是后面的把前面的遮盖住===产生效果===层级效果

                 如何调整层级顺序呢：

                 z-index属性

                  取值为纯数值，不带任何的单位，只能添加在已有定位的层级上面

                  取值越大 层级越靠上面

                  默认值z-index：auto====可以理解成0

                  也可以取负数

                  使用的时候，一定要添加在已有定位的元素中，没有定位的元素调整不了层级顺序

            2）绝对定位（父子关系）===父相子绝

               父元素能否使用其他的定位=====能使用

               如果父元素带了margin：0 auto的话，会让margin0 auto：失效

                失效的原因点：绝对定位会脱离文档流，不占页面

                父元素是可以使用绝对定位和固定定位，相对定位

                综合考虑：父元素推荐使用相对定位

            3)宽度自适应的盒子（不设置宽度）

              添加绝对（固定）定位后的盒子会脱离文档流，不占页面空间

              如果你的盒子是一个自适应的盒子（没有设置宽度的盒子）

              添加绝对和固定之后，仍然是自适应的（被文本撑开的）

            4）添加了固定定位和绝对定位后的元素会脱离文档流不占页面空间了

            5)绝对定位和固定定位可以改变元素的类型

            display：block

         3.定位和浮动的区别（定位：固定定位和绝对定位）

             浮动：让元素横向显示，进行布局区块的划分

             定位：进行元素位置的调整，能让元素横向显示，

             相同点：

               1）都能转换元素类型为：块级元素

               2）如果两个补位元素中都没有文本的话，二者实现的效果是一样的后面的元素都会上去补位置

               3）对于自适应的盒子来说，添加浮动和添加定位（绝对和固定），元素仍然是自适应的，是被文本撑开的

               4）脱离文本流，margin：0 auto失效

               5）都能解决margin-top作用在父元素上面的问题：

               他们都触发了BFC（块级格式化上下文）以一个独立的快进行显示；不会收到外界的干扰，也不会影响到外界

             不同点：

             1）概念不同

                浮动：如果后面补位的元素有文本，浮动容易产生环绕效果=====半脱离文档流

                定位：如果后面补位的元素有文本，不会出现文本环绕，自己把文本盖住了====全脱离文档流

         4.定位的使用情况问题

           static  relative   absolute  fixed  sticky

           静态定位：static====默认值======几乎不适应

           粘性定位：sticky====滚动吸顶====就这一种情况（其他地方不使用）

           固定定位：固定定位用来做：广告栏，流氓广告，楼梯层，遮罩层等效果

           大部分使用的是相对定位和绝对定位

            如果你就是调整元素位置为几个像素的时候====相对就可以了

            如果需要调整比较大的数值：=======绝对定位===父元素一定要加上相对定位

         遮罩效果：一定要用固定定位

         5.盒子位于水平垂直中间显示（面试题）

         如果制作浏览器中的水平垂直居中显示

         html,body{height:100%}

         .box{

             width:100%;

             height:100%;

             background-color:rgba(0,0,0,.5);

             添加定位

             position:fixed;

             top:0px

         }

         .box>div{

             width:500px;

             height:300px;

             background-color:red;

             position:abslute/fixed;

             top50%;

             left:50%;