css基础--Display(显示) and Visibility（可见性）and position （定位）-白红宇

css基础--Display(显示) and Visibility（可见性）and position （定位）

阅读量：5280 次

发布时间：2019-06-14

本文共 1707 字，大约阅读时间需要 5 分钟。

首先，我在这里有必要说一下display：none；和visibility：hidden；这两者之间的区别

简单得来说，使用display：none的时候，使用它的那个标签在页面上是不会占用空间的。

而visibity：hidden；则会在页面上留出哪部分的空白区域。

display可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。

下面的示例显示为内联元素的列表项：

1 li{2    display:inline:3 }

下面的示例是把span元素作为块元素:

1 span2   {3   display:block;4 }

Position(定位)

CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

Fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

div{
     position:fixed;  top:30px;  right:30px;}

Note: Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素和其他元素重叠。

相对定位元素的定位是相对其正常位置。

示例如下：

1 2 3 4 17 18 19 20

Relative positioning moves an element RELATIVE to its original position.

The style "left:-20px" subtracts 20 pixels from the element's original left position.

The style "left:20px" adds 20 pixels to the element's original left position.

26 27 28 29

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。

1 h22 {3 position:absolute;4 left:100px;5 top:150px;6 }

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性设置一个元素的堆叠顺序（哪个元素应该放在前面，或后面）负数表示放在后面，正数表示该放在前面。

一个元素可以有正数或负数的堆叠顺序：

1 img{2   position:absolute;3   left:0px;4   top:0px;5   z-index:-1}

伪类：

导航栏：

1  2  3  4 34 35 36 37 
     
      38 
      Home
39 
      News
40 
      Contact
41 
      About
42 
     
43 44

截图如下：

透明度：

点击之后即可恢复原图。

img{opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */}img:hover{opacity:1.0;filter:alpha(opacity=100); /* For IE8 and earlier */}

转载于:https://www.cnblogs.com/Terminaling/p/4067818.html

你可能感兴趣的文章