CSS知识点2

伪类

  在所有浏览器中,超链接的样式在鼠标点击不同时期的样式是不一样的。

  (1)默认情况:字体为蓝色,带有下划线。

  (2)鼠标点击时:字体为红色,带有下划线。

  (3)鼠标点击后:字体为紫色,带有下划线。

  我们可以使用text-decoration: none; 来去除超链接下划线。

  <a href="#">默认超链接样式</a>

  <a href="#" style="text-decoration: none;">去下划线超链接样式</a>

       链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。

       特别的链接,可以有不同的样式,这取决于他们是什么状态。

       这四个链接状态是:

  • a:link - 正常,未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

    当设置为若干链路状态的样式,也有一些顺序规则:

  •        a:hover 必须跟在 a:link 和 a:visited后面
           a:active 必须跟在 a:hover后面

隐藏元素

  可分为两种隐藏方式:Display(显示) 与 Visibility(可见性)

        display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏。隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

  

  图一  display :none   隐藏(不占位置)

               两行之间没有空间

  图二  visibility:hidden      隐藏(占位置)

      两行之间有空间

            由图可知两者之间的差距

Display - 块和内联元素   

  三种标签模式:display

    块标签(block):  默认占一行   默认宽高为0 可以设置宽高

    行内块标签(inline-block)  不占一行   可以设置宽高

    行内标签(inline)不占一行   不可以设置宽高 宽高根据内容来和 span一样

       层级:z-index    数字越大越在上层(前面)层级高

原文地址:https://www.cnblogs.com/zhai113/p/11275039.html