关于伪类、伪对象和定位

发表于 | 分类于

清除浮动

当一个容器中的所有元素都设置浮动后，一定要记得清除浮动。如果不清除浮动，会造成页面坍塌（即某些元素尺寸会消失）。

常用清除浮动代码：

clear:both;  /*清除所有浮动*/
clear:left;  /*清除左浮动*/
clear:right;  /*清除右浮动*/

伪类

CSS伪类是用来添加一些选择器的特殊效果的。

常用伪类

a标签的伪类

a标签伪类在使用时需要注意先后顺序，否则设置可能不会生效。

  • 在CSS定义中，a:hover 必须被置于 a:link 和a:visited 之后，才是有效的。
  • 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
  • 伪类的名称不区分大小写。

快速记忆 love and hate

a:link{} /* 未访问的链接 */
a:visited {}  /* 已访问的链接 */
a:hover {}  /* 鼠标移动到链接上 */
a:active {}  /* 触发链接 */

代码示例：

a:link{
      text-decoration: none;
      color:rgb(2, 184, 162);
    }
    a:visited{
      color:rgb(2, 184, 162);
    }
    a:hover{
      color:#fff;
      background:rgb(2, 184, 162);
    }
    a:active{
      color:#fff;
      color:rgb(1, 121, 107);
    }

伪对象

:before 选择器在被选元素的内容前面插入内容。
:after 选择器在被选元素的内容后面插入内容。

注意:before 和after必须和content结合使用，即使没有内容插入也要写content=””

:first-letter 对象内的第一个字符的样式设置
:first-line 对象内第一行的样式设置

利用伪对象清除浮动

.cl::after{
	content=" "; 
	dispaly=block;
	clear=both;
}

定位

元素定位时使用到的position属性有static、relative、absolute和fixed等几种取值（还包括CSS3中新增的几个取值，这里先不说）。

  • static

    默认即为static定位，即没有定位，元素出现在正常的流中。

  • relative

    相对定位：相对于元素自己原来所在位置的定位。

    注意

    • 相对定位的元素不会脱离文档流
    • 相对定位元素经常被用来作为绝对定位元素的容器块

  • absolute

    绝对定位：相对于最近的有定位的祖先元素定位.

    注意

    • 对象会脱离常规流，此时偏移属性参照的是离自身最近有定位属性的祖先元素
    • 如果没有定位的祖先元素，则一直回溯到html元素
    • 盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠

  • fixed

    元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。

    • Fixed定位使元素的位置与文档流无关，因此不占据空间。
    • Fixed定位的元素和其他元素重叠。