水平方向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是没有继承的,给谁设置,谁就有