css中display设置显示隐藏、定位功能

文章目录

前言

一、display

opacity

效果图：

二、定位

1.为什么要定位

2.定位模式

静态定位

相对定位

绝对定位

---

前言

知识点的延伸显示隐藏，display在我们之前学习的知识点里面我们的display属性是给我们来设置元素转换模式的。但是除了元素转换之外，display还可以显示隐藏元素。

一、display

display：none         隐藏元素，在文档的位置也会消失，但是真实的DOM还是存在文档的

display：block        可以转为块级元素，还可以显示被隐藏的元素。

opacity

取值范围0-1,【0完全消失，1完全显示】这个属性和display：none隐藏元素有一个很相似的地方都是能够让元素隐藏的，但是display能够让元素的位置在页面中消失，但是opacity这个属性只是让元素看不见，但实际上位置还在原来的地方，另外一个区别就是display显示隐藏不能直接让一个元素直接使用hover直接显示，但是opacity可以使用hover显示。

    
    
    
    
    



    
出现吧 
    
    

效果图：

当我鼠标聚焦在文字上才会出现被隐藏的元素。 

opacity和display的区别：【display不占位置，opacity占位置它于rgba有点类似】

 

 

 

 

 

二、定位

1.为什么要定位

当我们滚动窗口的时候，某些盒子是固定屏幕的某个位置的，比如一些导航栏。

这样的效果，标准流成浮动都无法快速实现，此时需要定位来实现。

定位的组成：

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位=定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

2.定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：

static	静态定位（默认）
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移：

边偏移就是定位的盒子移动到最终位置。有top、bottom、left、right四个属性。

top	顶端偏移量（定义元素相对于其父元素上边线的距离）
bottom	底部偏移量（定义元素相对于其父元素下边线的距离）
left	左侧偏移量（定义父元素相对于父元素左边线的距离）
right	右侧偏移量（相对于父元素右边线的距离）

静态定位

默认的元素定位方式，无定位的意思。

选择器{position：static}        静态定位按照标准流特性摆放位置，它没有边偏移；静态定位在布局时很少遇到。

相对定位

元素的移动位置是根据它自身原来的位置而言

选择器{position：relative}

相对定位的特点：

•         它是相对于自己原来的位置来移动的（移动位置参照点是自己原来的位置）
•         在原来标准流的位置继续占有，后面的盒子仍然以标准流方式对待它（不脱标，保留原来位置）

绝对定位

元素移动是相对于它父元素。

选择器{position：absolute}

其特点：

• 如果父元素没有定位，则以浏览器为准定位。
• 如果祖先元素有定位（相对、绝对、固定），则以最近一级的有定位的元素作为参考点移动位置。
• 绝对定位不在占有原先的位置（脱标）。

案列展示

---

效果图：

 

 上一篇：盒子样式及阴影