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-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;
  }
  

.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属性清除浮动

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;
  【绝对定位】
  定位为absolute的层脱离正常的文档流，但与 relative 的区别：原位置不再存在。
  总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。
  若其父层都未定义absolute或relative，则其将相对于 body 进行定位。

2 伪类

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

2.1 锚伪类

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

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

2.2 悬停设置

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

div:hover{
}

2.3 结构伪类选择器

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

应用举例

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

3 伪元素

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

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

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属性修改。