定位浮动伪类伪元素

浮动

文档流

文档流的简单定义：正常文档流，将窗体自上而下地分成一行一行，块元素 独占一行，相邻行元素在每行中按照从左到右依次排列顺序。

而脱离正常文档流可以将正常显示顺序打乱，比如将最底部的某个div元素抽出来，显示在其他元素前边。
float脱离正常文档流，但不脱离正常文本流。
其他元素会无视它所占据了的区域，直接在它身下布局。

demo1设置float以后

但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。

float属性值	样式
left	元素浮动到其容器的左侧
right	元素浮动在其容器的右侧
none	元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit	元素继承其父级的 float 值

clear

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。

因此，创建浮动框可以使文本围绕图像：

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：

定位

position属性	样式
static	默认
relative	相对定位
absolute	绝对定位
fixed	混合定位（滑动鼠标但是位置不变）
inherit	继承父类
z-index	指定元素的堆栈顺序

代码示例：

position: absolute;
top: 10px;
left: 10px;    

伪类伪元素

a:link{
    color:black;}
a:hover{
    color:red;}
a:visted{
    color:purple;}
a:active{
    color:green;}

link为未点击时的样式，hover为鼠标悬停时的样式，visted为点击过的样式，active为点击的一瞬间的样式。
点击前鼠标悬停点击的一瞬间点击以后
结构伪类选择器：

table tr:nth-child(odd){
    color:red;
}

可以对table的odd奇数或者even偶数行进行设定。

还有一些其他的：

::first-line 伪元素用于向文本的首行添加特殊样式。

p::first-line {
  color: red;
}

::first-letter 伪元素用于向文本的首字母添加特殊样式。

p::first-letter {
  color: red;
}

::before 伪元素可用于在元素内容之前插入一些内容。

h1::before {
  content:"before";
}

::after 伪元素可用于在元素内容之后插入一些内容。

h1::after {
  content:"after";
}