week 4 in bluemsun

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

定位

概念：用于找到并确定盒子的位置

分类 ：文档流定位、浮动定位、层定位

写在前面

元素分类

元素种类	说明	举例
block	每个元素单独占一行，可自由设置高度宽度等属性	p、div、h1-h6、ol、ul、table、form、address、blockquote
inline	不独占一行，高度宽度等属性不可设置，宽度跟随内容	a、span、br、i、em、strong、label、q、var、cite、code
inline-block	不独占一行，但高度宽度等属性可以自由设置	img、input

注：可以运用display属性来强制转换元素类型。取值为none，元素不显示。

文档流定位

是最基础的定位方式，也是默认的定位方式。

按照从上到下，从左到右排列元素。

浮动定位

设置浮动：float属性

属性取值

none	不浮动
left	向左浮动
right	向右浮动

清除浮动：clear属性

属性取值

none	不对元素的浮动造成任何影响
left || right	清除左或右一个方向的浮动元素的影响
both	清除左右两个方向的浮动元素的影响

注：清除影响指可使清除一侧少一个元素，即换行显示，而所有元素均被保留。

层定位

确定层叠的参照物：position属性

属性取值

static	默认值，没有定位，元素出现在正常的流中
fixed	固定定位，相对于浏览器窗口进行定位
relative	相对定位，相对于其直接父元素进行定位，无论其父元素是什么定位方式。元素的原位置会被保留
absolute	绝对定位，相对于除static以外的第一个父元素进行定位，若无任何relative或absolute的父元素，则直接相对body进行定位。元素的原位置不被保留
sticky	粘性定位，相对于可以滚动的直接父元素进行定位

注：通常将最外层的父元素设置为relative方便移动，内层元素都设置为absolute使位置固定。

确定元素与参照元素间相对位置：top、right、bottom、left属性

确定元素间的上下层关系：z-index属性，取值大的元素在

---

伪类

用于选择处于特定状态的元素

1. :link、:visit、:hover、:active （常用于超链接）

   :link	普通的、未被访问的链接
   :visited	用户已访问过的链接
   :hover	鼠标指针位于链接上方悬停
   :active	链接被点击的时刻

   注：必须严格按照该顺序编写。记忆技巧：love&hate

2. :first-child	一组兄弟元素中的第一个元素
   :last-child	一组兄弟元素中的最后一个元素
   :first-of-type	一组兄弟类型中指定类型的第一个元素
   :last-of-type	一组兄弟类型中指定类型的最后一个元素
   :not	用于选择不符合特定类型的元素
   :nth-child	按从前到后顺序选定一些兄弟元素
   :nth-last-child	按从后往前顺序选定一些兄弟元素

---

伪元素

创建不存在与DOM树中的元素，并为其添加样式，前缀为两个冒号::

1. ::first-letter、::first-line：选择元素的第一个字符，选择元素的第一行
2. ::before、::after：在真正的页面元素之前或之后插入额外的元素，默认为行内元素。格式如下：

   ​​​​元素::before || after{

           content:"待插入元素";

           其他样式设置；

   }