HTML
一、概述
1、什么是 HTML：超文本标记语言，使用一对尖括号括起来，实现特殊的效果定义，用于编写网页（后缀为.html、.htm的文件）
2、编辑：文本编辑工具，都可以编写 HTML页面
记事本、editplus、ultraedit、DW、webstorm、apanta...
运行：浏览器
IE、firefox、chrome、opera、safari
3、HTML是一种解释性的语言：代码错误，试图解释，造成不可预料的奇怪效果
编译性的语言：后台代码
解释性的语言：不检查错误 -----使用浏览器调试找错误
二、基础语法
1、双标记：有开始也有结束标记，比如111<h1>aaa</h1>222
2、单标记：只有开始标记
<br> 或者 <br />
-----标记可以嵌套，形成复杂的页面，注意嵌套的顺序
-----不区分大小写，严格区分中英文字符
3、属性：定义在开始标记里，用空格隔开，属性名=“属性值”，多个属性，之间依然用空格隔开
4、html页面的标准格式
<!DOCTYPE .....>---文档类型声明
<html>-----整个页面
<head></head>---页面的整体定义
<body></body>---页面内容
</html>
5、文档类型声明:HTML语言拥有众多版本
传统型：<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
严格型、框架型、H5类型：<!DOCTYPE html>
6、head里：文档头，用于包含那些为页面进行整体定义的内容
title：页面的标题
meta：元数据，定义页面的编码格式、缓存、搜索关键字等...
<meta http-equiv="refresh" content="5" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="CSS3,JavaScript"/> ---增加页面被搜搜到的概率
7、添加注释：为代码添加一些描述性的说明信息，提高代码的可阅读性、可维护度
<!-- 注释的内容 --> 注释的内容将不再参与页面的显示
三、文本
1、能够在页面上显示的文本内容：普通文本、标记文本
2、普通文本：直接书写直接显示
空格折叠的现象：将编辑时候的多个空格和多个换行，合成一个空格展示
特殊字符：有特定意义的字符、键盘无法录入的------使用“字符实体”替代
< 表示 < less than > 表示 > greater than
3、<h1>---标题文本（大字体、加粗、独占一行，行间距）,常用于页面上的突出显示的文本。<h2>---<h6>也是标题
4、<p></p>---段落，被它所包含的文本，自成一个段落，且拥有行间距
5、<br />--换行，相当于回车符
6、<b></b>--加粗显示；<i></i>--斜体显示；<u></u>--下划线显示
7、<div></div>---内容独占一行，不会带来其他效果，常用于页面内容的分组，实现特定的样式定义
8、<span></span>---常用于标出一行中的某些文本，定义特定的样式
9、块级标记：（block）内容会独占一行，比如h1、p、div
行内标记：（inline）可以和其他行内标记位于同一行，比如b、i、u、span
块元素：可以嵌套块元素和行内元素
行内元素：不可嵌套块元素
10、其他名词：P标记、P元素、P标签
四、图像和链接
1、图像 <img src="url" width="" height=""/>
2、关于地址
对于web程序而言，不能使用d:\images\a.jpg这种路径－－》资源文件，服务器端发来，位于缓存区域。应该使用相对路径或者绝对路径
３、相对路径:相对于当前网页文件而言
<img src="a.jpg" /> <img src="images/b.jpg" /> <img src="../images/c.jpg" />
4、绝对路径(全路径)
<img src="http://www.jd.com/a.jpg" />
5、链接
<a href="http://www.tmooc.cn" target="_blank">点击的内容</a>
锚点链接 name="name" href="#name" target="_blank"
五、表格
1、用于显示网格数据、页面的简单布局
2、表格的相关标记：tr:table row--表行；td:table defination---单元格
3、常用属性
Caption：表格标题 border：边框
width和height：设置给table，行和列的尺寸，自适应；也可设置给td
align：水平方向上的对齐 left/center/right
valign：垂直方向上的对齐 top/middle/bottom
4、不规则表格
---通过设置td的colspan或者rowspan属性：跨列或者跨行
六、列表
1、有序列表 <ol><li></li></ol>
2、无序列表 <ul><li></li></ul>
七、表单
1、定义一个表单，如果没有form，无法使用submit提交
2、 input type=text 普通文本框；password 密码框；radio 单选框；checkbox 多选框；button 普通按钮；submit 提交按钮；reset 重置按钮；file 文件域
( name 组名、value 选项值、checked 默认选中项。
一组单选框组名必须相同。并且只能定义其中一项默认选中。)
3、select 选择菜单，option 定义菜单项，如果option不定义value，则将option中间的文本字段作为value提交。
默认为单行的下拉菜单。用size属性可定义行数。用multiple定义可多选
4、textarea 文本域 多行文本框 rows 行数 cols 列数。<textarea>初始值</textarea>
5、label文本标签 可以用for属性与某个表单元素绑定。for的值为其他元素的 id 属性的值。
6、form name method提交方式get/post action提交路径
<!--method="get/post" get将信息附加在地址栏传递；post将信息打包发送。
get特点简明一目了然，保密性差，能容纳的字符数有限；post保密性强，适合传输大量的信息；action="login.php"->
7、其它标签：iframe width宽 height高 src文件路径 frameborder 0/1 框架边框
scrolling是否显示滚动条yes/no name为框架命名。可以在链接中用target指向该目标。
写在一对iframe标签中间的内容为替代内容，如果浏览器不支持框架，就会看到这些内容。
八、其他
details 摘要与细节；summary 定义摘要
meter 度量衡，可以显示比例。value 当前值； min 最小值；max 最大值
time 定义一个时间；datetime 定义具体时间
mark 高亮显示内容
CSS
一、css概述
1、html 控制样式的弊端
1、相同的样式效果，通过不同的属性或标记来完成的<body text=""></body>
2、程序 可维护性、可重用性 不高
2、通过 CSS 解决上述问题
可以让 各个元素 都使用统一的 样式声明 从而提高程序的可重用性和可为维护性
3、什么是CSS
CSS ：Cascading Style Sheet ,层叠样式表、级联样式表，简称为 样式表
作用：为html元素去定义样式。
1) 能够实现 内容与表现相分离
2) 提高代码的可重用性和可维护性
重用性：可以让多个元素 使用相同的样式
维护性：一个元素的样式改变，其他元素也可以跟着变
4、HTML 与 CSS 之间的关系：一个完整的页面 = HTML + CSS
1）HTML 主要负责显示内容（搭建网页的结构）
2）CSS 主要负责构建HTML样式的定义
HTML属性与CSS样式的使用原则：
1）W3C建议尽量使用CSS样式 取代 HTML 属性
2）HTML中的专有属性，无法通过css取代的只能选择html属性(rowspan、colspan)
5、CSS样式表的使用
1、使用方式：
1）内联方式，也称为 ：内联样式 、行内样式。将样式属性定义在HTML元素中。
特点：只能控制某一个元素的显示效果
语法:<标记 style="样式属性:值;样式属性:值;"></标记>
常用属性： color : 文本颜色，取值 表示颜色的英文单词 style="color:red;"
2）内部样式表：将“样式规则”放在<style>的元素内。
特点：将所有的样式内容放在<head></head>中的<style></style>元素内。
<style></style>中添加若干"样式规则"。
样式规则：对一套样式的完整描述,主要包含两部分
1、规范页面中哪些标记允许使用定义好的样式 - 选择器
2、样式内容 - 若干样式声明
样式规则语法：
选择器{
//样式声明
样式属性:值;
样式属性:值;
...........
}
选择器：通过 标记 的名称来表示选择器，相当于定义该标记的样式
div{
color:red;
font-size:48px;
}
特点：
1、能够实现 内容与表现相分离
2、提升了 样式的可重用性和可维护性
3、只能在一个页面中做通用样式定义
3）外部样式表
将样式规则 保存在独立的 css样式文件中，由页面对样式文件进行引用
特点：
1、实现 内容与表现相分离
2、将可重用性 和 可维护性 体现的 最完美(所有的页面都能用)
3、可以在整个网站乃至于互联网中做通用的样式定义
步骤：
1、创建一个样式表文件，纯文本文件，以.css结尾。该文件中只能包含样式规则。
2、在html页面中对样式表文件进行引用在 <head></head>中增加以下代码：
<link rel="stylesheet" type="text/css" href="链接的css文件地址" />
2、CSS语法规范
1、基本语法： 样式声明：属性:值; 样式规则：选择器 和 样式声明
2、CSS样式表特征
1、继承性：大部分的CSS样式属性，是可以被继承的。
继承：子级不用单独定义样式，可以直接使用父级的东西
2、层叠性：为一个元素定义多个样式的时候，样式不冲突时，多个样式表中的样式可以层叠(合并)为一个
3、优先级：样式冲突时，按照不同样式规则的优先级来应用样式
优先级：
1、浏览器缺省（默认）设置 (User Agent Style) ,级别最低；
2、内部样式表 或 外部样式表,级别处于中间位置；就近原则（谁靠下，以谁为主）。
3、内联样式 ,级别 最高
(提示错误：
Unknown property name : 样式属性名称写错了；Invalid property value : 样式属性值写错了)
4、!important规则------------> 谨慎使用！
可以通过 !important 显示调整样式优先级，!important优先级最高
语法： 样式属性:属性值 !important;
3、选择器 作用：规范了页面中的哪些元素能够使用定义好的样式。
1.通用选择器 作用：匹配页面中的任何一个元素 语法：*{样式规则}
2.元素选择器 作用:匹配页面中的指定的元素； 语法:元素名称作为选择器 body、p等。
3.类选择器
作用：定义公共的样式，由任意一个标签进行引用
语法：.className{ : ; } 例：.red_back{} .red-back{}
引用：在标签中，通过class属性 对类选择器名称进行引用
注意：在一个元素中，可以同时对多个类选择器进行引用。多个类选择器之间用空格隔开。
4.类选择器-分类选择器
作用：将类选择器和元素选择器结合起来使用，从而实现对某种元素不同样式的细分控制
语法：元素选择器.className { } 例：div.red_back{}
5.id选择器
作用：通过元素的id值，来声明定义元素的相关样式属性 语法：#idValue{}
6.群组选择器
作用：选择器声明，是以 , 隔开的选择器列表
语法： selector1,selector2,selector3,selector4...{ } 例：div,p,.redback{color:red;}
7.后代、子代选择器
只存在一级的父子关系：可以称之为子代或者后代
多于一级的嵌套关系：只能称之为后代 后代语法：selector1 selector2{}
例：div span{} /*匹配出所有div元素中的span元素*/ #content .redBack{}
子代作用：只能匹配出父子关系的子级元素
目的：不希望选择任意的后代元素，而是希望缩小范围，只选择某个具体的子元素时使用。 语法：selector1>selector2{}
8.伪类选择器
作用：匹配元素的不同状态 语法： :作为开始的
分类：
1）链接伪类 作用：只匹配超链接的状态
:link：适用于尚未访问的超链接 :visited：适用于访问过后的超链接
2）动态伪类
:hover：适用于鼠标悬停在html元素上的状态
:active：适用于html元素被激活时
:focus：适用于html元素获取焦点时的状态
3）目标伪类
4）元素状态伪类
5）结构伪类
6）否定伪类
4、单位
颜色单位： #rrggbb : 每一位取值 0-9 A-F 例：#012345 :
#rgb : 缩写 #336699 --》 #369 #aabbcc --> #abc #aabcdd --> 无缩写
5、尺寸属性
尺寸：主要设置的是元素的宽度和高度；取值单位：像素 或 百分比
1pt=1/72英；1in=2.45cm。
宽度属性：
Width--->max-width:限定元素宽度最大值；min-width:限定元素宽度最小值
注意：width 与 max-width、min-width 相冲突
高度属性：
Height---> min-height；max-height
注意：
1、页面中，行内元素 绝对不能修改宽和高
2、块级元素、html元素本身就具备width和height属性的元素 允许修改宽和高
块级元素:div,p,h1,h2, ... ；本身具备width 和 height : table,input,img ...
6、溢出处理
使用尺寸属性控制元素的大小时，如果内容所需控件大小元素本身的控件，会导致内容溢出
属性: overflow -----> overflow-x : 横向溢出处理； overflow-y : 纵向溢出处理
作用：当内容溢出元素时，如何处理
取值： 1)visible : 默认值，溢出可见；2)hidden : 溢出隐藏；3)scroll :
滚动，在元素内部显示滚动条，内容溢出，滚动条可用，内容不溢出，滚动条不可用；4) auto :
自动，内容溢出则显示滚动条，内容不溢出，不显示滚动条
7、边框属性
1、简写方式： border:width style color; (四个方向)
width:边框宽度；style:边框样式,实线(solid),虚线(dotted),虚线(dashed)；color:边框颜色,还可以取 transparent
2、单边定义： border-left/right/top/bottom :width style color;
border-方向:width style color;
3、单属性定义： border-color : color; 四个边框的颜色
4、单边框 单属性定义： border-方向-属性:值;
方向：top / bottom / left /right； 属性：color / width / style
5、边框的组成：
边框是由四个三角形(元素宽度和高度都为0) 或 梯形组成(元素宽度和高度不为0)
6、边框倒角：边框倒圆角，将直角转换成圆角的操作
属性:border-radius；取值：具体数值 或 百分比数字
取值数量：
1个值 ：表示的是四个角圆角半径
4个值 ：从左上角开始 ， 顺时针方向的 四个角的圆角半径
单独定义:
border-top-left-radius:左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角
7、边框阴影： 属性：box-shadow ； 取值：多个属性值所组成的列表
h-shadow：阴影的水平位置（水平位置偏移量），取值为正 向右偏移；取值为负 向左偏移。
v-shadow：阴影的垂直位置（垂直位置偏移量），取值为正 向下偏移；取值为负 向上偏移。
了解：1)blur：可选属性，阴影的模糊距离；2)spfread：可选，阴影尺寸
3)color：可选，阴影颜色；4)insert：可选，将外部阴影改为内部阴影
例：box-shadow:h-shadow v-shadow blir color;0px 0px 1px red;
8、轮廓： 属性：outline 取值：width style color
单属性：outline-width、 outline-style、 outline-color； 常用模式：outline:0px;
*******************************************************************************
二、框模型
1、框：框就是个容器，目的为了承装其他的东西；
html中所有的元素都可以称之为元素框
2、框模型(Box Model) : 也称为盒子模型、方框属性。
定义了元素框 处理元素内容尺寸、内边距、边框 和 外边距的方式
外边距：cellspacing ； 内边距：cellpadding
注意：当框模型(内边距，外边距，边框)介入到元素后，元素的内容区域尺寸是不变的，但是会增加元素框的总尺寸
元素实际总宽度 = 左右外边距 + 左右边框 + 左右内边距 + width;
元素实际总高度 = 上下外边距 + 上下边框 + 上下内边距 + height;
3、外边距
1、什么是外边距：
围绕在元素边框周围的一些空白区域，这些区域是透明的，默认情况下，是不允许被其他元素所占据的。也可以表示为当前元素与其他元素之间的距离
2、语法：margin:value; (四个方向的外边距)
单边设置：
margin-top : 上外边距 ； margin-right:右外边距
margin-bottom:下外边距 ； margin-left:左外边距
3、取值：
单位: 1) px：具体像素值 margin:10px；2)%：父容器的宽和高的占比；3)auto : 自动，只对左右外边距有效,设置元素水平居中对齐；4)负值 : 目的 是为了向着相反的方向移动元素
margin-left:取负值，为了向左移动元素；margin-top :取负值，为了向上移动元素
取值为 auto ：由浏览器自己计算外边距。左右方向取值为 auto 时，会呈现出元素水平居中对齐显示方式（仅仅局限于块级元素，而且必须要设置宽度属性）
取值数量：
margin:value; 四个方向外边距
margin:v1 v2(auto); 上下 左右
margin:v1 v2 v3; 上 左右 下
margin:v1 v2 v3 v4; 上 右 下 左(从上开始 顺时针方向)
4、默认的外边距
html元素里，有些元素默认具备外边距的。
例： h1~h6；p；ul；body； dl、dd
如果程序中，不想使用默认的外边距，可以通过css重写的方式设置为 0
5、外边距问题
1、(垂直)外边距合并：
当两个垂直外边距相遇时，它们将形成一个外边距，称为外边距合并；
合并后的外边距的高度值为两个元素中外边距较大者的值。
2、外边距溢出：
父子元素中，如果设置 子元素 的上下外边距时，默认情况会被作用到父元素的外边距上。
解决方式：
1、可以为父元素增加边框，主要是上边框，解决子元素的上边距溢出问题。
2、增加父元素的 padding-top、最好将父元素的高度相应的减少一部分数值。
4、内边距
1、什么是内边距：
内容区域与边框之间的空间距离， 注意：内边距会将元素边框撑大。
2、属性：padding : value;
单方向： padding-top: padding-bottom: padding-right: padding-left:
3、取值：
单位： px 、%
数量：
padding:value ; 上下左右
padding:v1 v2 ; 上下 左右
padding:v1 v2 v3;上 左右 下
padding:v1 v2 v3 v4;上 右 下 左
特殊使用场合：想扩大行内元素的宽度和高度的话，可以通过内边距来实现。
三、背景
1、背景颜色
属性：background-color
取值：可设置为合法的颜色单位值 或 transparent
注意：默认情况下，背景(颜色、图像)是从边框位置处就开始填充
2、背景图片
属性：background-image
取值：url("图像URL")
background-image:url("xxxx/xxx.jpg");
background-image:url(‘xxxx/xxx.jpg‘);
background-image:url(xxxx/xxx.jpg);
3、背景平铺（重复）
属性：background-repeat
取值：repeat : 即水平方向又垂直方向平铺(默认值)
no-repeat : 没有平铺
repeat-x : 仅水平方向平铺
repeat-y : 仅垂直方向平铺
4、背景图片尺寸
属性：background-size
取值：value1 value2 : 宽度 高度
value1% value2% : 当前元素的宽和高的占比
cover : 覆盖，将背景图像扩展至足够大，直到背景图已经覆盖了元素的所有区域。有可能导致背景图不能完整的显示在元素中
contain: 包含，将背景图扩大，直到背景图已经碰都某一个边缘位置（右、下）,背景图能够完完整整的显示在元素中，不一定能覆盖到所有的区域
5、背景图片固定
默认情况，背景图片会随着滚动条而发生滚动，可以通过背景图片固定的方式解决此问题，让背景图保持在网页的可视化窗口的某个固定为止处不随着滚动条发生位置变化。
注意：尽量将背景图片加给body元素 属性：background-attachment
取值：scroll ：背景会随滚动条发生滚动（默认值）；
fixed : 固定，背景不会随着内容而发生滚动。
6、背景定位
改变 背景图片 在元素中的位置
属性：background-position
取值：x y : x水平偏移位置,值为正 向右移动，值为负，向左移动
y垂直偏移位置,值为正 向下移动，值为负，向上移动
x% y% : 左上角 : 0% 0%； 右下角 : 100% 100%； 居中显示 : 50% 50%
关键字： x : left,center,right ； y : top,center,bottom
CSS Sprite : 将多个背景图合并到一张里面去，根据需求情况，通过 背景定位 对背景图片进行偏移，从而找到要显示的图像
目的：减少对服务器的请求次数
操作步骤：
1.根据想要看的图像，在页面创建一个与它一模一样大小的元素
2.通过background-position对大图进行位置的移动，正好将想要看到的小图放到创建好的元素中
7、背景属性
将以上几个属性全部综合到一起,通过一个属性描述所有的值
属性:background
取值：color url() repeat attachment position;
常用值：background:url() repeat position;
常用方式：background:url(Images/user.png) no-repeat -120px -240px;
四、渐变
1、渐变语法：
渐变：指的是两种或多种颜色之间的平滑过渡
属性：background-image
取值：
linear-gradient() -- 线性渐变 repeating-linear-gradient() -- 重复线性渐变
radial-gradient() -- 径向渐变 repeating-radial-gradient() -- 重复径向渐变
例：background-image:linear-gradient(); -- 显示线性渐变颜色
*2、线性渐变
属性：background-image
取值:linear-gradient(angle,color-point1,color-point2,...)
angle:指定渐变的方向(角度)
to top : 向上 --> 0deg to right : 向右 --> 90deg
to bottom : 向下 --> 180deg to left : 向左 --> 270deg
color-point :表示颜色的数值 和 位置 例：red 0% 、red 10px；
background-image:linear-gradient(to top,red 0%,green 50%,blue 100%);
3、径向渐变
属性：background-image
取值: radial-gradient();
radial-gradient([size at position],color-point1,color-point2,....);
size at postion :可以省略不写
size : 标识的圆的半径 以 px 为单位
position : 圆心的位置：top,left,right,bottom,center、具体数值、百分比
4、重复渐变
repeating-linear-gradient(angle,color-point); repeating-radial-gradient();
color-point: 位置取具体的数值或者不到100%的数字
5、浏览器兼容性
对于不支持的浏览器版本，需要添加不同的浏览器前缀来解决渐变的问题
Firefox ： -moz- ； chrome和Safari ： -webkit- ； opera ： -o-
例：#d1{background-image:-moz-linear-gradient(to top,red 0%,green 50%,blue 100%);}
五、文本格式化
1、字体属性
1、指定字体(非重要)
font-family:value1,value2,value3....; 例：font-family:"微软雅黑","宋体","Arial";
2、字体大小(重要)
font-size: 16px; 取值：px或pt作为单位的值
3、字体加粗(非重要)
相当于 : <b></b> font-weight:normal/bold/无单位数字(400-900);
无单位数字：400 - normal 900 - bold
4、字体样式(非重要)
相当于 ：<i></i> 功能：斜体 显示文字 font-style : normal / italic;
5、小型大写字母(非重要) font-variant:normal/small-caps;
6、字体属性 font:font-style font-variant font-weight font-size font-family;
常用设置方式：
font:12px "微软雅黑","Arial"; font:12px/24px(行高) "microsoft yahei";
2、文本属性
1、文本颜色 (重要) color:value;
2、文本水平排列方式(重要) 相当于：html 属性中的 align
text-align:left / right / center/justify（两边对齐）
功能：能够控制当前元素内所有的文本、行内元素、行内块、水平对齐方式。
3、文字线条修饰 属性：text-decoration
取值：none 无线条(重要)、underline 下划线(重要)、overline 上划线(非重点)
line-through 删除线(非重点) --> <s></s>
4、行高(重要)：一行文本所占据的高度是多少
如果行高大于文本大小的话，那么这行文字将呈现出垂直居中的显示方式
属性：line-height 取值：以 px 为单位的值
5、首行文本缩进(非重要) 属性：text-indent 取值：以 px 为单位的值
6、文本阴影(非重要) text-shadow:h-shadow v-shadow blur color;
h-shadow:水平投射距离、v-shadow:垂直投射距离、blur:模糊距离、color:颜色
六、表格属性
1、表格常用属性(重点)：1、内边距 : padding；2、尺寸属性 ：width,height；3、文本属性 : font-* ,
text-*；4、背景属性 : background-*；5、边框 : border /*只给表格设置边框，单元格没有*/ table{
border:1px solid red; }； /*单元格边框，与表格无关*/ td {border:1px solid red;
}；6、vertical-align(垂直对齐方式 td的)，功能：控制单元格内容的垂直对齐方式； 取值：top / middle /
bottom
2、表格特有属性
注意：该组属性只能在 table 中使用
1、边框合并(重要) 属性：border-collapse 功能：合并两个相邻的边框
取值：separate : 默认值，分离边框 collapse : 边框合并
2、边框边距(非重点) 相当于td的外边距， 两个边框间的上下和左右的距离。
注意：只有在 border-collapse:separate;即边框分离时才有效；该属性加在table中。
属性：border-spacing
取值： 取一个值：每两个单元格之间的垂直和水平间距是一致的。
取两个值：第一个值，指定的是水平间距，第二个值，指定的是垂直间距。两个值用 空格隔开
3、显示规则(非重点)：如何布局、显示、解析一个table，定义加载表格的算法。
属性：table-layout
取值： auto : 列宽度由单元格的内容来决定，默认值。自动表格布局
fixed: 列宽度由设置的值（即表格宽和列宽一起）来决定。固定表格布局
自动表格布局：单元格的大小会适应内容的大小；加载时较慢；适用于不确定每列大小时使用
固定表格布局：，列宽度取决于设置好的相关属性值；与内容无关，会加速显示表格，每次加载表格时不用计算。
比较：1）固定表格布局虽然速度较快，但是不够灵活，不能体现出表格的特点。
2）自动表格布局，虽然算法较慢，但是能反映传统表格的特点。
七、浮动定位
1、定位：元素在网页中该出现的位置，元素框对于其正常位置应该出现的位置。
2、定位属性：更改当前元素的定位方式。
属性：position 取值：static / relative / absolute / fixed
3、偏移属性 top ：+- bottom ：+- left ：+- right ：+-
top和bottom同时出现的话 以top为主；left和right同时出现的话以left为主。
该组属性能够帮助我们完成元素的位置移动
4、堆叠顺序 属性：z-index 取值：无单位的数字
5、分类：
1、普通流定位。流：排列元素的一种方式；
又称为 文档流定位 ，是页面默认排列元素的一种方式。
页面中的块级元素：元素是从上到下的方式排列（每个元素独占一行）
页面中的行内元素：元素是从左到右的方式排列（可以通过左右外边距调整位置或距离，上下外边距不行）
弊端：块级元素无法在一行内显示多个，布局不好做。
*2、浮动定位 解决问题：让多个块级元素能够在一行内显示
1、什么是浮动定位
1)将元素排除在文档流之外，即元素脱离文档流。不受默认排列方式(从上到下或从左到右)的控制
2)元素将不再占用页面的空间，有可能会压住其他的元素
3)元素会停靠在包含框的左边或右边，或者停靠在已经浮动的元素的左边或右边。
4)元素无论怎么浮动，最终还是在包含框之内
2、浮动属性（没有继承性） 属性：float 取值：none / left / right;
注意：
1、块级元素浮动后 ，宽度会变成自适应
2、行内元素 浮动起来后，除具备以上特点外，它将变成块级元素
3、浮动元素的外边缘不会超过其父元素的边缘
4、已经浮动的元素不会相互重叠
5、浮动元素只能向佐或向右，不能上下浮动
6、当包含框的宽度不能承装下所有的浮动元素时，那么最后一个浮动元素会自动换行。
3、清除浮动 属性：clear 取值：left / right / both / none
功能：清除当前元素的左边(上边) 或 右边 已浮动元素对它所带来的影响
4、float 与 overflow
浮动元素对父层元素所带来的影响
如果一个元素中，包含了浮动元素的话，那么该元素得到的高度会被浮动元素所影响，如果该元素中都是浮动元素，那么该元素高度为0。
行内元素浮动的话，将会变成块级元素，即允许设置宽和高。
原因：浮动元素 会对 父元素的高度带来影响，父元素的高度，最终以没有浮动元素的高度为准。
解决方案：
1、手动设置元素的高度。 弊端：自适应高度时无法使用
2、通过 overflow 属性改变：
overflow:hidden;放在包含浮动元素的父元素中，它会撑起当前元素的高度，变得自适应。
弊端：（能够隐藏超出范围的元素）如果父层容器中包含允许溢出的元素的话，则不能使用。
3、在父元素内最后位置处，追加一个（子元素 div）空的块级元素，增加clear:both;属性即可。
3、相对定位：元素框会相对于它原来的位置偏移某个距离。
要参考元素本身的位置然后去实现新的位置移动。
1、属性和值 position:relative; 配合偏移属性一起使用改变当前元素的位置
通过 top / left / bottom / right 属性值实现位置的微调
2、注意： 1、相对定位不会改变元素的形状；2、元素原本所占的控件仍然会保留
3、使用场合
1、元素本身要进行位置的微调时，优先选择相对定位
2、配合绝对定位一起使用(弹出菜单)
3、要实现堆叠顺序的调整
4、绝对定位
1、绝对定位的元素会脱离文档流，不占据页面空间，即允许压住页面的其他的元素。
2、绝对定位的初始化位置：
1)相对于最近的已定位的祖先元素 来实现位置的初始化；2)如果元素没有已定位的祖先元素，那么就相对于最初的包含块body实现位置的初始化
已定位：position属性为relative/absolute/fixed当中的任何一种。
3、属性和值 position:absolute; 通过top / left /bottom / right实现位置的初始化定位。
4、使用场合：1、想实现元素堆叠的效果时使用(一个元素压住另外一个元素)；2、弹出菜单；
5、堆叠顺序（重点）：控制元素的显示顺序。已经定位的元素（尤其是绝对定位）是允许出现堆叠效果的。
默认的堆叠顺序：1、按元素出现的顺序，后来者居上(同级别)
2、子元素永远都会压在父元素的上面(父子级,不可变)
修改堆叠顺序: 属性：z-index 取值：无单位的数字，数字大者靠上
注意：无法修改父子级元素的堆叠顺序。
5、固定定位
1、什么是固定定位：将元素固定在页面的某个位置处不动，会将元素脱离文档流，不占页面空间。
2、属性 和 值 position:fixed; 通过 left / bottom / right / top 实现位置调整
6、静态定位(了解) position:static; 默认定位方式。
八、显示
1.显示方式（行内元素、块级元素、行内块。。）
1.什么是显示方式，即元素默认的显示方式
块级（block）：div、p、h1-h6、dl...
行内（inline）：span、a、s、b、s、i、u、sub、sup
行内块（inline-block）：img、input...
表格（table）：table
功能：可以通过 display 属性修改元素框的默认显示方式
属性：display
取值：none : 让生成的元素没有框，让元素脱离文档流，在页面上不显示元素(隐藏)，并且不占据页面空间，（隐藏元素，并且不占据页面空间）。
block : 让元素表现的像块级元素一样
使用场合：1.将行内元素 改变成块级元素，修改宽和高。2.将块级元素隐藏后，再显示出来
inline : 让元素表现的像行内元素一样
使用场合：将行内元素隐藏后，再显示出来。注意：不要将块级元素改成行内元素。
inline-block : 行内块。按行内元素显示，具备块级元素的特点。本身是行内元素：一行内能够显示多个。具备块级元素特点：允许改宽和高。
使用场合：1.将行内元素更改为行内块，以便修改宽和高
table : 让元素 显示的和 table 一样
总结：display 常用方式：1、隐藏元素以及显示元素，可以通过 display:none的方式隐藏，如果需要显示的话，按照自己默认的方式显示出来即可。比如：div : display:block;
2、如果程序中，想修改行内元素的尺寸时使用：float:left / right; display:block / inline-block;
2、显示效果
1、可见性(非重点) 属性：visibility
特点：元素可以隐藏，但是空间会保留，不允许被其他元素占据
取值： visible : 默认值，元素可见的
hidden : 元素不可见，依然占据页面空间
collapse : 用在表格元素上，删除一行或一列时，不影响表格整体布局
2、透明度(非重点) 属性：opacity
取值：0.0 - 1.0之间的小数(能取0{完全透明} 也可以取1)；值越小，越看不清。
3、垂直对齐方式 属性：vertical-align
使用场合： 1、在td中使用 ：设置内容的垂直对齐方式
2、在 img中使用 : 控制图像两端的文本相对于图像的垂直对齐方式
取值： top:顶部 middle:居中 bottom:底部
baseline : 默认值，基线对齐，默认会将文本放在元素的基线上
注意：通过修改图像的vertical-align 为非 baseline的值，取消默认底部的3px空白距离（不同浏览器底部默认空白距离不同）。
3、光标(非重点) 属性：cursor
取值：default ：默认值 <- ； pointer : 小手(重点) ；crosshair : +
text : I ； wait : 等待 ； help : ？帮助
九、列表
功能：灵活控制或修改列表项的显示标识
1、列表项标志（list-style-type）：修改列表项前面的标识 。 属性：list-style-type
取值：none ：无标记（重点）；disc : 实心圆；circle : 空心圆；square :实心方块
lower-roman：小写罗马 ；decimal : 数字； ... ...
2、列表项图像 属性：list-style-image 取值：url(图像路径);
功能：使用自定义图像，作为列表项的显示标识
3、列表项位置 属性:list-style-position
取值：outside：列表项标识位于文本之外，默认值； inside：列表项标识更改在文本范围之内
4、列表属性 属性：list-style 取值：type url() position;
功能：将以上三个属性值综合到一起。常用写法：list-style:none; (重点)。
原文地址：https://www.cnblogs.com/lcosima/p/8644310.html