CSS / 定位拓展+轮播图案例+元素的显示隐藏

目录

定位的拓展

定位叠放次序

绝对定位的盒子居中算法

定位特殊特性

绝对定位固定定位会完全压住盒子

元素的显示隐藏

display(重要)

visibility

overflow 溢出


定位的拓展

定位叠放次序

z-index 来控制盒子的前后次序 (z轴)

  • 数值可以是正整数负整数或0 默认是auto 数值越大越靠上
  • 如果属性值相同,则按照书写的顺序后来者居上
  • 数字后面不能加单位
  • 只有定位的盒子才有z-index

绝对定位的盒子居中算法

加了绝对定位的盒子不能通过margin auto来水平居中

left:50% 父容器宽度的一半

margin-left:负的绝对定位盒子宽度的一半

垂直居中

top:50%

margin-top:负的绝对定位盒子高度的一半

定位特殊特性

绝对定位和固定定位也和浮动类似

  • 行内元素添加绝对定位或者固定定位,可以直接设置高度和宽度
  • 块级元素添加绝对定位或者固定定位,如果不给宽度和高度,默认大小是内容的大小
  • 浮动元素、绝对定位、固定定位元素是脱标的盒子,都不会触发外边距塌陷的问题

绝对定位固定定位会完全压住盒子

,压住所有内容

和浮动不同,浮动只会压住下面标准流的盒子,但是不会压住下面标准流盒子里的文字、图片,可以做文字环绕效果

如果定位的盒子同时有left属性又有right属性则执行left

同理top和bottom执行top

综合案例:轮播图





    
    
    
    Document
    



    
    


元素的显示隐藏

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

1.display 显示隐藏 

2.visibility 显示隐藏

3.overflow 让溢出部分显示隐藏

display(重要)

display:none; (隐藏) 隐藏后不再占有位置 (用处更多)

display:block; (显示) 除了转换成块级元素 还可以用于显示元素

当鼠标经过box时显示mask

.box:hover .mask{display:block;}

.box得是mask的父元素

visibility

inherit 继承父对象的可见性

visible 可见

hidden 隐藏 隐藏后继续占有原来的位置

overflow 溢出

visible 可见 默认就是可以显示溢出内容的

hidden 隐藏 不显示超过对象尺寸的内容 如果是有定位的盒子 要慎用,因为它会隐藏多余的部分

scroll 溢出的部分显示滚动条 可以拖着看 没有超出也显示滚动条

auto 在需要的时候添加滚动条 超出才有滚动条

综合案例:视频遮罩





    
    
    
    Document
    



    
    

你可能感兴趣的:(前端学习,css,前端)