CSS3~

1 CSS3基本语法

1.1 css3浏览器私有前缀

-webkit-		chrome,safari
-moz-			firefox
-ms-			IE
-o-				opera

1.2 CSS3新增长度单位

rem				根元素字体大小的倍数
vw				视口宽度的百分比
vh				视口高度的百分比
vmax			视口宽高中的大百分比
vmin			视口宽高中小的百分比

1.3 css3新增颜色设置方式

rgba()			在rgb基础上添加了不透明度，a：opacity
hsl()			h:色相（0~360），s：饱和度（0%~100%），					l：亮度（0%~100%）
hsla()			在hsla基础上添加不透明度

不透明度取值范围0~1，值越大越不透明，1表示完全不透明，0表示完全透明

2 css3选择器

2.1 基本选择器

1 标签名选择器

2 类名选择器

3 id选择器

4 全局选择器

5 交集选择器

6 并集选择器

2.2 层级选择器

1 后代选择器

选择器1 选择器2 {}

2 子元素选择器

选择器1 > 选择器2 {}

3 后面的相邻兄弟元素选择器

选择器1 + 选择器2 {}

4 后面的通用兄弟元素选择器

选择器1 ~ 选择器2 {}

2.3 属性选择器

[attr]				选择包含属性是attr的元素
[attr="val"]		选择attr的值是val的元素
[attr^="val"]		选择attr的值是val开头的元素
[attr$="val"]		选择attr的值是以val结尾的元素
[attr*="val"]		选择attr的值包含val的元素

2.4 伪类选择器

1 动态伪类选择器

:link,:visited,:hover,:active,:focus 获取焦点的状态

2 目标伪类选择器

:target		选择当前锚点指向的元素

3 语言伪类选择器

:lang(语言)		

4 UI元素伪类选择器

:disabled			选择不可用的表单控件
:enabled			选择可用的表单控件
:checked			选择选中状态下的单选框，复选框，下拉选项

5 结构伪类选择器

:first-child		兄弟元素中第一个
:last-child			兄弟元素中最后一个
:nth-child(n)		兄弟元素中第n个
:nth-last-child		兄弟元素中倒数第n个
:only-chlid()		没有兄弟的元素

:first-of-type		同标签名兄弟元素中第一个
:last-of-type		同标签名兄弟元素中最后一个
:nth-of-type(n)		同标签名兄弟元素中第n个
:nth-last-of-type(n)同标签名兄弟元素中倒数第n个
:only-of-type		没有同标签名兄弟元素

:root				根元素
:empty				没有后代元素也没有文本内容的元素

6 否定伪类选择器

:not(选择器)

2.5 伪元素选择器

::after				动态的创建最后一个子元素
::before			动态的在最前面插入一个子元素
::first-line		选择到元素中的第一行文字
::first-letter		选择到元素中的第一个文字
::placeholder		设置输入框placeholder的样式
::selection			设置被选中文字的演示

1. ::before和 ::after 必须设置content属性
2. after,before,first-line,first-letter 使用单冒号也可以

2.6 选择器的优先级（权重）

id选择器 > 类选择器，伪类选择器，属性选择器 > 标签名选择器，伪元素选择器 > 全局选择器

1.行内式大于所有选器
2.！important可以无限提高该样式的优先级

2 CSS3新增盒子模型相关样式

1 box-sizing属性

该属性用于设置盒子模块尺寸的解析反式

content-box			默认值，width和height设置的是内容的尺寸
border-box			width和height设置的是盒子总的尺寸

2 盒子阴影 box-shadow

该属性用于设置盒子的阴影，属性值可以设置阴影偏移位置，阴影颜色，阴影模糊，内阴影

/* */
box-shadow:阴影水平偏移位置 阴影垂直偏移位置 阴影的模糊值 阴影外延
/*内阴影*/
box-shadow：inset ...
/*给一个元素设置多个阴影*/
box-shadow：xx,xx,xx;(各阴影用逗号分开)

3 不透明度 opacity

该属性可以设置元素的不透明度，值是0~1，数字越大越不透明，0表示完全透明，1表示完全不透明

3 css3 新增背景属性

3.1 新增属性

1 background-origin

该属性设置背景图像位置的参考原点

padding-box			默认值，原点在内边距上
content-box			原点在内容区域
border-box			原点在边框上

2 background-clip

该属性设置哪些区域背景图像可见

border-box			默认值，边框以及以内背景图像可见
padding-box			只有内边距以及以内背景图像可见
content-box			只有内容区域背景图像可见
text				只有文字上背景图像可见，需要加私有前缀

-webkit-background-clip:text

3 background-size

设置背景图像尺寸，值可以是长度或关键字

1.使用两个长度，分别设置图像宽高
2.如果使用一个长度，设置图像宽，高度根据比例自动计算
3.使用百分比，宽高参照父元素宽高
4.contain：图像自适应元素，优先保证图像全部显示在元素上
5.cover：图像自适应元素，优先保证元素每个区域都有背景图像

3.2 background复合属性

1.origin和clip的值是一样，若复合属性中只有一个关键字，则同时设置origin和clip；若有两个关键字，第一个是origin，第二个是clip
2.size和position都可以设置1到2个长度，复合属性中使用/进行区分，position/size

background:url(../images/xx.jpg) 0 0/250px 250px content-box padding-box 

3.3 多背景图

css3可以给元素设置多个背景图像

background:url(../images/xx.png) no-repeat left top,
		url(../images/xx.png) no-repeat right top,
		url(../images/xx.png) no-repeat left bottom,
	url(../images/xx.png) no-repeat right bottom;

多个图像位置冲突时，前面的图像显示在上面

4 css3新增边框属性

4.1 边框圆角

css属性名	含义	值
border-radius	多个角
border-top-left-radius	左上角	1~2个长度
border-top-right-radius	右上角	1~2个长度
border-bottom-left-radius	左下角	1~2个长度
border-bottom-right-radius	右下角	1~2个长度

单个圆角属性设置规则

border-bottom-right-radius:xxpx;
border-bottom-right-radius:xxpx xxpx;
border-bottom-right-radius:xx%;

1.设置一个长度，正圆圆角
2.两个长度分别是x半径和y半径，椭圆圆角
3.使用百分比，x半径参照元素宽度，y半径参照元素高度

复合属性使用：

/* 4个角 */
border-radius:xxpx;
/* 左上和右下  左下和右上*/
border-radius:50px 100px;
/*左上 左下和右上 右下*/
border-radius：50px 100px 150px；
/*左上 右上 右下 左下*/
border-radius：50px 100px 150px 20px；

/* /左边是x半径， /右边是y半径 */
border-radius：50px/100px；
/* x半径和y半径各自按照各自规则*/
border-radius：50px 80px/100px 150px 40px 20px；

4.2 外轮廓

css属性名	含义	值
outline	同时设置style，width，color	多个值
outline-style	外轮廓风格	none 无风格 solid 实线 dashed 虚线 dotted 顶线 double 双实线
outline-width	外轮廓宽度	长度
outline-color	外轮廓颜色	颜色
outline-offset	外轮廓与边框的距离 不是outline的子属性	长度，可以是负值

外轮廓与边框的区别：

1.边框是盒子的一部分，影响盒子的大小；外轮廓在文档流中不占位置
2.外轮廓默认在边框外面， 可以调整位置，如果与边框位置重合，会显示在边框上面

5 css3 新增文本属性

css属性名	含义	值
text-align-last	设置最后一行文字的水平对齐方式	start：开始方向，默认值 end：结束方向 left：左 right：右 center：居中 justify：两端对齐
text-decoration-line	文本修饰线的形式	none：没有修饰线默认值 underline：下划线 overline：上划线 line-thougth：删除线
text-decoration-style	文本修饰线的风格	solid：实线，默认值 dashed：虚线 dotted：点线 double：双实线 wavy：波浪线
text-decoration-color	文本修饰线的颜色	颜色
text-decoration	文本修饰线复合属性	多个值
white-space	设置文本换行方式	normal：默认值 pre：原样显示 pre-wrap：pre+自动换行 pre-line:normal+识别换行符 nowrap：强制所有文本在一行显示
text-overflow	设置文本溢出方式	clip：溢出部分裁剪 ellipsis：显示省略号
text-shadow	设置文本阴影	偏移位置，模糊值和颜色

单行长文本显示省略号：

使用text-overflow，需要overflow和white-space一起使用：

overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;

text-shadow 文本阴影设置规则：

1.最多设置3个长度，水平偏移位置，垂直偏移位置，模糊值
2.支持多阴影

6 css渐变

创建出来的渐变被认为是图像，需要与使用图像的css属性配合，如background-image，list-style-image

6.1 线性渐变

linear-gradient(方向，颜色1 位置，颜色2 位置...)

设置方向：

1.使用关键字：to left,to top,to right,to bottom...
2.使用角度：0deg~360deg，0 deg是从下到上，90deg是从左到右，180deg是从上到下

设置颜色的位置：

1.使用长度设置颜色的位置，可类比为坐标
2.如果不设置每个颜色位置，平均分布

6.2 径向渐变

radial-grdient(半径 at 圆心坐标，颜色1 位置， 颜色2 位置...)

设置圆心位置：

1.默认在元素的正中心
2.使用两个长度设置圆心坐标

设置半径：

1.默认半径从圆心到元素的边界
2.使用一个长度设置半径，正圆
3.使用两个长度设置半径分别表示x半径和y半径，椭圆

设置颜色位置：

1.使用长度设置颜色的位置
2.如果不设置每个颜色的位置，平均分布

6.3 重复渐变

repeating-linear-gradient()			重复线性渐变
repeating-radial-gradient()			重复径向渐变

7 变换 transform

7 .1 变换相关css属性

css属性名	含义	值
transform	设置变换	一个或多个方法
transform-origin	设置变换原点	使用长度或者关键字设置坐标
transform-style	开启3d空间	flat：默认值，子元素在平时。 preserve-3d：子元素在3d空间
perspective	景深（观察者与屏幕距离）	长度
perspective-origin	观察者位置（原点）	使用长度或者关键字设置坐标
backface-visibility	元素背面面向用户是否可见	visible：可见，默认值 hidden：不可见

注意

1.可以给元素设置多种变换，一个transform可以设置多个变换方式，使用空格分隔。
2.设置多种变换，变换方法的顺序对于最终显示效果有影响。
3.行内元素设置变换无效。
4.需要设置给变换的元素属性：transform,transform-origin,backface-visibility
	需要设置给变换（3d）元素的父元素：transform-style,perspective,perspective-origin

7.2 2d变换的方法

1 位移translate方法

translateX()		设置水平方向位移
translateY()		设置垂直方向位移
translate()			同时设置水平和垂直方向位移，一个长度默认水平位移
- 百分比作为长度，水平位移参照元素本身宽度，垂直位移参照元素本身高度

2 缩放scale方法

scaleX()			设置水平方向缩放
scaleY()			设置垂直方向缩放
scale()				设置整体缩放，一个值默认为水平和垂直都按照该比例
-缩放比例为负数，会造成元素翻转

3 旋转rotate方法

rotate()			设置旋转角度，沿元素中心旋转
-设置角度，单位是deg

7.3 3d变换的方法

1 3d位移

translateZ()		设置沿z轴位移，值越大元素越大
translate3D()		同时设置沿x轴，y轴，z轴，需设置3个长度

2 3d缩放

scaleZ()			沿z轴缩放，无效果
scale3D()			同时设置沿x轴，y轴，z轴，需设置3个值

3 3D旋转

rotateX()			沿x轴旋转，指定角度
rotateY()			沿y轴旋转，指定角度
rotateZ()			沿z轴旋转，指定角度；等同于totate()2D旋转
rotate3D()			设置沿多个轴旋转；需要4个参数，前3个表示对应轴转或者不转，第4个设置角度

transform: rotate3D(1,1,0,45deg);

8 过渡transition

8.1 过渡相关css属性

css属性名	含义	值
transition-property	设置哪些属性参与过渡	all：默认值，所有能过渡的且发生了改变的属性过渡 指定具体属性，多个属性用逗号分隔
transition-duration	设置过渡持续时间	时间，单位是s，ms
transition-delay	设置过渡延迟时间	时间，单位是s，ms
transition-timing-function	设置过渡的运动轨迹	ease：平滑，默认值 linear：匀速运动 ease-in：加速运动 ease-out：减速运动 ease-in-out：先加速再减速 cubic-bezier(n1,n2,n3,n4)：塞尔曲线 steps()：分步运动 step-start：等同于steps(1,start) step-end：等同于steps(1,end)
transition	复合属性

可以过渡的属性

1.属性值是长度，如width，height，padding，margin，left，top，border-radius
2.属性值是颜色，如background-color，color
3.属性是纯数字，如opacity，font-weight
4.变换属性transform

注

要在样式变化之前，设置好过渡相关属性

8.2 触发过渡条件

1.动态伪类选择器 ：hover，：active，：focus
2.js事件
3.媒体查询@media

9 动画 animation

9.1 关键帧

@keyframes 关键帧名字{
    from{
        
    }
    to{
        
    }
}
@keyframes 关键帧名字{
    from{
        
    }
    40%{
        
    }
    80%{
        
    }
    to{
        
    }
}
@keyframes关键帧名字{
    100%{
        
    }
}

元素和关键帧之间是多对多关系：

1.一个元素可以设置多个关键帧
2.一个关键帧也可以设置给多个元素

9.2 动画相关css属性

css属性名	含义	值
animation-name	设置关键帧	关键帧名字，多个使用逗号分隔
animation-duration	设置动画持续时间	时间，单位是s，ms
animation-delay	设置动画延迟时间	时间，单位是s，ms
animation-timing-function	设置动画运动轨迹	ease：平滑。默认值 linear：匀速运动 ease-in：加速运动 ease-out：减速运动 ease-in-out：先加速再减速 cubic-bezier(n1,n2,n3,n4)：塞尔曲线 steps():分步运动 step-start：等同于steps(1,start) step-end：等同于steps(1,end)
animation-iteration-count	设置动画运行的次数	数字：指定次数，默认值是1 infinite：无数次
animation-direction	设置动画的运动方向	normal：正常方向，默认值 reverse：反方向 alternate：交替运动 alternate-reverse：反向交替运动
animation-play-state	设置动画运动状态	running：默认值，运动中 paused：暂停
animation-fill-mode	设置动画之外的状态	none：动画之外默认样式，默认值 forwards：设置动画结束之后处在结束帧状态, backwards：设置动画开始之前处在起始帧状态 both：同时forwards和backwards
animation	动画复合属性

10 多列布局

1 设置给包裹元素的css属性

css属性名	含义	值
column-count	设置列数
column-width	设置列宽
columns	同时设置列数和列宽
column-rule-style	列分隔线风格	none，solid，dashed，dotted，double
column-rule-width	列分隔线宽度
column-rule-color	列分割线颜色
column-rule	列分割线复合属性
column-gap	设置列间距

column-count和column-width:

1.二者都可实现多列布局
2.如果同时设置列宽和列数，按照最终列数较少的进行布局

2 设置给子元素的css属性

css属性名	含义	值
column-span	设置是否跨列	none：不跨列，默认值 all：跨所有的列
-webkit-column-before	设置元素前面断列方式	auto：自动，默认值 always：前面总是开启新列 avoid：前面避免开启新列
-webkit-column-after	设置元素后面的断列方式	auto：自动，默认值 always：后面总是开启新列 avoid：后面避免开启新列
-webkit-column-inside	设置元素内部的断列方式	auto：自动，默认值 avoid：后面避免内部断列

11 伸缩盒布局

11.1 伸缩容器和伸缩项目

伸缩容器：

display:flex/inline-flex;
-特点：
1.flex是块级元素的特点
2.inline-flex是行内块元素的特点

**伸缩项目：**伸缩容器的子元素自动变为伸缩项目。

1.只有伸缩容器的子元素才能变为伸缩项目，其他后代元素不可以
2.一个元素既可以是伸缩项目，也可以是伸缩容器。
3.不论任何显示模式的元素，变为伸缩项目就遵循伸缩项目的特点
4.伸缩项目会水平排列
5.伸缩项目默认宽度被内容撑开，可以设置宽高，内外边距，不会有外边距塌陷合并

11.2 设置主轴方向和换行方式

1 设置主轴方向

**主轴：**伸缩项目会沿着主轴进行排列，默认主轴方向是水平从左到右

**侧轴：**侧轴永远与主轴垂直，主轴方向改变，侧轴方向也改变。

给伸缩容器设置css属性flex-direction可以修改主轴方向。

row				水平从左到右，默认值
row-reverse		水平从右到左
column			垂直从上到下
column-reverse	垂直从下到上

2 设置换行方式

给伸缩容器设置css属性flex-wrap，可以修改伸缩项目的换行方式，属性如下

nowrap			强制不换行，默认值
wrap			自动换行
wrap-reverse	自动换行且翻转

3 同时设置主轴方向和换行方式

flex-flow是flex-direction和flex-wrap组成的复合属性，可以同时设置主轴方向和换行方式

11.3 设置伸缩项目在主轴上对齐方式

给伸缩容器设置css属性justify-content可以设置伸缩项目在主轴上的对齐方式

flex-start				靠主轴起始方向
flex-end				靠主轴结束方向
center					居中
space-between			两端没有间距，中间有间距，两端对齐
space-around			两端的间距是中间间距的一半
space-evenly			两端的间距与中间间距一致

11.4 设置伸缩项目在侧轴上的对齐方式

1 一条主轴线（伸缩项目在主轴上不换行）

给伸缩容器设置css属性align-items可以设置伸缩项目在侧轴上的对齐方式

stretch				伸缩项目如果没有设置侧轴上的长度，拉伸，默认值
flex-start			靠侧轴起始方向对齐
flex-end			靠侧轴结束方向对齐
center				居中对齐
baseline			基线对齐

2 多条主轴线（伸缩项目在主轴上发生换行）

给伸缩容器设置css属性align-content可以设置伸缩项目在侧轴上对齐方式（发生换行的前提下）

stretch				伸缩项目如果没有设置侧轴上的长度，拉伸，默认值
flex-start			靠侧轴起始方向
flex-end			靠侧轴结束方向
center				居中
space-between		两端没有间距，中间有间距，两端对齐
space-around		两端的间距是中间间距的一半
space-evenly		两端的间距与中间间距一致

11.5 伸缩项目的伸缩性

伸缩项目在主轴上可以进行伸缩

1 伸缩项目在主轴上的基准长度flex-basis

1.flex-basis的值是个长度，表示伸缩项目在主轴上的长度
2.如果没有设置flex-basis或设置为auto（默认值），伸缩项目在主轴上的长度按照与主轴对应的width或者height
3.如果flex-basis，width，height都没设置，被内容撑开

flex-basis > width/height >默认大小

2 扩展比率flex-grow

伸缩项目扩展的前提

1.当伸缩容器在主轴方向有富余空间
2.伸缩项目的扩展比例flex-grow不为0，flex-grow的默认值是0

伸缩项目扩展的规则：

伸缩项目根据自己的扩展比率，瓜分伸缩容器的富余空间

3 收缩比率flex-shrink

伸缩项目收缩的前提：

1.伸缩容器在主轴上的长度小于伸缩项目在主轴上的长度和
2.伸缩项目的收缩比率flex-shrink不为0，flex-shrink的默认值是1

伸缩项目收缩的规则：

伸缩项目进行收缩，不但要考虑各自收缩比率flex-shrink，还要考虑各自在主轴上的长度
伸缩项目不会无限收缩，当伸缩项目中只剩下内容，不会挤压内容

4 flex复合属性

同时设置扩展比例，收缩比例，基准长度

flex:grow shrink basis;

flex:1;	/*flex:1 1 0*/
flex:auto;/*flex:1 1 auto*/
flex:none;/*flex:0 0 auto*/
flex:0 auto;/*flex:0 1 auto 默认值*/

11.6 伸缩项目排序

给伸缩项目设置css属性order可以调整伸缩项目的排序，值是一个数字

数字越大排序越靠后，数字越小排序越靠前，可以是负数

11.7 单独设置伸缩项目在侧轴上的对齐方式

给伸缩项目设置css属性align-self可以单独设置该伸缩项目在侧轴上的对齐方式

auto				按照伸缩容器中的align-items设置，默认值
stretch				伸缩项目如果没有设置侧轴上的长度，拉伸
flex-start			靠侧轴起始方向对齐
flex-end			靠侧轴结束方向对齐
center				居中对齐
baseline			基线对齐

11.8 伸缩盒相关css属性

1 给伸缩容器设置属性

css属性	含义	值
display	设置伸缩容器	flex：块级伸缩容器 inline-flex：行内伸缩容器
flex-direction	设置主轴方向	row：水平从左到右，默认值 row-reverse：水平从右到左 column：垂直从上到下 column-reverse：垂直从下到上
flex-wrap	设置换行方式	nowrap：不换行，默认值 wrap：自动换行 wrap-reverse：自动换行且翻转
flex-flow	同时设置主轴方向和换行方式	direction和wrap的值
justify-content	设置在主轴上的对齐方式	flex-start：靠主轴起始方向，默认值 flex-end：靠主轴结束方向 center：居中 space-between：两端对齐，两端无间距，中间有间距 space-around：两端间距是中间间距的一半 space-evenly：两端间距与中间距相等
align-items	设置在侧轴上的对齐方式（一条主轴线，不换行）	stretch：侧轴拉伸，默认值 flex-start：侧轴起始方向 flex-end：侧轴结束方向 center：居中 baseline：基线对齐
align-content	设置在侧轴上的对齐方式（多条主轴线，发生换行）	stretch：侧轴拉伸，默认值 flex-start：侧轴起始方向 flex-end：侧轴结束方向 center：居中 space-between：两端对齐，两端无间距，中间有间距 space-around：两端间距是中间间距的一半 space-evenly：两端间距与中间距相等

2 设置给伸缩项目的属性

css属性名	含义	值
flex-basis	设置伸缩项目在主轴上的基准长度	auto：默认值
flex-grow	伸缩项目的扩展比例	数字，默认值是0
flex-shrink	伸缩项目的收缩比率	数字，默认值是1
flex	同时设置basis，grow，shrink
order	伸缩项目排序	数字
align-self	单独设置伸缩项目侧轴对齐方式	auto：根据伸缩容器的设置，默认值 stretch：侧轴拉伸，默认值 flex-start：侧轴起始方向 flex-end：侧轴结束方向。 center：居中 baseline：基线对齐

12 媒体查询

12.1 视口 viewport

视口：

1.视口就是页面的可视区域
2.视口是根元素的包含块

完美视口：

1.设备屏幕宽度与视口宽度保存一致，就是完美视口
2.PC端默认就是完美视口，移动端默认不是完美视口
--设置完美视口：
<meta name="viewport" content="width=device-width,initial-scale=1.0">

12.2 媒体查询语法

1 媒体类型

all				默认值，所有的设置
screen			屏幕
print			打印设置

@media print{
    h1{
        css样式
    }
}

2 媒体特性

width			设置固定视口宽度
max-width		设置最大视口宽度，小于等于
min-width		设置最小视口宽度，大于等于
device-width	设备宽度
max-device-width	最大设备宽度
min-device-width	最小宽度

完美视口下，视口宽度=设备宽度

运算符：

and				两个媒体查询条件同时生效，并且
，				多个媒体查询条件只要满足一个即可，或者
only			只能用于媒体查询，肯定
not				只能用于媒体查询，否定

 /* 视口宽度大于等于 600 并且小于等于 900 */ 
@media (min-width: 600px) and (max-width: 900px) {
    body {
        background-color: #333;
    }
    h1 {
        color: #fff;
    }
}
/* 视口宽度大于等于 1100 或者小于等于 400 */
@media (min-width: 1100px), (max-width: 400px) {
    body {
        background-color: #f00;
    }
    h1 {
        color: #00f;
    }
}

12.3 媒体查询在css中使用

1 与其他css代码写在一起

@media 媒体查询{}

2 配合link标签

<link rel="stylesheet" href="style-screen.css" media="screen">

12.4 响应式布局

1 阈值（断点）

方案一： 640px 1024px

**方案二：**768px 992px 1200px

2 移动优先方案（媒体查询的设置）

1.默认写最小屏幕的样式
2.以min-width作为媒体查询条件，逐次增大

13 BFC

BFC：跨级格式上下文

创建BFC的方式：

• 根元素
• 浮动元素
• 绝对定位或固定定位元素
• 行内块元素
• 表格单元格（th，td）表格行（tr）表格标题（caption），table，thead，tbody，tfoot
• overflow的值不为visible的块元素
• 伸缩项目
• 多列容器
• colum-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中

创建BFC可以解决的问题

1 清除子元素浮动的影响

给浮动元素的父元素创建BFC，清除掉子元素浮动的影响

2 解决外边距塌陷

给父元素创建BFC，第一个和最后一个子元素的外边距不会塌陷