Web基础--HTML、Css
一、web项目（可跳过，直接从下一个标题开始）
1、web项目：
指的是带网页的项目，通过浏览器可以访问的项目。比如：淘宝、天猫等。
2、web项目构成：
浏览器（客户端）、服务器、数据库。
3、java web项目访问流程：
客户端通过servlet/jsp与服务器进行联系，服务器通过jdbc与数据库进行联系。
4、java web程序员学习目标：
（1）如何对服务器进行编程。
（2）如何对数据库进行编程。
（3）如何使服务器访问数据库。
（4）如何对客户端进行编程。
（5）如何使客户端访问服务器。
（6）如何使用框架提高效率。
5、web基础（写网页）：
（1）html：用来勾勒出网页的结构与内容。
（2）css：用来装饰网页。控制页面的外观和表现。
（3）javascript：用来使网页出现动态的效果。控制页面的行为。
二、html
1、html工作原理：
html是部署在服务器上的文本文件。
（1）根据http协议，浏览器发送请求到服务器。
（2）服务器做出响应，并返回响应请求到浏览器。
（3）浏览器执行html，并显示内容。
即html部署在服务端，运行在客户端。
2、xml：
（1）xml（extensible markup language）指可扩展标记语言。主要用于存储或传输数据以及作为配置文件。（重点为数据的内容）
（2）可扩展表现为：标签可扩展、属性可扩展、元素之间嵌套关系可扩展。
（3）严格要求标签的嵌套、配对，属性必须要有值，属性值写在引号中。
（4）xml解析方式：
dom解析方式：指document object model，即文档对象模型，是w3c组织推荐的一种处理xml的一种方式。dom解析文档时，会将文档中所有元素，按照其出现的层次关系，将其解析成一个一个的node对象（节点）。dom优点：把xml文件在内存中构造出树形结构，可以遍历并修改节点。缺点：如果文件较大，内存有压力，解析时间长。
sax解析方式：指simple api for xml ，是一种xml解析的替代方法。sax逐行扫描文档，边扫描边解析。相比于dom，sax是一种速度更快、更有效的方法，且sax可以在解析文档的任意时刻停止解析。sax优点：解析速度快，没内存压力。缺点：不能对节点进行修改。（比如安卓）
3、html:
（1）html（hypertext markup language）指超文本标记语言，是一种纯文本类型的语言。用于显示数据。（重点是数据的外观）
（2）可以理解为固定的xml，标签固定、属性固定、元素嵌套关系固定。
（3）html存在多个版本，若不能正确识别版本，则浏览器不能正确的显示页面。使用<!doctype>用于声明html版本。
例如： 声明html5版本， <!doctype html>
（4）基本结构：
<!-- 将文档声明为html5版本 -->
<!doctype html>
<!--html是唯一的根-->
<html>
<head>
<!--设置文档标题、编码、引入的资源-->
</head>
<body>
<!--页面上要呈现的内容-->
hello html!
</body>
</html>
（5）<head>标签：
是所有头部元素的容器。
<head>可以有元素<title>,<meta>,<link>,<style>,<script>。用于设置文档标题、编码、引入的资源。
<title>定义页面标题，若不设置，则默认为当前文件名。
<meta>提供关于html文档的元数据，该数据不会显示在页面上，但对于机器是可读的。常见属性有：content, http-equiv, charset。用于规定页面的描述、关键字、文档的作者、最后修改的时间以及其他元数据。
<!-- 将文档声明为html5版本 -->
<!doctype html>
<!--html是唯一的根元素 -->
<html>
<head>
<!-- 设置标题、编码、引入的资源 -->
<!-- 设置文档标题 -->
<title>我的第一个网页</title>
<!-- 设置编码格式, 要和文档保存的编码格式相同-->
<meta charset = "utf-8"/>
</head>
<body>
<!-- 文档呈现的内容 -->
hello html!
</body>
</html>
三、html标签
1、文本元素（文本标签）
（1）作用：
文本是网页上的重要组成部分，直接书写的文本会使用浏览器的默认样式显示。
（2）分类：
标题元素（<h1> ~ <h6>）。
段落元素（<p>）。
列表元素（<ol> <li>, <ul> <li>）。
分区元素（<div>， <span>）。
行内元素（<i>, <em>, <br>等）。
（3）标题元素（<h1> ~ <h6>）：
标题元素使文字突出，一般用于文章的标题，显示不同的字体大小。
语法规则：
<h#></h#>，其中# = 1,2,3,4,5,6。其中<h1>为最大号标题。
（4）段落元素（<p>）：
段落元素提供了结构化文本的方式。文本会用单独的段落显示，与前后文本分开，并添加一段额外的垂直空白距离。可以使用<br>主动换行。
语法规则：
<p>文本内容</p>。
（5）列表元素（<ol> <li>, <ul> <li>）：
列表将具有相似特征或者具有先后顺序的几行文字进行排序。所有的列表都由列表类型和列表项组成。
列表类型：有序列表（<ol>），无序列表（<ul>）。
列表项指：<li>，用于显示具体的列表内容。
语法规则：
【有序列表（在文本内容前加数字表示顺序）：】
<ol>
<li>文本内容</li>
<li>文本内容</li>
</ol>
【无序列表（在文本内容前加小圆点表示无序）：】
<ul>
<li>文本内容</li>
<li>文本内容</li>
</ul>
【有序、无序嵌套：】
<ol>
<li>
文本内容
<ul>
<li>文本内容</li>
<li>文本内容</li>
</ul>
</li>
<li>文本内容</li>
</ol>
（6）分区元素（<div>， <span>）
分区元素用于元素分组，常用于页面布局，便于开发。
语法规则：
【块分区元素（会影响页面布局）】： <div>文本内容</div> 【行内分区元素（设置同一行文字中的不同格式）】： <span>文本内容</span>
（7）行内元素（<i>, <em>, <br>等）
<i>， <em>元素用来定义斜体字。 <b>, <strong>元素用来定义粗体字。 <del>元素用来定义带删除线的文字。 <u>元素用来定义带下划线的文字。 <br>元素用来换行。 表示空格（其分号不能少）。 < 表示小于号（<）。 > 表示大于号（>）。 & 表示（&）。 © 表示版权（©）。
2、图像、超链接、锚点、表格
（1）图像<img>:
使用<img>元素将图像添加到页面。
必须存在的属性：src（添加路径）。常用属性：width, height。
语法规则：
<img src="" width="" height=""> src属性：指图片路径。 width属性：指图片宽度。 height属性：指图片高度。
（2）超链接<a>:
使用<a>元素创建一个超链接。
语法规则：
<a href ="" target = "">文本</a>。 href属性：指链接的url。 target属性：指目标的打开方式，可取值为_blank（打开新窗口）， _self（当前窗口打开）等。
（3）锚点（特殊的超链接）：
锚点是文档中某行的一个记号，用于链接（跳转）到文档中的某个位置。
语法规则：
定义锚点： <a name = "name1">锚点一</a> 链接到锚点（要在锚点名前加#）： <a href = "#name1">回到锚点一</a> 默认的链接为回到顶部，不需要设置锚点。 格式： <a href = "#"></a>
（4）表格：
表格通常用来组织结构化的信息。表格是由一些矩形框（单元格）按照从左到右，从上到下的顺序排列而成的。表格的数据显示在单元格内。
表格元素为：
table（表格）,
td（列，是单元格）,
tr（行）。
默认情况下，表格的边线看不见，可以给table统一设置边线可见。
cellpadding:单元格边框与内容间的间距。
cellspacing:单元格之间的间距。
常用属性：
<table>常用属性：border, width, height, align, cellpadding, cellspacing.
<tr>常用属性:align, valign .
<td>常用属性：align, valign, width, height, colspan, rowspan。
rowspan：跨行，使当前单元格沿着垂直方向延伸，值为合并单元格数。
colspan：跨列，使当前单元格沿着水平方向延伸，值为合并单元格数。
caption元素：为表格定义标题，默认居中显示在表格上方。
举例：
<!-- 创建一个两行两列的表格 -->
<table border="1px" width="100px" height="100px">
<caption>
测试
</caption>
<tr>
<td colspan="2" align="center"> aaa </td>
</tr>
<tr>
<td> ccc </td>
<td> ddd </td>
</tr>
</table>
表格行分组：
表格可以分成3部分：表头，表主体和表尾。分组的目的是为了方便对组内元素设置样式以及编程（js）。
表头行分组：<thead></thead>
表主体行分组：<tbody></tbody>
表尾行分组：<tfoot></tfoot>
【举例：】
<!-- 创建一个两行两列的表格，使用<tbody> -->
<table border="1px" width="100px" height="100px">
<caption>
测试
</caption>
<tbody>
<tr>
<td colspan="2" align="center"> aaa </td>
</tr>
<tr>
<td> ccc </td>
<td> ddd </td>
</tr>
</tbody>
</table>
3、表单<form>
（1）表单的作用：
表单用于显示、收集信息，并提交信息到服务器。表单是浏览器向服务器传输数据的手段。
表单处理：
实现数据交换的可见界面元素，比如文本框、按钮等。
提交后的表单处理（不可见）。
（2）表单<form>：
使用<form>元素创建表单。并在<form>元素中添加表单控件元素。即form元素在页面上有固定的表单范围，其内部的空间才可提交。
主要属性：
action：定义表单被提交时发生的动作，通常包含服务方脚本的url（jsp或php等）。 method：指出表单数据的提交方式，取值为get或者post。 enctype：表单数据进行编码的方式。 name：表单的名称。
（3）表单控件：
表单控件元素是包含在表单元素中具有可视化外观的html元素，用于访问者输入信息。即表单控件是一种html元素，是信息输入项。表单可以包含很多不同类型的表单控件。
常用表单控件：
input元素：文本输入控件、按钮、单选和复选框、选择框、文件选择框和隐藏控件等。 textarea元素：定义多行的文本输入控件。 select和option元素：可创建单选或多选菜单。
（4）<input>标签：
<input>元素用于收集用户信息。该元素是一个单标记，即格式为<input />。
属性：
type：根据不同type值，可以创建各种类型的输入字段，比如文本框、复选框等。
value：控件的数据。
name：控件的名称。
文本框与密码框：
文本框：<input type="text" />
密码框：<input type="password" />
【主要属性：】
value属性：由访问者*输入的任何文本。
maxlength属性：限制输入的字符数。
readonly属性：设置文本控件可读。
【举例：】
<!-- label是表单中的文本，通过for属性可以绑定到input元素上，使得点击此label时，相当于点击了对应的input。id相当于元素的身份证号，用来引用该元素 -->
<label for="username">账号：</label>
<input type="text" id="username"/>
<label for="pwd">密码：</label>
<input type="password" id="pwd" />
单选框与复选框：
单选框：<input type="radio" />
复选框：<input type="checkbox" />
【主要属性：】
value：文本，当提交form时，如果选中此单选按钮，那么该value值将被发送到服务器。
name：用于实现分组，一组单选框或者复选框名称必须相同。
checked：设置选中。
【举例：】
<!-- 单选框(按钮) ，一组单选框间需彼此互斥，需使其同名，即radio同名.checked表示默认选项（默认选中）-->
<input type="radio" name="sex" id="male" checked/>
<label for="male">男</label>
<input type="radio" name="sex" id="female" />
<label for="female">女</label>
<!-- 多选框（按钮）name属性用于分组，id用于标识 -->
<input type="checkbox" name="favorites" id="basketball" />
<label for="basketball">篮球</label>
<input type="checkbox" name="favorites" id="football" />
<label for="football">足球</label>
<input type="checkbox" name="favorites" id="volleyball" />
<label for="volleyball">排球</label>
提交、重置、普通按钮：
提交按钮：<input type="submit" />传送表单数据到服务器端或其他程序进行处理。
重置按钮：<input type="reset" />清空表单数据，并将表单控件设置为最初的默认值。
普通按钮：<input type="button" />用于执行客户端脚本。
【主要属性：】
value：按钮的标题文本，即按钮上显示的文本内容。
【举例：】
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<input type="button" value="取消"/>
隐藏域、文件选择框：
隐藏域：<input type="hidden" />在表单中包含不希望用户看见的信息。
文件选择框：<input type="file" />选择要上传的文件。
【举例：】
<!-- 隐藏域，即隐藏的文本框（看不见），用来封装一些不希望被用户看到的数据。该控件的数据不需手动输入，而是预置数据。 -->
<input type="hidden" value="123"/>
<!-- 文件选择框 ,用于提交文件-->
<lable for="attachment">上传附件：</lable>
<input type="file" id="attachment" />
（5）<textarea>标签：
文本域：相当于多行文本框。 语法：
<textarea>文本</textarea>
主要属性： cols：指定文本区域的列数。 rows：指定文本区域的行数。 readonly：只读。 【举例：】 <!-- 文本域可以使用cols设置列数，使用rows设置行数。文本内容为默认值，可不写。--> <label for="desc">自我介绍</label> <textarea id="desc" cols="30" rows="5"> hello world! </textarea>
（6）<select>标签：
下拉选项：下拉框，用于多个内容的选择。
语法：
<select>
<option>---请选择---</option>
<option value="1">java</option>
<option value="2">php</option>
<option value="3">.net</option>
</select>
四、css
1、css
（1）什么是css？
css（cascading style sheets）,指层叠样式表。样式通常存储在样式表中，定义如何显示html，即css给html化妆（修饰）的。
（2）如何使用css？
内联方式：即样式表定义在单个html元素中。
内部样式表：样式定义在html页的头元素中。
外部样式表（推荐使用）：将样式定义在一个外部的css文件中（.css文件）。由html页面引用样式表文件。
（3）css内联样式：
样式定义在html标签的style属性里。
语法规则：
1、只需将分号隔开的一个或多个属性/值对作为元素的style属性的值。 2、属性和属性值间用（:）冒号连接。 3、多个属性间用（;）分号隔开。 【格式：】 <h1 style="color:red;">内联样式演示</h1>
（4）css内部样式：
样式定义在html文档的头部标签<head>的<style>标签内。
语法规则：
在<head>元素里添加<style>元素，然后在<style>元素里添加样式规则。
【格式：】
<head>
<title>css演示</title>
<meta charset="utf-8" />
<!-- 内部样式 -->
<style type="text/css">
h2{
color:blue;
}
</style>
</head>
（5）css外部样式：
样式定义在独立的（.css）文件里。是一个纯文本文件，文件后缀名（.css）。该文件只包含样式规则。然后在html的头部标签<head>中通过<link>元素来引用。
语法规则：
<!-- 外部样式，需引用（.css）文件。 rel表示引用的是什么文件，type表示引用的格式。href表示路径--> <link rel="stylesheet" type="text/css" href="../css/css演示.css"/>
（6）css规则特性：
继承性： 父元素的css声明可以被子元素继承、比如字体、颜色等。
层叠性： 同一个元素若存在多个css规则，对于不冲突的声明可以进行叠加。
优先级： 同一个元素若存在多个css规则，对于冲突的声明可以以优先级高的为准。即相同的样式，如果重复定义，则以最后一次定义为准（就近原则）。
（7）css写法：
css由css选择器以及css声明组成。
选择器用于定位到某个元素。
声明用于给元素附加效果。
2、css选择器
（1）分类：
元素选择器。
类选择器。
id选择器。
选择器组。
派生选择器。
伪类选择器。
（2）元素选择器：
通过元素名（标签名）来选择css作用的目标。
格式：
p{
}
使用情景：
如果页面中有多个相同元素需要相同的样式效果，那么可以使用元素选择器。
【举例：】
<style type="text/css">
p{
color:red;
}
</style>
（3）类选择器：
类选择器允许以一种独立于文档元素的方式来指定样式。所有能附带class属性的元素都可以使用此样式声明，并将元素的class属性值设置为样式类名。
格式：
.classname{
}
使用情景：
如果页面中有不同的元素需要相同的样式效果，可以使用类选择器。
【举例：】
<style type="text/css">
.important{
color:red;
}
</style>
<h1 class = "important">hello</h1>
<h2 class = "important">world</h2>
可以将类选择器和元素选择器结合，以实现一个元素中不同样式的控制。
【格式：】
元素选择器.classname{
}
【举例：】
<style type="text/css">
p.test1{
color : red;
}
p.test2{
color : yellow;
}
</style>
<p class = "test1">hello</p>
<p class = "test2">hello</p>
（4）id选择器：
id选择器以一种独立于文档元素的方式来指定样式。仅作用于id的值。
格式：
【格式：】
#id{
}
【举例：】
<style type="text/css">
#d1{
color:red;
}
</style>
<div id="d1">helloworld</div>
（5）选择器组：
选择器组是以逗号隔开的选择器列表，将一些相同的规则作用于多个元素。
【格式：】
.classname, #id{
}
【举例：】
<style type="text/css">
.test1, #e2{
color : blue;
}
</style>
<p class = "test1" id="e1">hello</p>
<p class = "test2" id="e2">hello</p>
（6）派生选择器：
派生选择器用来选择子元素。
分类：
后代选择器：选择某元素的所有后代（子孙）元素。（以空格隔开）
子元素选择器：选择某元素的所有子（儿子）元素。（以>隔开）
【举例：后代选择器】
<style type="text/css">
/*将 id=d1 元素中 所有元素中的 p元素 改为红色*/
#d1 p{
color:red;
}
</style>
<div id="d1">
<p id="p1">hello</p>
<p id="p2">hello</p>
</div>
【举例：子元素选择器】
<style type="text/css">
/*将 id=d1 元素中 id=p1 的元素 改为红色*/
#d1>#p1{
color:red;
}
</style>
<div id="d1">
<p id="p1">hello</p>
<p id="p2">hello</p>
</div>
（7）伪类选择器：
伪类用于设置同一元素在不同状态下的样式。
常用伪类：
:link：向未被访问的超链接添加样式。
:visited：向已被访问的超链接添加样式。
:active：向被激活的元素添加样式。
:hover：当鼠标悬停在元素上方时，向该元素添加样式。
:focus：当元素获取焦点时，向该元素添加样式。
【举例：】
<!doctype html>
<html>
<head>
<title>css演示</title>
<meta charset="utf-8" />
<style type="text/css">
/*浏览器从未点击过的超链接，显示相应样式*/
a:link{
color:blue;
}
/*浏览器点击过的超链接，显示相应样式*/
a:visited {
color:red;
}
/*选择激活（正被点击）的元素，正被点击的话改变样式*/
#btn:active{
background: pink;
}
/*选择鼠标悬停的目标，鼠标悬停在目标上方会改变样式*/
img:hover{
width:200px;
height:200px;
}
/*选择有焦点的文本框,点击选中后会改变相应样式*/
#t1:focus{
background-color:red;
}
</style>
</head>
<body >
<p>
<!--测试（:link）与（:visited），若超链接被点击过，则显示红色，未被点击过，则显示蓝色-->
<a href="http://www.baidu.com" target="blank">百度</a>
</p>
<p>
<!--测试（:active），若点击按钮，则变粉红色，不点击会恢复原来的颜色-->
<input type="button" value="点我啊" id="btn" />
</p>
<p>
<!--测试（:hover）,鼠标放在图片上，则图片会改变大小-->
<img src="../images/pig.png">
</p>
<p>
<!--测试（:focus），鼠标点击后（获取焦点），则背景改为红色-->
<input type="text" id="t1" />
</p>
</body>
</html>
3、常用css声明（border, box, background, table, font）
（1）样式规则：
样式单位：
%：百分比。（常用，动态适应大小）
in：英寸。
cm：厘米。
mm：毫米。
pt：磅（1pt等于 1/72 英寸）。
px：像素（计算机屏幕上的一个点）。（常用，固定大小）
em：1em相当于当前字体尺寸，2em为当前尺寸的两倍。（常用，根据文字设置大小）
样式颜色：
#rrggbb：十六进制数。如#ff0000.
#rgb：简写的十六进制数。如#f00，等价于#ff0000
rgb(x, y, z)：rgb的值，如rgb(255, 0 , 0)。
rgb(x%, y% , z%)：rgb的百分比值，如rgb(100%, 0%, 0%)。
表示颜色的英文单词，如red。
【举例：】
黑色（rgb(0,0,0)），白色（rgb(1,1,1)），灰色（rgb(a,a,a)）
（2）boeder(边框)
border属性：用来设置元素的边框。
格式：
【四边整体设置：】
格式：
border: width值 style值 color值;
【四边单独设置：】
格式：
border-left: width值 style值 color值;
border-right: width值 style值 color值;
border-top: width值 style值 color值;
border-bottom: width值 style值 color值;
【style值：】
dashed 用于表示虚线边框
solid 用于表示实线边框
即：
border: 1px dashed #ccc;表示灰色虚线边框。
border: 1px solid #ccc;表示灰色实线边框。
【举例：】
<style type="text/css">
/*dashed为虚线，solid为实线*/
p{
border: 1px solid red;
width:100px;
height:100px;
}
h1{
border-left: 15px solid #ccc;
border-bottom: 2px solid red;
}
</style>
数据溢出元素框处理：（overflow）
visible:默认格式，显示溢出的元素。
hidden：隐藏，不显示溢出的元素。
scroll：加滚动条，无论是否数据溢出，都加滚动条。
auto：自动，若溢出，则加滚动条，否则，不加。
【写法：】
【默认情况：（visible）】
div{
width:300px;
height:50px;
border:1px solid blue;
}
【隐藏数据：（hidden）】
div{
width:300px;
height:50px;
border:1px solid blue;
overflow:hidden;
}
【加滚动条：（scroll）】
div{
width:300px;
height:50px;
border:1px solid blue;
overflow:scroll;
}
【自动加滚动条：（auto）】
div{
width:300px;
height:50px;
border:1px solid blue;
overflow:auto;
}
（3）box
框模型（box model）定义了元素框处理元素的内容、内边距、边框、外边距的方式。
内边距（padding）：元素的内容与border间的距离。默认为0 。
外边距（margin）：border与另外一个元素的距离。默认为0 。
注：增加内边距、外边距、边框的尺寸不会影响元素的内容尺寸，但会增加元素实际总尺寸。元素的内容尺寸与width与height有关。
【四边整体设置1：】
格式：
padding:width值;
margin:width值;
【四边整体设置2：顺序为上右下左（推荐）】
格式：
padding:width值 width值 width值 width值;
margin:width值 width值 width值 width值;
【四边整体设置3：对边设置】
格式：
padding:width值 width值;
margin:width值 auto;
【四边单独设置：】
格式：
padding-top:width值;
padding-right:width值;
padding-bottom:width值;
padding-left:width值;
margin-top:width值;
margin-right:width值;
margin-bottom:width值;
margin-left:width值;
（4）background
背景色：
background-color属性用于给元素设置背景色，该属性接受任何合法的颜色值。
【举例：】
body{
background-color:#ccc;
}
背景图片：
background-image属性用于设置背景图片。默认值为none，表示背景上没有放置任何图像。若想设置一个背景图像，需使用 url 且添加一个相对url（相对路径）或者绝对url。
默认情况下，背景图片在水平和垂直方向上重复出现，类似于“墙纸”的效果。
background-repeat属性可以控制背景图片的平铺效果。
background-repeat:repeat；默认值，在水平和垂直方向上重复，为重复值。
background-repeat:repeat-x;仅在水平方向重复。
background-repeat:repeat-y;仅在垂直方向重复。
background-repeat:no-repeat;仅显示一次。
background-position属性用于改变背景图片在元素中的位置。
取值为：x% y% 或 x y 或 left\center\right\top\bottom等
注：
background: url("../images/hero0.png") no-repeat center;
等价于
background-image: url("../images/hero0.png");
background-repeat: no-repeat;
background-position: center;
默认情况下，背景图像会随着页面的滚动而滚动，可以通过background-attachment属性来改变此特征，
默认为scroll，即背景随文档滚动。
若取值为fixed，则背景图片固定，不随页面滚动，通常用于实现“水印”效果。
即：
body{
background-attachment:fixed;
}
（5）font
用于格式化文本信息。
指定字体（可以指定多个字体）：font-family:value1, value2; 设置字体大小：font-size:value; 将字体加粗：font-weight:normal/bold; 设置文本颜色：color:value; 设置文本排列：text-align:left\right\center。 文字修饰：text-decoration:none\underline. 行高：line-height:value(1.6em); eg: line-height: 1.6em; 注：若行高与元素等高时，文字居中显示（文字默认不居中）。 首行文本缩进：text-indent:value(2em); eg: text-indent: 2em;
（6）table
表格同样也有box框（边框、内边距、外边距、宽、高）以及文本格式化属性。
若设置了单元格的边框，则相邻单元格的边框会单独显示（默认，即边框与边框间有缝隙）。
使用border-collapse属性可以合并相邻的边框（即边框间无缝隙）。
即
border-collapse: separate/collapse；
4、定位（流定位、浮动定位、相对定位、绝对定位）
（1）定位
什么是定位：
指的是定义元素框 相对于 其正常位置应该出现的位置、或者相对于父元素、另一个元素甚至浏览器窗口所在的位置。
分类：
流定位（默认）
浮动定位
相对定位
绝对定位
固定定位。
属性：
position：规定元素的定位类型，取值为：static/relative/absolute/fixed。操作流定位、相对定位、绝对定位、固定定位。
偏移属性：用于定义元素框的偏移位置，取值为：top/bottom/left/right。
z-index：设置元素的堆叠顺序。（序号越大，越在上层，即覆盖其他元素）
float：浮动定位的属性，用于左、右浮动。
clear：浮动定位的属性，用于消除浮动的影响。
（2）流定位（默认）
页面中的块级元素框从上到下一个接一个排列。每一个块级元素都会出现在一个新的行中。元素框间的垂直距离是由框的垂直外边距计算出来的。
行内元素在一行中从左到右排列，水平布置，不从新行开始，可以使用水平内边距、边框和外边距来调整它们的间距。
（3）浮动定位：（float，clear）
浮动定位指让元素脱离普通的流定位，将浮动元素放置在父元素的左边或者右边，浮动元素依旧存在于父元素内。
浮动的框可以向左或者向右移动，直到它的外边缘碰到父元素或者另外一个浮动框为止。经常用来实现特殊的定位效果。
使元素实现水平布局的效果。
float属性定义元素在哪个方向浮动，在css中，任意元素均可浮动。
float: none/left/right。不浮动/左浮动/右浮动
【格式：】
.d1, .d2, .d3{
float:left;
}
clear属性用来清除浮动所带来的影响。消除一个元素a浮动对另一个元素b的影响，操作的是元素b，只能消除对元素b的影响，不能消除元素a自身的影响。（可能不能完全消除所有影响）
clear:none/left/right/both;定义元素的哪边不允许出现浮动元素。
【格式：】
p{
clear:left;
}
浮动定位举例：（右浮动）
假如父元素有三个元素框，其由上到下排序，若将框1向右移动，则框1脱离并向右移动，直到碰到父元素的边框为止。且每次浮动完，父元素会收缩。
（4）相对定位（position：relative）
元素所占的空间不释放，元素框会相对于它原位置偏移某个距离。可以设置水平或者垂直位置，让元素相对于它的起点进行移动。
常用于照片的抖动效果。
【设置元素的相对定位：】
1、先设置position属性值为relative。
2、然后使用left属性或者right属性设置水平方向的偏移量，也可使用top属性或者bottom属性设置垂直方向的偏移量。
【格式：】
div{
position:relative;
left:50px;
top:50px;
}
【举例：照片墙效果】
<!doctype html>
<html>
<head>
<title>照片墙效果</title>
<meta charset="utf-8" />
<style type="text/css">
body{
background-color: #300;
}
ul{
width:780px;
margin:10px auto;
/*去掉li前的符号*/
list-style-type: none;
}
li{
background-color: #fff;
border: 1px solid #ccc;
width:218px;
margin: 10px;
padding: 10px;
float:left;
}
li p{
text-align: center;
}
li:hover{
position: relative;
left:-5px;
top:-5px;
}
</style>
</head>
<body>
<!-- 照片墙，首先是一个无序列表li,用于保存照片，（此时排列顺序由上到下）
然后使用左浮动，将图片进行排列， （此时排列顺序从左到右，从上到下）
当鼠标悬浮在图片上时，让图片偏移一点点（使用相对定位）。-->
<ul>
<li>
<img src="../images/01.jpg">
<p>啊</p>
</li>
<li>
<img src="../images/02.jpg">
<p>在苍茫的大海上</p>
</li>
<li>
<img src="../images/03.jpg">
<p>狂风卷积着乌云</p>
</li>
<li>
<img src="../images/04.jpg">
<p>在乌云和大海之间</p>
</li>
<li>
<img src="../images/05.jpg">
<p>有只海燕</p>
</li>
<li>
<img src="../images/06.jpg">
<p>来为我牵线</p>
</li>
</ul>
</body>
</html>
（5）绝对定位（position：absolute）
将元素内容从当前定位中移出，并释放空间。
使用偏移属性来固定该元素的位置。位置 相对于最近的已定位（相对定位）祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（比如body元素）。
相对定位是相对于自身产生偏移，绝对定位是特殊的相对定位，相对于已定位的祖先元素产生偏移。
常用于文字在图片的各种位置上显示。
【设置元素的绝对定位：】
1、首先设置position属性的值为absolute。
2、然后使用left属性或者right属性设置元素的水平位置。（left取负值则向左移，right取负值向右移）
3、可以使用top属性或者bottom属性设置元素的垂直位置。
【格式：】
div{
position:absolute;
left:50px;
top:50px;
}
（6）固定定位（position：fixed）
将元素内容固定到页面的某个位置。此时元素从普通流中完全移出，不占用页面的空间，且用户滚动页面时，元素框不会随着移动。
常用于“水印”的效果。与背景图片中的background-attachment: fixed；功能类似。
常用于“跳转效果”，即页面滚动，其一直显示在某处，点击会跳转到顶部。
【 设置固定定位：】
1、首先设置position属性值为fixed。
2、通过left或right或top或bottom这些偏移属性来定义元素的位置。
【格式：】
div{
position:fixed;
left:50px;
top:50px;
}
（7）堆叠顺序（z-index）
一旦修改元素的定位方式，那么元素间可能存在堆叠情况。
使用z-index属性来控制元素框出现的重叠顺序。
常用于多个页面相互覆盖的情况，根据操作显示不同的页面。
z-index属性： 值为数值：数值越大，表示堆叠的顺序越高，即在页面中显示的越上方，离用户近。
可以将其设置成负值，表示离底层越近。
5、list-style-type、cursor
（1）列表样式（list-style-type、list-style-image）
list-style-type属性用于控制列表中列表项标志的样式。
无序列表（ul）:出现在列表旁的是圆点。
【取值为：】
none：无标记。
disc：实心圆（默认值）。
circle:空心圆。
square：实心块。
【格式：】
.ul{
list-style-type:circle;
}
有序列表（ol）:出现的可能是字母、数字或其他计数体系的一个符号。
【取值为：】
none：无标记。
decimal：数字（如1，2,3,4），为默认值。
lower-roman：小写罗马数字。（i, ii, iii, iv, v）
upper-roman：大写罗马数字。(i, ii ,iii, iv, v)
【格式：】
.ol{
list-style-type:decimal;
}
list-style-image属性是使用图像来代替列表项的标志。
【取值为：】
url(""),指定某图像作为标志。
【格式：】
.image{
list-style-image:url('');
}
（2）cursor
默认情况下，光标会根据用户的操作发生改变，当鼠标悬停在一个链接上时，光标由指针形状改为手指形状。当鼠标悬停在文本区域时，光标由指针改为i形状。当鼠标悬停在一个按钮上时，光标会显示为箭头。
可以使用cursor属性指定鼠标的光标形状，以提示用户进行操作。cursor属性定义了鼠标指针放在某一个元素边界范围内时所用的光标形状。
取值：
default 默认光标（通常是一个箭头）
pointer 光标呈现为指示链接的指针（一只手）
crosshair 光标呈现为十字线。
text 此光标指示文本
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。
上一篇： 微信小程序开发原理与测试注意事项