显示方式+盒模型相关

Posted 2021-01-08 liangchengyang

display:
块:1.独行显示 2.支持宽高,宽默认适应父级,高默认由子级或内容撑开 3.设置宽高后,一定采用设置的宽高
内联:1.同行显示 2.不支持宽高
内联块:1.同行显示,之间有间距 2.支持宽高,宽高由内容撑开 3.设置宽高后,一定采用设置的宽高,但只设置其中一个,另一个会根据内容等比缩放

嵌套规则:
    块可以嵌套所有类型(p一般只允许嵌套内联)
    内联一般只嵌套内联
    内联块一般只作为最内层级
    
overflow:
对父级进行overflow设置
    以滚动的方式允许子级所有内容显示
    overflow: auto;
    overflow: scroll;
    只运行子级在父级所在区域的部分显示,超出的部分影藏
    overflow: hidden;
盒模型之隐藏:
方式一:
    以背景颜色透明度隐藏,不需要掌握
    盒子还在,内容或子级标签均会被显示
    
方式二:
    
    以盒子透明度隐藏:0~1
    盒子真正意思上透明,但盒子区域占位还在
    opacity: 0;
方式三:
    盒子从文档中移除,盒子的区域占位消失
    当盒子重新获得显示方式,该盒子依旧从消失位置显示
    display: none;
    
层级结构:
没有层级结构情况下:
    1.盒子布局间相互影响程度很大
    2.要严格遵循从上至下布局顺序进行布局
    问题点:牵一发动全身