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

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

目录

一、传统网页布局的三种方式

 1. 标准流（普通流/文档流）
 2. 浮动
 3. 定位

二、伪类
 1. 定义
 2. 语法
 3. 分类
 4. 注意

三、伪元素
 1. 定义
 2. 语法
 3.选择器

一、传统网页布局的三种方式

1. 标准流（普通流/文档流）

1）定义：就是标签按照规定好的默认方式排列 2）默认排列：

  a.块级元素会独占一行，从上到下排列；

  b.行内元素会按照顺序，从左到右排列，碰到父元素边缘会自动换行。

2.浮动

1）定义：

  float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一浮动框的边缘。

2）语法：
  选择器 {float: 属性值;}

3）属性取值：

属性值	描述
none	元素不浮动
left	元素向左浮动
right	元素向右浮动
inherit	元素会继承父级的float值

4）特点：

  a. 浮动元素会脱离标准流的控制（浮）移动到指定位置（动）【脱标】，浮动的盒子不再保留原先的位置；
  b. 浮动的元素会在一行内显示并且顶部对齐（浮动的元素相互紧贴，不会有缝隙，如果腹肌宽度装不下这些盒子，多出的盒子会另起一行）。
  c. 任何元素都可以浮动，浮动的元素具有行内块元素的特性。

5)清除浮动：
  a. 清除浮动须满足的条件：父盒子没有高度且对后面的标准流布局有影响。
  b. 语法：选择器 { clear: 属性值;}
  c. 属性取值：

属性值	描述
none	允许两侧都有浮动元素
left	左侧不允许浮动
right	右侧不允许浮动
both	两侧都不允许浮动
inherit	元素会继承父级的clear值

   d.清除浮动的方法：

• 额外标签法（隔墙法）
•   在浮动元素末尾添加一个空的标签 （必须是块级元素）

  

     添加一个标签后
  
  

• 父级添加overflow属性
• 
     overflow的属性值：

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

    如图：

  
  

• 父级添加:after伪元素
• 
    如图：
  
  
• 父级添加双伪元素
• 
    如图：
  
  

  3.定位

  1）定义：

    可以让盒子自由地在某个盒子内自由的移动位置或固定屏幕中某个位置，并且可以压住其他盒子。

  2）定位组成：
    a. 定位模式 ：
     决定元素的定位方式，通过用position属性设置。

  属性值	描述
  static	静态定位
  relative	相对定位
  absolute	绝对定位
  fixed	固定定位

     b. 边偏移 ：

  属性值	示例	描述
  top	top:80px;	顶端偏移量，定义元素相对于其父元素上边80px的距离
  bottom	bottom:80px;	底端偏移量，定义元素相对于其父元素下边80px的距离
  left	left:80px;	左端偏移量，定义元素相对于其父元素左边80px的距离
  right	right:80px;	右端偏移量，定义元素相对于其父元素右边80px的距离

     c. 总结：

  定位模式	是否脱标	移动位置	是否常用
  static静态定位	否	不能使用边偏移	很少
  relative相对定位	否（占有位置）	相对于自身位置偏移	常用
  absolute绝对定位	是（不占有位置）	带有定位的父级	常用
  fixed固定定位	是（占有位置）	浏览器可视区	常用
  sticky粘性定位	否（不占有位置）	浏览器可视区	当前阶段少

    · relative相对定位:

      元素移动位置时，相对于自身原来的位置移动的

  例如：
  显示如下：
  

    · absolute绝对定位:

      没有祖先元素或者祖先元素没有定位时，以浏览器为准定位。

  例如：

  

  显示如下：
  

      如果祖先元素有定位（相对，绝对，固定定位），则以最近一级有定位的祖先元素为参考点移动位置。

  例如：
  
  显示如下：
  
    · fixed固定定位:

      固定于浏览器可视区的位置，不会随着浏览页面滚动而滚动。

  例如：
  

  3）叠放次序：

    · 在使用定位布局是，可能会出现盒子重叠的情况，应使用z-index来控制盒子的前后次序。
    · 语法：选择器 {z-index: 数值（默认auto);}

     a. 数值为正时：

  
     显示如下：
  
     b. 数值为负时：

  
     显示如下：
  

  二、伪类

  1.定义：

   伪类用于定义元素的特殊状态，主要是对元素的整体状态进行设置。【在a标签（超链接）里应用的比较多】

  2.语法:

    selector:pseudo-class { property: value;}

  3.分类：

  • 1）状态伪类：
    • :link 设置元素未被选中时的状态 :visited 设置元素已经点击过的状态；
    • :hover 设置元素有鼠标悬停（鼠标放在此元素上面，但未点击）时的状态（除了a标签可以设置在很多的标签选择器之上）；
    • :active 设置鼠标点击的瞬间，但鼠标还没松开时的状态；
    • :focus 设置此元素获得焦点时的状态，如输入框被鼠标点击选中的状态 。
  • 2）结构性伪类：
    • :first-child 父元素下的第一个子元素如果刚好是指定元素，则进行设置；
    • :last-child 父元素下的最后一个子元素如果刚好是指定元素，则进行设置；
    • :first-of-type 设置父元素下的第一个指定元素；
    • :last-of-type 设置父元素下的最后一个指定元素；
    • :nth-child(number) 父元素下的第number个子元素如果刚好是指定元素，则进行设置；
    • :nth-last-child(number) 从最后开始数，父元素下的第number个子元素如果刚好是指定元素，则进行设置；
    • nth-of-type(number) 设置父元素下的第number个指定元素；
    • nth-last-of-type(number) 从最后一个元素开始数，设置父元素下的第number个指定元素。

  4.注意：

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

  三、伪元素

  1.定义：

   CSS 伪元素用于设置元素指定部分的样式。

  2.语法：

   selector:pseudo-element {property:value;}

  3.选择器:

  选择器	例子	例子描述
  ::after	p::after	在每个 元素之后插入内容。
  ::before	p::before	在每个 元素之前插入内容。
  ::first-letter	p::first-letter	选择每个 元素的首字母。
  ::first-line	p::first-line	选择每个 元素的首行。
  ::selection	p::selection	选择用户选择的元素部分

  1）::first-line
  用于向文本的首行设置特殊样式(只能用于块级元素）。

  2）::first-letter
  用于向文本的首字母设置特殊样式，不过这个主要运用于段落排版上多，比如说首字下沉。

  3）::before
  可以在元素的内容前面插入新内容，一般配合“content”使用。

  例如：

  
  
  效果图如下：

  
  4）::after
  可以在元素的内容之后插入新内容。实现方式与“::before”相似。

  5）::selection
  可以用来改变浏览网页选中文的默认效果。