1、列表
1、有序
<ol></ol>
<li></li>
属性：
1、type
2、start
2、无序
<ul></ul>
<li></li>
属性：
1、type
取值：
circle
square
disc(默认)
none
3、定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
2、结构标记
<header></header>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<footer></footer>
3、表单
1、表单元素
<form></form>
属性
1、action
表单提交的服务器程序路径
2、method
1、get
2、post
3、enctype
1、application/x-www-form-urlencoded
2、multipart/form-data
3、text/plain
2、表单控件
1、input元素
语法：<input>
属性：
1、type
2、name
3、value
4、disabled
1、文本框与密码框
<input type="text">
<input type="password">
属性：
1、maxlength
2、readonly
2、单选按钮和复选框
1、单选按钮
<input type="radio">
属性：
name:分组，一组中最多只能有一个按钮被选中
checked:默认被选中
2、复选框
<input type="checkbox">
name:分组，在后台服务器中，可以以一个组名获取所有的选中值。
checked:默认被选中
3、按钮
1、提交按钮
<input type="submit">
功能：提交表单数据到服务器
2、重置按钮
<input type="reset">
功能：将表单数据恢复到初始化
3、普通按钮
<input type="button">
功能：执行客户端脚本
4、隐藏域和文件选择框
1、隐藏域
<input type="hidden">
2、文件选择框
<input type="file">
注意：
1、表单的 method 必须为post
2、表单的 enctype 必须为 multipart/form-data
2、textarea元素
<textarea>内容</textarea>
属性：
1、name ：名称
2、cols ：一行中的字符数，变相设置宽
3、rows ：默认显示多少行数据
4、readonly
3、select 和 option 元素
选项框(下拉选项框，滚动列表)
<select></select>
name:名称
size:大于1的话则为滚动列表
multiple:设置多选
<option></option>
value:值
selected:预选中
4、其他元素
1、为控件分组
<fieldset>
<legend>组名</legend>
</fieldset>
2、关联文本与表单控件
<label>文本</label>
属性：
for：要关联的表单控件的ID值
3、按钮
<button>内容</button>
注意：
该元素 放在 form 中则为提交按钮，否则为普通按钮(IE除外)
4、其他元素
1、浮动框架
<iframe>内容</iframe>
属性：
src：引入浮动框架的url
width：
height：
frameborder：浮动框架的边框
2、摘要与细节
<details>
<summary></summary>
</details>
3、度量元素
<meter>内容</meter>
min：最小值，默认为0
max：最大值，默认为1
value：显示的度量值
4、高亮显示
<mark></mark>
5、时间元素
<time>文本内容</time>
datetime:关联的日期时间
=================================
1、CSS概述
2、CSS语法
3、尺寸与边框
=================================
1、CSS概述
1、问题
1、设置页面中所有的文本颜色为红色
2、页面中所有的div里面的文本的颜色变为 蓝色
3、页面中所有的div里面的文本的颜色变为 绿色
HTML元素属性的弊端：
1、想完成相同效果，却要使用不同属性
2、HTML元素改变的样式可重用性不高
2、CSS
CSS:Cascading Style Sheets
层叠样式表，级联样式表，样式表
特点：
1、实现了网页内容与表现相分离
2、提高了代码的可重用性和可维护性
3、CSS与HTML之间的关系
1、HTML用于构建网页的结构
2、css负责构建HTML页面元素的样式
4、HTML属性和CSS样式的使用原则
W3C建议 尽量使用CSS样式取代HTML属性
1、修改文本的颜色
推荐使用css的color属性
2、修改元素的背景颜色
推荐使用css的background-color属性
如果是HTML元素所特有的属性的话，只能使用HTML元素属性
td元素属性colspan
5、使用CSS样式表的方式(重点)
1、内联方式
作用：将样式定义在单个的HTML元素中
语法：
<ANY style="样式声明1;样式声明2"></ANY>
样式声明语法：
样式属性:属性值
eg:
1、文本颜色的样式属性
color:red;
2、背景颜色的样式属性
background-color:green;
3、文本大小的样式属性
font-size:24px;
练习：设置页面上的 某个 div 元素中的 样式 ， 文本颜色为 黄色(yellow)，背景颜色为黑色(black)，字体大小为48像素
2、内部样式表
1、特点
应用范围为整个页面而不是某一个别元素,能够提升可重用性和可维护性，同时体现内容与表现相分离
2、语法
1、在 <head>元素中 增加 <style></style>标记用来声明样式
2、在 <style></style>元素中 编写若干 “样式规则”
样式规则语法规范：
1、选择器
作用：规范了页面中哪些元素能够使用声明好的样式
eg：
元素选择器
p div span
2、若干样式声明
属性:值;属性:值;
选择器{若干样式声明}
练习：使用内部样式表，控制页面中所有的p标记，文本颜色为yellow色，背景颜色为black色，文字大小为 24px
3、外部样式表
1、作用
以独立的css样式表文件保存样式规则，可以应用在各个页面中
2、使用步骤
1、创建单独的样式表文件(*.css)
在该文件中可以编写若干样式规则
2、在需要使用该样式表文件的页面上，引入样式表文件
在页面的<head>元素中添加以下代码：
<link rel="stylesheet" href="样式表文件url">
4、基本排错
1、Styles 中提示 "Unknown property name"
说明 样式属性名称 写错了
2、Styles 中提示 "Invalid property value"
说明 样式属性值 写错了
1、CSS样式表使用方式
1、内联方式
<ANY style="样式声明">
2、内部样式表
<head>
<style>
样式规则
样式规则
... ...
</style>
</head>
3、外部样式表
1、创建 **.css 文件
2、<link rel="stylesheet" href="">
2、CSS样式基础语法
1、样式声明
属性:值;
color:red;
background-color:yellow;
font-size:12px;
2、样式规则
选择器{
样式声明;
样式声明;
... ...
}
3、选择器
1、通用选择器
*{}
2、元素选择器
元素{}
3、类选择器
.className{}
引用类选择器
<ANY class="className">
特殊使用-分类选择器
元素选择器.类选择器{}
p.redColor{}
特殊使用-多类选择器
<ANY class="类选择器1 类选择器2">
4、ID选择器
与元素ID相匹配
#idValue{}
5、群组选择器
选择器1,选择器2,选择器3{}
6、后代选择器
后代：出现在某元素中的元素
选择器1 选择器2{}
7、子代选择器
子代：出现在某元素中的下一级的元素
选择器1>选择器2{}
<div id="d1">
<span></span>
<p>
<span></span>
</p>
<div>
<p>
<span></span>
</p>
</div>
</div>
<p>
<span></span>
</p>
8、伪类选择器
1、链接伪类
:link 未被访问的状态
:visited 访问过后的状态
2、动态伪类
:hover 鼠标悬停时
:active 元素被激活时
:focus 元素获取焦点时
4、尺寸与边框
1、尺寸
1、宽度
width
min-width
max-width
2、高度
height
min-height
max-height
3、注意
页面中 哪些元素允许修改尺寸属性
1、所有的块级元素
2、具备width和height属性的非块级元素
<table width="" height="">
<img width="" height="">
4、溢出
属性：
overflow
overflow-x
overflow-y
取值：
1、visible
默认值，可见
2、hidden
隐藏
3、scroll
滚动条
4、auto
自动
2、边框
1、border:width style color;
2、border-方向:width style color
3、border-属性:值;
4、border-方向-属性:值;
注意:
1、color 可以取值为 transparent
2、取消边框显示
border:none;
border:0;
************************************
1、边框
2、框模型
3、背景属性
4、渐变
****************************
1、边框
1、边框倒角
属性：border-radius
该属性为简写属性，可以设置四个角的倒角半径
取值：以px为单位 或 以 % 为单位
单角定义:
border-top-left-radius:左上角
border-bottom-right-radius:右下角
border-bottom-left-radius:左下角
border-top-right-radius:右上角
2、边框阴影
给元素增加阴影
属性：box-shadow
取值：多属性值列表
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow:必须 阴影的水平偏移距离，取值为正，向右偏，取值为负，向左偏
v-shadow:必须 阴影的垂直偏移距离，取值为正，向下偏，取值为负，向上偏
blur:可选，模糊距离
spread:可选，阴影的扩充尺寸
color:可选，阴影的颜色
inset:可选值，将默认的外阴影改为内阴影
3、轮廓
1、什么是轮廓
绘制于元素边框周围的一条线
2、属性
outline:width style color;
outline-width:宽度
outline-style:样式
outline-color:颜色
常用：
outline:0;
outline:none;
练习：
在作业基础上，完成以下操作
1、设置图像的边框倒角
2、鼠标悬停在图像上时，将边框由现有样式变成2px粗细，red边框颜色并且，不能有任何的位置变化
2、框模型(重难点)
1、框模型
框：盒子(box)
页面元素皆为框
框模型：(box-model)定义了元素处理内容，内边距，外边距，边框的一种方式
元素的 width和height属性 指定了内容区域的宽度和高度
元素的边框是绘制于元素外围的一条线，会扩大元素的占地尺寸
内边距和外边距 也会增加元素的占地尺寸，但不会影响元素的内容区域
元素的实际宽度=左右外边距+左右边框+左右内边距+width
元素的实际高度=上下外边距+上下边框+上下内边距+height
2、外边距
1、什么是外边距
围绕在元素边框周围的空白区域
作用：
1、控制元素与元素之间的距离
2、移动元素位置
2、属性
margin:四个方向的外边距
margin-方向:单边设置
margin-top:上外边距
margin-bottom:下外边距
margin-left:左外边距
margin-right:右外边距
取值：
1、px 像素
2、%
3、auto(自动)
4、负值
3、内边距
1、边框
1、边框倒角
border-radius
取值：
1、px
2、%
2、边框阴影
box-shadow
取值：
h-shadow:水平位置
v-shadow:垂直位置
blur : 模糊距离
spread ：大小
color ：颜色
inset ：值，内阴影
3、轮廓
outline:width style color;
outline-width:
outline-style:
outline-color:
outline:0;
outline:none;
2、框模型
定义元素处理内容尺寸，边框，内边距和外边距
元素总宽度=左右外边距+左右边框+左右内边距+width
1、外边距
属性：
margin:
margin-top:
margin-right:
margin-bottom:
margin-left:
取值：
1、px
2、%
3、auto
只对 左右 有效，上下无效
处理块级元素的水平居中对齐
4、负值
移动元素
margin-left:-10px;左移动
margin-left:10px;右移动
margin-top:-10px;上移动
margin-top:10px;下移动
margin取值数量
margin:value;
margin:v1 v2;
margin:v1 v2 v3;
margin:v1 v2 v3 v4;
特殊注意：
1、外边距合并
2、外边距溢出
3、行内元素行内块元素
行内元素：对上下外边距无效
行内块元素：设置上下外边距会影响整行元素
2、内边距
padding:
padding-top:
padding-right:
padding-bottom:
padding-left:
取值：
1、px
2、%
注意：
1、设置了内边距后，会扩大元素的边框内的占地尺寸
2、为行内元素设置内边距时，只会影响到自己，不影响其他元素
3、属性 - box-sizing
指定元素边框内距离计算模式
属性：box-sizing
取值：
1、content-box
border和padding会在width和height基础上额外计算
2、border-box
border和padding会计算在width和height之内
3、背景
1、background-color
2、background-image
取值：url(图像url);
3、background-repeat
repeat,no-repeat,repeat-x,repeat-y
4、background-size
取值：
1、width height
2、width% height%
3、cover
4、contain
5、background-attachment
取值：
scroll
fixed
6、background-position
取值：
1、x y
x:水平偏移距离
+ ：右移动
- ：左移动
y:垂直偏移距离
+ ：下移动
- ：上移动
2、x% y%
3、left,right,center,top,bottom
7、background:color url() repeat attachment position;
******************************
1、渐变
1、什么是渐变
多种颜色变化的一个过程
分类：
1、线性渐变
2、径向渐变
3、重复渐变(线性,径向)
特点：
1、渐变都有填充方向(线性渐变)
2、色标(颜色，位置)
2、语法
属性：background-image
取值：
1、linear-gradient():线性渐变
2、radial-gradient():径向渐变
3、repeating-linear-gradient():重复线性渐变
4、repeating-radial-gradient():重复径向渐变
3、线性渐变
语法：background-image:linear-gradient(angle,color-point,color-point,...);
1、angle
渐变的方向或角度
取值：
to top : 从下向上填充渐变色
to right:从左向右填充渐变色
to bottom:从上向下填充渐变
to left:从右向左填充渐变色
0deg : 0度->to top
90deg: 90度->to right
180deg:180度->to bottom
270deg:270度->to left
2、color-point
色标：表示颜色及其颜色出现的位置
ex
red 0% : 开始的时候是红色
blue 25%:25%的时候变成蓝色
red 0px : 开始的时候是红色
blue 25px:到25px的位置处，变为蓝色
练习：创建一个 400*400的div元素，从下向上分别填充red(0%)，blue(50%)，green(100%) 颜色
4、径向渐变
语法：background-image:radial-gradient([size at position],color-point,color-point);
1、size at position
size:表示圆的半径
position:圆心位置，取值可以为 数值，百分比，关键字
该参数可以省略的，圆心位置在元素的正中间
5、重复渐变
语法：
background-image:repeating-linear-gradient(同线性渐变);
background-image:repeating-radial-gradient(同径向渐变);
6、浏览器兼容性
对不支持渐变的浏览器可以增加浏览器前缀来解决兼容性
Firefox : -moz-
Chrome&Safari :-webkit-
Opera:-o-
IE : -ms-
background-image:linear-gradient();
如果浏览器不支持 属性的话 ， 那么前缀就加在属性名称前
ex:
animation,css3中所出的新属性
-webkit-animation:值;
-moz-animation:值;
-o-animation:值;
如果浏览器支持属性但不支持值得花，那么前缀就加在值前
ex:
background-image:linear-gradient();
linear-gradient()是CSS3中出现的新属性值。
background-image:-webkit-linear-gradient();
background-image:-moz-linear-gradient();
background-image:-o-linear-gradient();
2、文本格式化
1、字体属性
1、字体
属性：font-family
取值：value,value
注意：
字体取值中包含特殊符号和中文的话，要用 "" 引起来
ex:
font-family:Arial,"microsoft yahei";
2、字体大小
属性：font-size
3、字体加粗
属性：font-weight
取值：
1、normal：正常显示，大部分标记的默认值
2、bold : 加粗
3、无单位数值
400~900
400 : normal
900 : bold
4、字体样式
属性：font-style
取值：
1、normal 正常
2、italic 斜体
5、小型大写字母
Aa Bb Cc Dd
属性：font-variant
取值：
1、normal
2、small-caps
6、字体属性
属性：font
取值：style variant weight size family;
ex:
font:bold 12px "Arial";
font:12px bold "arial";不对
注意：
使用font属性的话，一定要加上 family的值，否则没效果
2、文本属性
1、文本颜色
属性：color
2、文本排列
作用：控制元素中的文本、行内、行内块元素的水平对齐方式
属性：text-align
取值：left/center/right
3、文字修饰
属性：text-decoration
取值：
1、none
没有
2、underline
下划线
3、overline
上划线
4、line-through
删除线 --> <s></s>
4、行高
作用：指定一行文本的高度。如果行高高于文字本身大小，那么文本将在指定的行高范围内垂直居中显示
属性：line-height
取值：数值
5、首行文本缩进
属性：text-indent
取值：value
6、文本阴影
属性：text-shadow
取值：h-shadow v-shadow blur color;
3、表格
1、表格常用属性
1、边距属性：padding
2、尺寸属性:width,height
3、文本、字体属性
4、背景属性：background ...
5、边框属性: border
6、垂直方向对齐：vertical-align
取值：top/middle/bottom
2、表格特有属性
1、边框合并
属性：border-collapse
取值：
1、separate
默认值，分离边框模式
2、collapse
合并
2、边框边距
属性：border-spacing
作用：控制相邻单元格之间的距离
取值：
1个值：水平和垂直间距相同
2个值：第1个值表示水平间距，第2个值表示垂直间距。两个值之间用空格隔开
注意：border-collpase的值必须为 separate时才能设置边框边距
3、标题位置
标题：<caption></caption>
默认位置：表格上方水平居中
属性：caption-side
取值：
1、top ：默认值
2、bottom : 标题位于表格之下
4、显示规则
作用：如何去布局一个表格,指定了表格显示单元格，行的算法规则, 又称为 表格布局
属性：table-layout
取值：
1、auto ：自动，自动表格布局(默认值)
列宽度是由内容来决定的
2、fixed ：固定，固定表格布局
列宽度有表格以及单元格所设定好的数据为主
auto与fixed的区别：
1、自动表格布局
1、单元格大小会适应内容
2、表格复杂时会比较慢
3、适用于不确定每列大小时使用
4、自定布局算法较慢，但是能反映传统的HTML表格
2、固定表格布局
1、列宽度取决于表格的宽度，列的宽度
2、会加速显示表格
3、固定表格布局算法比较快，但不够灵活
4、浮动(重点)
1、渐变
1、线性渐变
background-image:linear-gradient(angle,color-point,color-point);
ex:
background-image:linear-gradient(to bottom,#f9f9f9,#cdcdcd);
2、径向渐变
background-image:radial-gradient([size at position],color-point,...);
3、重复渐变
属性：background-image
取值：
repeating-linear-gradient()
repeating-radial-gradient()
4、浏览器兼容性
浏览器前缀：
Firefox ：-moz-
Chrome&Safari:-webkit-
Opera:-o-
IE : -ms-
1、如果浏览器不支持属性的话，那么将前缀添加在属性名称前
animation:值;
-webkit-animation:值;
-moz-animation:值;
-o-animation:值;
-ms-animation:值;
2、如果浏览器不支持值得话，那么将前缀添加在值前面
background-image:-webkit-linear-gradient();
2、文本格式化
1、字体属性
font-family
font-size
font-style
font-weight
font-variant
font:style variant weight size family;
2、文本属性
color
text-align:left/center/right;
text-decoration:none/underline/overline/line-through
line-height
text-indent
text-shadow:h v blur color;
3、表格
1、表格特有属性
1、边框合并
属性：border-collapse
取值：
1、separate ：分离边框，默认值
2、collapse : 合并边框
2、边框边距
属性：border-spacing
取值：
1个值：水平垂直间距相等
2个值：
第1个值表示水平间距
第2个值表示垂直间距
3、标题位置
属性：caption-side
取值：
1、top:默认值
2、bottom
4、显示规则
属性：table-layout
取值：
1、auto
自动表格布局
由内容来决定单元格大小
传统表格布局
速度较慢
2、fixed
固定表格布局
由设定的值来决定单元格大小
加载速度较快，不够灵活
*****************************
1、浮动(重难点)
2、显示
3、列表
4、定位(重难点)
*****************************
1、浮动
1、定位
1、什么是定位
元素该出现在网页的哪个位置处
2、定位方式
1、普通流定位
2、浮动定位
3、相对定位
4、绝对定位
5、固定定位
3、普通流定位
又称为 文档流定位
网页元素默认定位方式
页面元素
块级元素-从上到下的方式排列
行内元素-从左到右的方式排列
<body>
<div id="d1">Hello</div>
<div id="d2">World</div>
<span>Hello</span>
<span>World</span>
</body>
4、浮动定位
1、什么是浮动定位
如果将元素的定位方式设定为浮动定位的话，那么它将具备以下特征
1、浮动元素 会被排除在文档流之外-脱离文档流，不占据页面空间，其他未浮动元素要上前补位
2、浮动元素会停靠在父元素的左边或右边，或平级的其他已浮动元素的边缘上
3、浮动元素依然位于包含框之内
4、浮动定位解决的问题-让多个块级元素在一行内显示
2、属性
属性：float
取值：
1、none
默认值，无浮动定位
2、left
左浮动，让元素停靠在父元素的左边，或紧挨着左侧已有的浮动元素
3、right
右浮动，让元素停靠在父元素的右边，或紧挨着右侧已有的浮动元素
5、浮动引发的特殊效果
1、当父元素的宽度已显示不下所有的已浮动子元素时，那么最后一个子元素将换行显示
2、元素一旦浮动起来之后，元素的宽度将变成自适应(内容决定宽度)，前提：不指定元素宽度的情况下
3、元素一旦浮动起来之后，都将变成块级元素，尤其对行内元素影响较大
块级元素：允许修改尺寸
行内元素：不允许修改尺寸
4、文本，行内元素，行内块元素时采用环绕的方式来排列的，是不会被浮动元素压在底下的。
6、清除浮动影响
属性：clear
取值：
1、none
默认值，不做任何清除操作
2、left
清除该元素左边(上边)的浮动元素所带来的影响
3、right
清除该元素右边的浮动元素所带来的影响
4、both
清除该元素两边的浮动元素所带来的影响
7、浮动元素对父元素所带来的影响
由于浮动元素脱离文档流，所以不占据父元素空间。如果一个元素中所有的子元素全部都浮动了的话，那么该元素的高度将变成0
解决方案：
1、直接设置父元素高度
弊端：必须要知道父元素高度是多少
2、设置父元素也浮动
弊端：对后续元素会带来位置的影响
3、为父元素设置 overflow 属性
取值：hidden 或 auto
弊端：如果有内容要以溢出的方式显示的话，也一同被隐藏了。
4、在父元素中，追加空子级块级元素，并设置其clear属性值为 both
1、浮动
1、定位
普通流定位(文档流定位)
浮动定位
相对定位
绝对定位
固定定位
2、浮动定位
1、特征
1、脱离文档流-不占据页面空间,后续元素上前补位
2、会停靠父元素的左边或右边，或者停靠在其他平级已浮动元素边缘上
3、依然包含在父元素内
4、让多个块级元素在一行内显示
2、语法
属性：float
取值：
none/left/right
3、浮动引发的特殊效果
1、父元素宽度已经不足以包含所有的已浮动子元素，最后一个将换行
2、元素浮动起来后，宽度将变得自适应
3、行内元素，行内块元素一旦浮动起来后，将变成块级元素
4、文本，行内元素，行内块元素采用环绕的方式进行排列，会巧妙的避开浮动元素而不会被压住
4、清除浮动
属性：clear
取值：
none/left/right/both
5、浮动元素对父元素带来的影响
对父元素高度带来的影响
1、设置父元素高度
弊端：必须知道父元素的高度
2、设置父元素也浮动
弊端：对后续元素有影响
3、为父元素设置 overflow
取值为：hidden 或 auto
弊端：如果有内容要溢出显示也会被一同隐藏了
4、在父元素中，追加空块级子级元素,并设置其clear属性为both
<div style="clear:both;"></div>
2、显示
1、显示方式
属性：display
取值：
1、none
隐藏，脱离文档流-不占据页面空间
2、block
块级
3、inline
行内
4、inline-block
行内块
除radio和checkbox外的其他行内块元素，是允许修改尺寸的
允许在一行内显示多个元素
2、显示效果
1、可见性
属性：visibility
取值：
1、visible
可见的
2、hidden
隐藏，但是会占据页面空间
3、collapse
2、透明度
属性：opacity
取值：0.0(完全透明) ~ 1.0(完全不透明)
3、垂直对齐方式
属性：vertical-align
取值：
1、baseline
基线对齐
2、top
3、middle
4、bottom
3、光标
属性：cursor
取值：pointer
3、列表
1、列表项显示标识
属性：list-style-type
取值：
none
... ...
2、列表项图像
属性：list-style-image
取值：url()
3、列表项位置
属性：list-style-position
取值：
outside ：默认值
inside ：列表项区域之内
4、列表属性
属性：list-style
取值：type url positioin
常用方式：list-style:none;
******************************
1、定位
1、定位属性
1、定位属性
属性：position
取值：
1、static
默认值，默认定位方式
2、relative
相对定位
3、absolute
绝对定位
4、fixed
固定定位
注意：position取值为 relative，absolute，fixed 的元素被称为 已定位元素
2、偏移属性
作用：移动已定位元素
属性：
top:值;
bottom:值;
left:值;
right:值;
3、堆叠顺序
属性:z-index
取值:无单位数值
2、定位方式-相对定位
1、什么是相对定位
元素会相对于它原来的位置偏移某个距离
元素移动位置后，原来所占据的空间依然会保留
2、使用场合
位置微调
3、语法：
属性：
position:relative;
配合着 偏移属性 实现位置的移动
3、定位方式-绝对定位
1、绝对定位的特征
1、元素会脱离文档流
2、相对于 最近的 已定位的祖先元素 来实现位置的初始化
3、如果元素没有已定位祖先元素，那么它的位置就相对于最初的包含块(body,html)
2、语法
属性：
position:absolute;
配合着 偏移属性 实现位置的初始化或移动
3、绝对定位使用场合
弹出菜单
4、注意
1、绝对定位的元素会变成块级
2、绝对定位的元素可以使用 margin来改变位置，但是 margin:auto 会失效
4、堆叠顺序
1、作用
处理 已定位元素的 堆叠效果
2、默认堆叠效果
1、平级元素-后来者居上
2、子元素压在父元素之上-子压父
3、属性
z-index
取值：数值越大越靠上
4、注意
1、取值可以为负
取值为负时，当前元素会位于页面正常显示内容之下
2、z-index 是无法改变父子关系的堆叠顺序
5、固定定位
1、什么是固定定位
将元素固定在网页的某个位置处
不会随着滚动条而发生位置的变化
2、语法
position:fixed;
配合 片以属性 改变元素位置
3、注意
固定定位永远都是相对于浏览器窗口进行位置初始化的。
