【无标题】

CSS布局–定位、浮动，以及伪类和伪元素

---

一、CSS 布局–position 属性（定位）

position 属性规定应用于元素的定位方法的类型
有五个不同的位置

• stasic
• relative
• fixed
• absolute
• sticky

position:static; 默认定位
HTML 元素默认情况下的定位方式为 static（静态）

• position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位
• 静态定位的元素不受 top、bottom、left 和 right 属性的影响。

我们来简单了解一下正常流：
正常布局流 即由上到下按照顺序将每个盒子排列起来的布局方式。

position:relative; 相对定位

• position:relative;的元素相对于其正常位置进行定位。

• 设置相对定位的元素的 top、right、bottom 和 left
  属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
  这里我们常常会疑惑它相对的是什么地方？
  我的理解是它相对于原本在文档流中的盒子的top,right,lefe,bottom而动。
  比如left:20px;即定位后的文档left相对原文档流的left距离20px。
  下面给出一个例子：
  
  
  总结：（即不向其正常范围已确定的’边框‘之外移动）

• 设置了 left, top 的话 ，元素相对与网页的最左最上为原点，向右为x轴（正），向下为y轴（正）做移动。

• 设置了 right, bottom的话，元素相对于网页的最左最上为原点，向左为x轴(正)，向上为y轴(正)做移动。

position:fixed; 固定定位

• position:fixed;的元素是相对于视口定位的(屏幕)，这意味着即使滚动页面，它也始终位于同一位置。
• top、right、bottom 和 left 属性用于定位此元素。
• 固定定位的元素不会在页面中通常应放置的位置上留出空隙。
  position:absolute; 绝对定位
• position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。相对的父级是最近的relative或absolute定位的元素
  注意：
  如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。(跟fixed是不同的)

position:sticky; 粘性定位

• position: sticky; 的元素根据用户的滚动位置进行定位。
• 粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）
  Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前缀。您还必须至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用(给定的偏移位置不可少)。

三种常见定位（static,relative,absolute）比较：
不同点：

• relative： 相对定位没有脱离文档流，原位置保留标准流位置，没有让出来，实体化显示位置通过设置偏移值发生偏移。
• absolute：脱离文档流，以父级为基准来进行偏移，参考点为父级border以内的四个顶点。
• fixed：脱离文档流，以屏幕为基准来进行偏移。

相同点：

• 偏移量都是用left,right,top,bottom来设置，具体可参考relative那关于这的讲解，可以设置为像素值，百分比（参考元素的border以内的宽度）负值，及特定值(center,top等)；
• 都可以用z-index属性定义层叠关系。

position 的层叠是按顺序层叠的，不过可以通过设置 z-index 来改变层叠顺序，只有 relative，absolute，fixed 可以设置 z-index。

---

二、css布局–float浮动属性

float属性规定元素如何浮动，用于定义和格式化内容。
常见的使用实例：图像浮动到特定位置，实现文字包围图片的效果

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

有关float更细致的了解：

• 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
• 浮动元素是脱离离文档流的，但不脱离文本流
  当我们利用float属性制作文本环绕效果时就会发现，文本不会被覆盖或流失。

这里我找了w3school上的具体讲解，供大家参考

接下来在介绍一下三栏布局实例
1，可以将左边元素左浮动，右边元素右浮动。但要注意在写的时候要以这个顺序：左栏，右栏，中间栏（因为浮动元素会把块级元素的位置空出来，所以这里右边的浮动元素把中间的位置空了下来）
2，将三栏全部左浮动（一定要计算好空间利用情况）

---

三、伪类

伪类用于定义元素的特殊状态。是CSS内植类，CSS内部本身赋予它一些特性和功能，（不用再class=…或id=…就可以直接拿来使用）

例如，它可以用于：

• 设置鼠标悬停在元素上时的样式
• 为已访问和未访问链接设置不同的样式
• 设置元素获得焦点时的样式

伪类的语法

selector:pseudo-class{        选择器：伪类{
 property:value;                   属性:值;
}                               }

下面表格是一些CSS伪类

伪类和CSS类可以结合使用

selector.css-class:pseudo-class{			选择器.css类：伪类:{
property:value;									属性:值;
}												}

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

---

四、伪元素

CSS伪元素用于设置指定部分的样式。（使用时也不必再clas=，id=，可直接拿来使用）
例如：

• 设置元素的首字母、首行的格式。
• 在元素的内容之前或之后插入内容
  伪元素的语法

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

选择器	作用
::after	在元素之后插入内容
::before	在元素之前插入内容
::first-letter	向文本的首字母添加特殊样式
::first-line	向文本的首行添加特殊样式
::selection	匹配用户选择的元素部分

::first-line伪元素
::first-line伪元素只能应用于块级元素。
其常用属性：

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

::first-letter伪元素
::first-letter 伪元素只适用于块级元素。
其常用属性：

• 字体属性
• 颜色属性
• 背景属性
• 外边距属性
• 内边距属性
• 边框属性
• text-decoration
• vertical-align（仅当 “float” 为 “none”）
• text-transform
• line-height
• float
• clear

::selection 伪元素

可以应用以下CSS属性：

• color
• background
• cursor
• outline

---