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

1 定位

1.1 CSS定位机制概述

分为三种：文档流定位（flow）【默认】、浮动定位（float）和 层定位（layer）

层级关系：文档流定位 < 浮动定位 < 层定位

1.2 文档流定位

默认定位方式，使网页元素按照从上到下，从左到右的方式显示出来

• block元素
  特点：
  1、独占一行
  2、元素的 height、width、margin、padding 都可设置
  常见的 block 元素：<div>标签、<p>标签、<h1>-<h6>标签、<ol>标签、<ul>标签、<table>标签、<form>标签
• inline元素
  特点：
  1、不单独占用一行
  2、width、height 不可设置
  3、width 就是它包含的文字或图片的宽度，不可改变
  常见的 inline 元素：<span>标签、<a>标签

间距问题：
两个inline元素水平排列开，会有间隙
解决方法：
将inline类型转换成block或者其他类型来进行显示
e.g. 导航栏设置时常用<p>标签或<ul>标签将 a 标签括起来

• inline-block元素
  特点：
  【同时具备inline元素、block元素的特点】
  1、不单独占用一行
  2、元素的height、width、margin、padding 都可设置
  常见的 Inline-block 元素：<img>标签
• display属性
  作用：将某元素类型转换为另一种元素

  属性值	描述
  block	将某元素转换为block元素
  inline	将某元素转换为inline元素
  inline-block	将某元素转换为inline-block元素
  none	使元素不会被显示出来

1.3 浮动定位

• float属性
  用于设定浮动

  属性值	描述
  left	左浮动
  right	右浮动
  none	默认，不浮动

  用处举例：
  1、图片位于文字的左侧或右侧时，可采取浮动定位（有点类似与 word 中的非嵌入型图片）【初始用法】

  img{
  	float:left;
  }
  

  
  2、可以用于实现div的横向多列布局

  div{
  	float:left;
  }
  

属性特点
1 浮动后原有的位置会被后面的占据
2 宽度不够时会下降/或因宽度不够被“卡住”

.out{
	margin:10px auto;
	height: 100px;
	width: 80px;
    border: 1px solid #000;
}
.one{
    background-color: blue;
	width: 40px;
    height: 70px;
    float:left;
}
.two{
    background-color: blueviolet;
    width: 40px;
    height: 40px;
	float:left;
}
.three{
    background-color: brown;
	width: 20px;
	height: 40px;
	float: left;
}/*此时.three被“卡住了”*/

清除浮动的办法

1、直接设置浮动子元素所属父元素的高度，使其高于浮动元素的高度
2、设置clear属性清除浮动

属性值	描述
both	清除左右两侧浮动
left	清除元素左侧浮动
right	清除元素右侧浮动
none	默认值，只在需要移除已指定的清除值时用到

3、单伪元素清除法
特点：在项目中使用，直接给标签加类即可清除浮动

.clearfix::after{/*伪元素内容在下面*/
	content:"";
	display:block;
	clear:both;
	/*以下为补充代码，为在网页中看不到伪元素*/
	height:0;
	visibility:hidden;
}

4、双伪元素清除法
特点：在项目中使用，直接给标签加类即可清除浮动

.clearfix::after,.clearfix::after{
	content:"";
	display:table;
}/*以上主要用于解决父元素的外边距塌陷问题*/
.clearfix::after{
	clear:both;/*此处才是真正用于清除浮动的部分*/
}

5、直接给浮动子元素的父元素设置overflow:hidden;

float 崩溃特性

如果一个父元素的所有子元素都浮动起来，则这个父元素的高度坍缩为0
出现崩溃的原因：浮动的子元素不能撑起非浮动的父元素，父元素的高度只能被文档流子元素（也就是靠非浮动的元素撑起来的）

float 包裹特性

当父一级元素设成浮动时，其宽度会自适应里面的内容

1.4 层定位

像图像软件中的图层一样对每个 layer 能够精确定位操作

position属性

浏览器定位的坐标原点始终在参照物的左上角，x 轴水平向右，y 轴垂直向下
left属性、right属性、top属性、bottom属性——确定相对的位置
z-index属性——确定前后层的层叠关系（图层的上下），值大的在上面。可设置为负数，用于置于底层；设置数很大，用于置于顶层

• position:static;
  默认值，没有定位，元素出现在正常的流中。left属性、right属性、top属性、bottom属性、z-index属性无效。
• position:fixed;
  【固定定位】
  不会随浏览器窗口的滚动条滚动而变化，总是出现在视线里的元素，left属性、right属性、top属性、bottom属性、z-index属性有效。
• position:relative;
  【相对定位】
  相对于其原位置进行定位
  定位为 relative 的元素脱离正常文档流中，但其在文档流中的原位置依然存在。总是相对于其直接父元素，无论其父元素是什么定位方式。
• position:absolute;
  【绝对定位】
  总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。
  定位为absolute的层脱离正常的文档流，但与 relative 的区别：原位置不再存在。
  若其父层都未定义absolute或relative，则其将相对于 body 进行定位。
  绝对定位时盒子的宽高默认为内容的宽高，因此要注意定位元素的脱标问题！！

通常将父元素设置为相对定位，将子元素设置为绝对定位【使当父元素移动时，子元素能够一起被移动】
绝对，相对，固定默认的层级相同。此时 HTML 中写在下面给的元素层级更高，会覆盖上面的元素。

层定位下的盒子居中

/*方法一*/
div{
	position:absolute;
	/*水平居中*/
	left:50%;
	margin-left:-xpx;/*x=盒子宽度的一半*/
	/*垂直居中*/
	top:50%;
	margin-top:-ypx;/*y=盒子高度的一半*/
}
/*方法二 位移居中*/
div{
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);/*位移自身宽度高度的一半*/
}

2 伪类

: 伪类选择器
伪类用于定义元素的特殊状态。
资料来源

2.1 锚伪类

作用：使链接能够以不同的方式显示

/* 未访问的链接 */
a:link {
}
/* 已访问的链接 */
a:visited {
}
/* 鼠标悬停链接 */
a:hover {
}
/* 已选择的链接 */
a:active {
}

2.2 悬停设置

作用：使鼠标悬停在选择器上时以不同的样式显示

div:hover{
}

2.3 结构伪类选择器

作用：根据元素在HTML中的结构关系查找元素，减少对类的依赖，有利于代码的整合

选择器	描述
E:first-child{}	匹配父元素中的第一个子元素，并且是E元素
E:last-child{}	匹配父元素中的最后一个子元素，并且是E元素
E:nth-child(n){}	匹配父元素中的第n个子元素，并且是E元素
E:nth-last-child(n){}	匹配父元素中倒数第n个子元素，并且是E元素

n可为
1、自然数（0、1、2、…）
2、公式

公式	功能
2n , even	偶数
2n+1 , 2n-1 , odd	奇数
-n+5	找到前5个
n+5	找到第5个往后

应用举例

tr:nth-child(even){
	background-color: lavender;
}
tr:nth-child(odd){
	background-color:azure;
}

3 伪元素

资料来源
一般页面中的非主体内容可以使用伪元素

• 元素：HTML 设置的标签
• 伪元素：由 CSS 模拟出来的标签效果

常用伪元素	作用
::first-line	用于向文本的首行添加特殊样式
::first-letter	用于向文本的首字母添加特殊样式
::before	用于在元素内容之前插入一些内容
::after	用于在元素内容之后插入一些内容

p::first-line{
}
p::first-letter{
}
div::before{
content:"伪元素的内容";
}
div::after{
content:"伪元素的内容";
}

注意
1、::first-line伪元素和::first-letter伪元素 只能应用于块级元素。
2、::before伪元素和::after伪元素 必须设置content属性才能生效。
3、::before伪元素和::after伪元素 伪元素默认是行内元素，但可通过display属性修改。