第四周：浮动 定位 伪类 伪元素

一 浮动

1.浮动的概念

浮动可以改变标签的排列顺序，使盒子横向排列。
浮动，元素可以围绕其他元素向左或者向右，而不能上下移动，
往往用于图像。

• 有float属性和clear属性，我们可以使用这两个属性来定位和清除定位。

2.float属性

• float的三个属性
  

  通过设置float属性，使box1和box2脱离了文档流原来的位置
  
  在设置float属性时一些需要注意的点
  
  

3.clear属性

例：

二 定位

何为定位？

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

• static
• relative
• fixed
• sticky
• absolute

static

  元素默认情况下的定位方式为 static，忽略left等属性产生的效果

relative

  元素相对于其正常位置进行定位，  参照物为自身，不同于浮动的是，相对定位仍处于正常位置中。

fixed

  固定定位，元素是相对于视口定位的，滚动页面也会处于同一位置

sticky

  元素根据用户的滚动位置进行定位。
  粘性元素根据滚动位置在relative和fixed之间切换。一开始会相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其粘贴在适当的位置

absolute

 元素相对于最近的定位父级元素进行定位

三 伪类、伪元素

1.伪类的概念

 伪类用于指定元素的特定状态
 何为伪类?就是css内置类css内部本身赋予它一些特性和功能，也就是你不用再class=...或id=...你就可以直接拿来使用，当然你也可以改变它的部分属性比如：a:link{color:#FF0000;}

2.伪类类型

• 伪类要使用一个冒号":"
• ::active
  选择正在被激活的元素
• ::hover
  选择被鼠标悬浮的元素
• ::link
  选择未被访问的元素
• ::visited
  选择已被访问的元素
• ::enable
  选择每个已启动的元素
• ::disable
  选择每个已禁止的元素
• :lang
  选择带有指定的lang属性的元素
• :focus
  选择拥有键盘输入焦点的元素
• :checked
  选择每个被选中的元素

3.伪元素定义

  CSS 伪元素用于向某些选择器设置特殊效果。

4.伪元素类型

伪元素要使用两个冒号"::"

• ::first-letter
  选择元素中第一个文字
• ::first-line
  选择元素中第一行文字
• ::before
  在元素内容之前添加新的内容
• ::after
  在元素内容之后添加新内容
• ::selection
  选择元素被用户选中的内容