一、CSS初识：
1.1、内部样式表：
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
1.2、行内式（内联样式）
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
1.3、外部样式表（外链式）:
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
注意：
-
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
-
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
-
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
二、选择器：
2.1 标签选择器（元素选择器）
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名
2.2 类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名
标签调用的时候用 class=“类名” 即可。
2.3 多类名选择器
1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
2. 各个类名中间用空格隔开。
<div class="pink fontWeight font20">亚瑟</div>
2.4 #id选择器
id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名
2.5 通配符选择器
通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：
*
三、CSS字体样式属性
3.1 font-size：字号大小：
推荐使用像素单位px
3.2 font-family：字体
p
1. 现在网页中普遍使用14px+。
2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3. 各种字体之间必须使用英文状态下的逗号隔开。
4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示
CSS Unicode字体
| 字体名称 | 英文名称 | Unicode 编码 |
|---|---|---|
| 宋体 | SimSun | \5B8B\4F53 |
| 新宋体 | NSimSun | \65B0\5B8B\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隶书 | LiSu | \96B6\4E66 |
| 幼园 | YouYuan | \5E7C\5706 |
| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 细明体 | MingLiU | \7EC6\660E\4F53 |
3.3 font-weight：字体粗细
font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。
数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。
3.4 font-style：字体风格
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。
3.5 font:综合设置字体样式 (重点)
选择器
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
四、CSS外观属性
4.1 color：文本颜色
color属性用于定义文本的颜色，其取值方式有如下3种：
1.预定义的颜色值，如red，green，blue等。
2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%
4.2 line-height：行间距
ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，
分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px，一般情况下，行距比字号大7.8像素左右就可以了。
4.3 text-align：水平对齐方式
left：左对齐（默认值）
right：右对齐
center：居中对齐
是让盒子里面的内容水平居中， 而不是让盒子居中对齐； 内容可以是行内块级元素，也可以是行内元素；
4.4 text-indent：首行缩进
属性用于设置首行文本的缩进
text-indent:50px; text-indent: 2em;
其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
4.5 text-decoration 文本的装饰 下划线
| none | 默认。定义标准的文本。 |
|---|---|
| underline | 定义文本下的一条线。下划线 也是我们链接自带的 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
五、复合选择器
5.1 交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special
比如： p.one 选择的是： 类名为 .one 的 段落标签
5.2 并集选择器
并集选择器的意思，就是说，只要逗号隔开的，所有选择器都会执行后面样式。
比如.one, p ,
#test
表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。 通常用于集体声明。
5.3 后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
5.4 子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
比如： .demo > h3
说明 h3 一定是demo 亲儿子。demo 元素包含着h3。
5.5 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。
伪娘
类 .one
伪类 :link
~~~css
为了和我们刚才学的类选择器相区别， 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{}
~~~
- :link /* 未访问的链接 */
- :visited /* 已访问的链接 */
- :hover /* 鼠标移动到链接上 */
- :active /* 选定的链接 */
注意写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。love hate 爱上了讨厌 记忆法 或者 lv 包包 非常 hao
a {/* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover {/* :hover 是链接伪类选择器 鼠标经过 , 鼠标经过的时候，由原来的 灰色 变成了红色 */
color: red;
}
六、标签显示模式（display）（重点）
6.1、块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。 霸道
常见的块元素有
~
、
、
、- 、
- 等，其中标签是最典型的块元素。
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
6.2、行内元素(inline-level)
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有 < a >、< strong >、< b >、< em >、< i >、< del >、< s >、< ins >、< u >、< span >等，其中标签最典型的行内元素。
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a特殊 a里面可以放块级元素 ）
注意：
1. 只有文字才能组成段落，因此p里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
2. 链接里面不能再放链接。
3. a里面可以放块级元素
6.3、块级元素和行内元素区别
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。
6.4、行内块元素（inline-block）
在行内元素中有几个特殊的标签——
、、，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
6.5、标签显示模式转换 display
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
七、CSS 三大特性
7.1、层叠性:是指多种CSS样式的叠加
一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。
(1). 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
(2). 样式不冲突，不会层叠
CSS最后的执行口诀：长江后浪推前浪，前浪死在沙滩上。
7.2、继承性:子标签会继承父标签的某些样式
如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可
恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）
7.3、css样式优先级
继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
7.4、特殊性（Specificity）
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：
specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
继承或者* 的贡献值 0,0,0,0 每个元素（标签）贡献值为 0,0,0,1 每个类，伪类贡献值为 0,0,1,0 每个ID贡献值为 0,1,0,0 每个行内样式贡献值 1,0,0,0 每个!important贡献值 重要的 ∞ 无穷大 1.数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
2.继承的 权重是 0
总结优先级：
1. 使用了 !important声明的规则。
2. 内嵌在 HTML 元素的 style属性里面的声明。
3. 使用了 ID 选择器的规则。
4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
5. 使用了元素选择器的规则。
6. 只包含一个通用选择器的规则。
7. 同一类选择器则遵循就近原则。
总结：权重是优先级的算法，层叠是优先级的表现
八、背景(background)
CSS 可以添加背景颜色和背景图片，以及来进行图片设置。
background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 background-position 背景位置 background-attachment 背景固定还是滚动 背景的合写（复合属性） background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 8.1、背景图片(image)
语法：
background-image : none | url (url)
none : 无背景图（默认的）
url : 使用绝对或相对地址指定背景图像
background-image: 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。
8.2、背景平铺（repeat）
语法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
参数：
repeat : 背景图像在纵向和横向上平铺（默认的）
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。
8.3、背景位置(position)
background-position : length || position
参数：
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position : top | center | bottom | left | center | right
说明：
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
注意：
1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
2. 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
实际工作用的最多的，就是背景图片居中对齐了。
8.4、背景附着
语法：
background-attachment : scroll | fixed
参数：
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
说明：
设置或检索背景图像是随对象内容滚动还是固定的。
8.5、背景简写
background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
8.6、背景透明(CSS3)
CSS3支持背景半透明的写法语法格式是:
background: rgba(0,0,0,0.3);
最后一个参数是alpha 透明度 取值范围 0~1之间
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。
九、盒子模型
CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
9.1、盒子边框（border）
border : border-width || border-style || border-color
border-style参数：
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
9.2、表格的细线边框
以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。 让我们真的相信，CSS就是我们的白马王子（白雪公主）。
table{ border-collapse:collapse; } collapse 单词是合并的意思
border-collapse:collapse; 表示相邻边框合并在一起。
9.3、内边距（padding）
padding: 3px; 表示上下左右都是3像素
padding: 3px 5px; 表示 上下3像素 左右 5像素 |
padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素 |
padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针
9.4、外边距（margin）同上
外边距实现盒子居中：可以让一个盒子实现水平居中，需要满足一下两个条件：
1. 必须是块级元素。
2. 盒子必须指定了宽度（width）
实际工作中常用这种方式进行网页布局，示例代码如下：
.header{ width:960px; margin:0 auto;}9.5、文字盒子居中图片和背景区别
1、文字水平居中是 text-align: center
2、盒子水平居中 左右margin 改为 auto
9.6、清除元素的默认内外边距
* { padding:0; /* 清除内边距 */ margin:0; /* 清除外边距 */ }注意： 行内元素是只有左右外边距的，是没有上下外边距的。 内边距，在ie6等低版本浏览器也会有问题。
我们尽量不要给行内元素指定上下的内外边距就好了。
9.7、外边距合并(重要)
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
(1)、相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，
则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外
边距的合并（也称外边距塌陷）
(2)、嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，
合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并
解决方案：
1. 可以为父元素定义1像素的上边框或上内边距。
2. 可以为父元素添加overflow:hidden。
9.8、content宽度和高度
注意：
1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
3、如果一个盒子则会和父亲一样宽 占满父亲的宽度， 如果此盒子没有给定宽度 则padding 不会影响本盒子大小。
9.9、圆角边框(CSS3)
从此以后，我们的世界不只有矩形。radius 半径（距离）
语法格式： border-radius: 50%; 让一个正方形 变成圆圈
9.10、盒子阴影(CSS3)
语法格式：
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影
box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);
box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小）阴影颜色 内/外阴影；
注意：
1. 前两个属性是必须写的。其余的可以省略。
2. 外阴影 (outset) 但是不能写 默认 想要内阴影 inset
box-shadow: 0 5rpx 5rpx rgba(0, 0, 0, 0.1) inset;
9.11、浮动(float)(重要)
CSS的定位机制有3种：普通流（标准流）、浮动和定位。
元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。
在CSS中，通过float属性来定义浮动，其基本语法格式如下：
选择器
属性值 描述 left 元素向左浮动 right 元素向右浮动 none 元素不浮动（默认值） 浮动脱离标准流，脱标 不占位置，会影响标准流。浮动只有左右浮动。
1. 浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。
2.一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。
3.元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。
float 浮 漏 特
浮：加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
漏：加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。
特：特别注意，首先浮动的盒子需要和标准流的父级搭配使用， 其次 特别的注意浮动可以使元素显示模式体现为行内块特性。
为什么要清除浮动：
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
除浮动的方法:
(1)、在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器{clear:属性值;} clear 清除
| 属性值 | 描述 |
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响
(2)、父级添加overflow属性方法
可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
(3)使用after伪元素清除浮动
(4)父控件包裹给定高度
9.12、定位(position) （重要）
元素的定位属性
（1）、边偏移
也就说，以后定位要和这边偏移搭配使用， 比如 top: 100px; left: 30px; 等等
边偏移属性 描述 top 顶端偏移量，定义元素相对于其父元素上边线的距离 bottom 底部偏移量，定义元素相对于其父元素下边线的距离 left 左侧偏移量，定义元素相对于其父元素左边线的距离 right 右侧偏移量，定义元素相对于其父元素右边线的距离 （2）、定位模式(定位的分类)重!!!
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
选择器
position属性的常用值
值 描述 static 自动定位（默认定位方式） relative 相对定位，相对于其原文档流的位置进行定位 absolute 绝对定位，相对于其上一个已经定位的父元素进行定位 fixed 固定定位，相对于浏览器窗口进行定位 1）静态定位(static)
静态定位唯一的用处： 就是 取消定位。 position: static;
2）相对定位relative(自恋型)
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留
注意：
1. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
2. 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）
就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）
如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去。
3） 绝对定位absolute (拼爹型)
如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。
当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
以当前屏幕为标准，设置top…. 等
注意：
1、绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。
2、若所有的父元素都没有定位，一浏览器当前屏幕左上角为标准设置top等；
3、若父元素有定位，以最近的父元素左上角为标准进行设置top等
4）子绝父相：
这句话的意思是 子级是绝对定位的话， 父级要用相对定位。
因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。父盒子布局时，
需要占有位置，因此父亲只能是 相对定位. 这就是子绝父相的由来。
5）绝对定位的盒子水平/垂直居中
普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了
定位的盒子也可以水平或者垂直居中，有一个算法。
\1. 首先left 50% 父盒子的一半大小
\2. 然后走自己外边距负的一半值就可以了 margin-left。
6）固定定位fixed(认死理型)
固定定位有两点：
\1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
\2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。
叠放次序（z-index）
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠
在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。
注意：
\1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
\2. 如果取值相同，则根据书写顺序，后来居上。
\3. 后面数字一定不能加单位。
\4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
| 定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
| ------------ | ---------- | --------- | ---------------- |
| 静态static | 不脱标，正常模式 | 不可以 | 正常模式 |
| 相对定位relative | 脱标，占有位置 | 可以 | 相对自身位置移动（自恋型） |
| 绝对定位absolute | 完全脱标，不占有位置 | 可以 | 相对于定位父级移动位置（拼爹型） |
| 固定定位fixed | 完全脱标，不占有位置 | 可以 | 相对于浏览器移动位置（认死理型） |
7）定位模式转换
十、CSS高级技巧
10.1、 元素的显示与隐藏：
(1)、display : none 隐藏对象
display:block 除了转换为块级元素之外，同时还有显示元素的意思。
特点： 隐藏之后，不再保留位置。
（2）、visibility 可见性
visible : 对象可视
hidden : 对象隐藏
特点： 隐藏之后，继续保留原有位置。（停职留薪）
10.2、overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible : 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条，不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 不管超出内容否，总是显示滚动条
10.3、鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
语法：
cursor : default 小白 | pointer 小手 | move 移动 | text 文本
//小手样式 cursor:pointer; cursor其他取值： auto ：标准光标 default ：标准箭头 pointer, hand ：手形光标 crosshair ：十字标 wait ：等待光标 text ：I形光标 vertical-text ：水平I形光标 no-drop ：不可拖动光标 not-allowed ：无效光标 help ：帮助光标 all-scroll ：三角方向标 move ：移动标10.4、轮廓 outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
最直接的写法是 ：outline: 0; 或者 outline: none;
10.5、防止拖拽文本域resize
resize：none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。
设置右下角不可以拖拽：
<textarea style="resize: none;"></textarea>10.6、vertical-align 垂直对齐
vertical-align 垂直对齐， 这个看上去很美好的一个属性， 实际有着不可捉摸的脾气，否则我们也不会这么晚来讲解。
语法：
vertical-align : baseline |top |middle |bottom
不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
10.7、图片、表单和文字对齐
我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。
10.8、去除图片底侧空白缝隙
（1）给img vertical-align:middle | top等等。 让图片不要和基线对齐
（2）给img 添加 display：block; 转换为块级元素就不会存在问题了
10.9、溢出的文字隐藏white-space
white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
参数
normal : 默认处理方式
nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
10.10、text-overflow 溢出的文字省略号代替
text-overflow : clip | ellipsis
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出
clip : 不显示省略标记（...），而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记（...）
注意一定要首先强制一行内显示，再次和overflow属性 搭配使用
.ell { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
- 、