盒子的显隐

Posted 2021-01-27 yanhui1995

# 一.浮动布局的总结
# 1.同意结构下,如果采用浮动布局,所有的同级别兄弟标签采用浮动布局
# 2.浮动布局的盒子宽度在没有设定时会自适应内容宽度

# 二.盒子的显隐
# display:none;
# 该隐藏方式在页面中不占位,显隐都不会影响其他标签布局,不需要用动画处理时
#
# opactiy:0;
# 通过控制盒子的同名度来隐藏盒子,该隐藏方式在页面中占位,一般显隐操作的盒子都是采用定位布局;
# 显隐都不会影响其他标签布局,需要用动画处理时

# 三.定位布局
# 什么是定位布局:可以通过上下左右四个方位完成自身布局的布局方式

# 1.相对定位
#     设置定位属性,就会打开定位方位
#     参考系: 自身原有位置
#     position: relative;
#     通过定位方位完成布局
#     top: 300
#     px;
#     left: 300
#     px;
#     bottom: 300
#     px;
#     right: 30
# /*结论*/
#        /*1.左右取左,上下取上(eg:left与right共存是left生效)*/
#        /*2.left=-right,top=-bottom*/
#        /*3.参考系:自身原有位置(不是某一个点,eg:right参考的就是原有位置的右边界)*/
#        /*4.自身布局后不会影响自身原有位置*/
#        /*5.不脱离文档流(脱离文档流:不再撑开父级高度.)*/

# 2.绝对定位
#     设置定位属性,就会打开定位方位
#     position: absolute;
#     一般父级采用的是相对定位布局，一般情况下，父级不需要脱离文档流
#     如果父级需要脱离文档流，用绝对定位完成布局，完全可以，不会影响自己相对于自身的布局，
#   但是自身又需要一个在文档流中的（不脱离文档流中的）定位参考父级=> 父级相对定位，子级绝对定位

# <!-- 绝对定位布局一定存在父子关系 -->
#  <!-- 导入定位布局时，父级设置宽高没？（设置了）子级呢（也设置了）=> 父级的高度不再依赖于子级 => 子级脱离文档流 -->
#  <!-- 参考系：最近的定位父级 -->

# <!-- <div class="box"></div> -->
#  <!-- 1.top|bottom|left|right都可以完成自身布局，上下取上，左右取左 -->
#  <!-- 2.父级必须自己设置宽高 -->
#  <!-- 3.完全脱离文档流 -->

# 3.固定定位
# 设置定位属性:
    # position: fixed;

    # / *参考系：页面窗口 * /
    # / *1. top | bottom | left | right都可以完成自身布局，上下取上，左右取左 * /
    # / *2.相对于页面窗口是静止的 * /
    # / *3.完全脱离文档流

# 4.z-index
# 父级左相对定位处理，并不是自己需要用定位完成布局，最重要的原因是辅助子级完成绝对定位布局
# 绝对定位需要大家脱离文档流，相互不影响布局，每个都是独立相对于父级进行布局的个体
#
# .b3 {
#        /*虽然子级脱离了文档流，但是父子关系以及存在，子级获取的100%还是父级对应的值*/
#        left: calc(( 100% - 75px) / 2 );
#        top: calc(( 100% - 75px) / 2 );
#        background: green;
#        /*z-index改变显示层级，显示层级的值为正整数，值越大显示层级越高。*/