Python12/11--盒子的显隐/布局/z-index/流式布局思想

1。盒子的显隐

　　display:none      在页面中不占位，采用定位布局后，显示隐藏都不会影响其他标签，不需要用动画处理时，一般用这个

　　opacoity : 0        在页面中占位，采用定位布局后，显示隐藏都不会影响其他标签，要用动画处理时，一般用这个

　　一般显隐操作的盒子都是采用定位布局：

　　　　　悬浮父级，显示子级。

2。相对定位布局

　　　　设置定位属性，要先打开定位方位

position: relative;

通过定位方位完成布局

top: 100px;

left: 100px;

bottom: 100px;

right: 100px;

　　　　结论：1.参考系：自身原有位置********，  right参考的就是原有位置的右边界；

　　　　　　　2.top , bottom , left , right 都可以完成自身定位。left与right同时存在，只有left生效， 上下同时存在，只有top生效。

　　　　　　　3. left=  -right  　　top=  -bottom

　　　　　　　4.布局后不影响自身原有位置

　　　　　　　5.不脱离文档流

3。绝对定位布局

　　参考系: 最近的定位父级

　　position: absolute;  => 打开了四个定位方位

　　1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左

　　2.父级必须自己设置宽高，绝对定位布局一定存在父子关系

　　3.父级的高度不再依赖于子级，子级脱离文档流

　　绝对定位需要大家脱离文档流，相互不会影响布局，每个都是独立相对于父级进行布局的个体

4。固定定位布局

　　1参考系: 页面窗口

　　2.position: fixed;  => 打开了四个定位方位

　　3.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左

　　4.相对于页面窗口是静止的

　　5.完全脱离文档流

5。z-index

　　修改显示层级(在发生重叠时使用), 值取正整数, 值不需要排序随意规定, 值大的显示层级高

6。流式布局思想

　　1. 百分比

　　2. vw | vh => max-width(height) | min-width(height)

　　3. em | rem

盒子的显隐