HTML.定位（2）

水平方向9个值相加必须要等于父元素的内容的宽高，否则浏览器就会自动调整，这个过程

        还是叫过渡约束

 left+margin-left+border-left+padding-left+width+

 padding-right+border-right+margin-right+right -->

            -当开启决定定位后，水平方向的布局等式就会加上left，right两个值

               此时规则和之前一样，只是多添加了两个值

                 -当发生过度约束时

                     1:如果9个值中没有auto，则自动调整right值以使等式满足

                     2:如果有auto，则自动调整auto的值以使等式满足

                 -可设置auto的值

                    margin  width  left  right

                    四个值中，三个值固定，某一个值设为auto，则会调整这个auto值,

                     若width  left  right top  bottm都为固定值，

                     margin会均分四个方向值，让元素水平垂直居中  ***

                —两个auto的情况

                   margin 和width为auto，  调整width

                   margin 和left，right其中一个值为auto，调整left或right

                   width 和left，right其中一个值，调整left或right

                   left，right都为auto  调整right

                —三个auto的情况

                  margin  width  left ===> 调整left

                  margin  width  right ===>  调整right

                  width  left  right  ===> 调整right

                —四个值auto的情况

                   width，right，left，调整right

          垂直布局

              等式也必须满足

            top+margin-top+····+botoom

 

       水平方向总结

      只要right为auto，那就调整right

      right>left>width>margin

     

z-index  设置元素的层级  

            后面跟正整数，数值越大，层级越高

            注意：

             1、 z-index属性必须要开启定位的前提下使用

             2、设置z-index，父元素的层级再高也不会高于子元素

设置透明度第一种方式，rgba */

        background-color: rgba(138, 43, 226,.5); 

        

        设置透明第二种方式： opacity: ;0-1 

        opacity: 0.5;

        /设置透明的第三种方式 

         background-color: transparent; 

      }

    </style>

    <面试题：

    设置透明有几种方式？能说一说他们之间的区别？

    1、opacity是属性，rgba、transparent是属性值

    2、rgba、transparent是属性值，他必须要跟在特定的属性后，

        例如 background-color、color、border-color等

    3、opacity是属性，它有继承性,给祖先元素设置，会继承给它的后代元素

         相当于在元素前面放一层玻璃，整个元素都是朦朦胧胧的

       rgba、transparent是没有继承的，给谁设置，谁就有