浮动、定位、伪类、伪元素

第一部分：文档流定位

HTML元素会默认从上到下、从左到右的排列，这种定位方式称为文档流定位。文档流定位是根据元素的不同性质对元素进行定位的。

第二部分 浮动

浮动定位可以用于文字环绕图片或多列布局的情况。默认情况下，块元素独占一行，如果希望几个块元素在一行上水平排列，则可以采用浮动定位

浮动的两个属性：
float属性：用于设定浮动
clear属性：清除浮动元素的影响

1.float属性

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。
float 属性可以设置以下值之一：

• left：元素浮动到容器的左侧
• right：元素浮动到容器的右侧
• none：元素不会浮动（将显示在文本刚出现的位置）
• inherit：元素继承其父级元素的float
  
  (图片采用了右浮动）

<style>
image{
		float:right;
	}
</style>

2.clear属性

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

clear 属性可设置以下值之一：

• none：允许两侧都有浮动元素
• left：左侧不允许浮动元素
• right：右侧不允许浮动元素
• inherit：元素继承其父级的clear元素

在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。

3.clearfix

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：
然后我们可以向包含元素添加 overflow: auto;

4.浮动定位脱离了文档流

浮动定位已经脱离了正常的文档流定位


（ 浮动定位的样式以及css样式表）

第三部分 层定位

层定位可以使元素像图像软件中的图层一样产生上下叠层的效果
层定位根据定位的参照物不同，分为以下步骤：

1. 确定定位方式：运用position属性：

static：默认值，表示没有定位，元素出现在正常的文档流中
fixed：相对于浏览器窗口进行定位
relative:相对于元素原来的位置进行定位
absolute：相对于static定位以外的最近的父元素进行定位
sticky：相对于可滚动的最近的父元素进行定位

2. 确定元素的位置：通过设置left、right、top、bottom决定元素的位置
3. 确定元素的层叠顺序：通过z-index属性设置

z-index值大的元素会显示在上面

1.固定定位

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
固定定位的元素不会在页面中，通常应放置的位置上留出空隙。

.fix{
	position:fixed;/*fix悬停在右侧固定位置*/
	top:50px;/*fix区域上边界距离浏览器顶部的距离*/
	right:10px;/*fix区域右边界距离浏览器右侧的距离*/
	}

2.相对定位 relative

position: relative; 的元素相对于其正常位置进行定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

#box-relative{
	position：relative;/*相对定位，相对于原来位置定位，原位置保留*/
	top:20px;/*相对于原来的位置下移20px*/
	left:20px;/*相对于原来的位置右移20px*/
}

(一个小例子）

3.绝对定位 absolute

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
注意：“被定位的”元素是其位置除 static 以外的任何元素。

4.绝对定位与相对定位的嵌套使用

由于absolute定位元素是相对于relative或者父元素或者body元素进行定位的，所以通常将父元素设置为relative元素，子元素为absolute元素。
这样可以实现文字层在图片层叠加的效果

5.粘性定位 sticky

position: sticky; 的元素根据用户的滚动位置进行定位。
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

注意：Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前缀（请参见下面的实例）。必须至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用。

第四部分 伪类

伪类用于定义元素的特殊状态。
例如，它可以用于：
设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

1.锚伪类

用于显示链接的不同样式

/* 未访问的链接呈现绿色*/
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接显示亮粉色 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接显示蓝色 */
a:active {
  color: #0000FF;
}

a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

2.简单的工具指示悬停

把鼠标停到div上来显示p元素

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

3.first-child

:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。匹配首个 p元素

p:first-child {
  color: blue;
}

匹配所有 p 元素中的首个 i元素
在下面的例子中，选择器匹配所有 p 元素中的第一个 i 元素：

p i:first-child {
  color: blue;
}

4.css中的所有伪类

第五部分 伪元素

CSS 伪元素用于设置元素指定部分的样式。
设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容
伪元素的语法规则：

selector::pseudo-element {
  property: value;
}

1.::first-line伪元素

用于设置文字首行的样式，只适用于块级元素

::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

字体属性
颜色属性
背景属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

伪元素用的双冒号

2.first-letter伪元素

用于设置文本首字母的特殊样式

同理，此伪元素也只适用于块级元素，使用元素种类同first-line伪元素

3. before伪元素

用于在元素前面添加一些内容

h1::before {
  content: url(smiley.gif);
}

4.after伪元素

用于在元素后面插入一些内容

h1::after {
  content: url(smiley.gif);
}

5.selection伪元素

用于匹配选的元素
以下 CSS 属性可以应用于 ::selection：
color
background
cursor
outline

::selection {
  color: red; 
  background: yellow;
}

第六部分 总结

这一节学习的浮动、定位再配合上节课学习的盒子模型，可以设计出更叫丰富的页面样式。对于伪类和伪元素可以让我们的页面变得更有特色，但对于它们的应用仅仅停留在理论方面，还学要多加练习来增加自己的熟练度
这是自己写的一个例子：