🌙布局和元素显示隐藏学习

一. 网页布局总结

1. 标准流

可以让盒子上下排列或左右排列  垂直的块级盒子显示就用标准流布局

2. 浮动

可以让多个块级元素一行显示或左右对齐盒子  多个块级盒子水平显示就用浮动布局

3. 定位

定位最大的特点是有层叠的效果  可以让多个盒子前后叠压来显示  如果元素自由在某个盒子移动就可以用定位布局

二. 元素的显示和隐藏

本质: 让一个元素在页面中隐藏或显示出来

基本的三种属性:

                        ❶. display 显示隐藏

                        ❷. visibility  可见性

                        ❸. overflow  溢出隐藏

1. display  显示隐藏

用于设置一个元素应如何显示

属性值:

            ❶.  none  隐藏元素

            ❷.  block  显示元素(或转换为块级元素)

注意:  display属性隐藏元素后  不再占有原来的位置

2. visibility  可见性

用于指定一个元素可见或隐藏

属性值:

            ❶. visible  元素可见

            ❷. hidden  元素隐藏

注意:  visibility属性隐藏元素后  继续占有原来的位置

3. overflow  溢出隐藏

用于如内容溢出一个元素的框(超过指定宽高)时会隐藏

属性值:

            ❶. visible  不隐藏内容也不添加滚动条

            ❷. hidden  不显示溢出的内容  如溢出内容 则溢出

            ❸. scroll  不管内容是否溢出 都添加滚动条

            ❹. auto  溢出的内容添加滚动条 不溢出不添加滚动条

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。