定位一共有4个方向，left,right,top,bottom;
格式为：先写定位方式，后写方向。

position:absolute;
top:20px;
left:30px;

静态定位

语法：position:static;
默认值：文档流（元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行）。这是默认的定位方式。

绝对定位

语法：position:absolute;
特点：

• 元素使用绝对定位之后不占据原来的位置（脱标）。
• 元素使用绝对定位，位置是从浏览器出发。
• 嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发，如果父盒子使用了定位，子盒子的位置就从父盒子位置出发。
• 给行内元素使用绝对定位之后，转换为行内块。（不推荐使用此方法转行内块）

相对定位

语法:position: relative;
特点：

• 使用相对定位，位置从自身所在的位置出发。
• 元素一走后，还会占据原来的位置，不会有其他元素填补。
• 父元素相对定位，子元素绝对定位，子元素就会从父元素位置开始计算。（建议使用）

• 行内元素使用相对定位不能转行内块

  固定定位

  语法：position:fixed;
  特点：

• 元素使用绝对定位之后不占据原来的位置（脱标）。
• 元素使用固定定位之后，位置从浏览器出发。
• 给行内元素使用固定定位之后，转换为行内块。（不推荐使用此方法转行内块）

附录：定位的盒子垂直居中

• margin:0 auto; 只能让标准流的盒子居中对齐。
• 定位的盒子居中：先水平移动父元素盒子的一半50%，在向反方向移动子盒子的一半(margin-left:负值。)

注意：

• left比right，权重高。有left又有right的时候，执行left的值。
• top比bottom，权重高。有top又有bottom的时候，执行top的值。
• 定位中，两个定位（static和relative）不能将行内元素转化为行内块,另外两个可以。

由于各浏览器的渲染内核都不一样，对相同的标签可能会有不同的样式，为了解决这种问题带来的浏览器的不兼容，在网页开发之前，一般都会进行初始化，下面几个是常用的初始化代码，直接饮用也行。

雅虎CSS初始化

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#555; text-decoration:none; }
a:hover { text-decoration:underline; }
img { border:none; }
ol,ul,li { list-style:none; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
table { border-collapse:collapse; }
html {overflow-y: scroll;}

.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }

腾讯QQ官网CSS初始化

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}

淘宝CSS初始化

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

新浪官网CSS初始化

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

网易官网CSS初始化

html {overflow-y:scroll;}
body {margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}

浮动布局

语法：
关键字：float。值：left（左浮动）;right（右浮动）。

特点：

• 元素浮动之后不占据原来的位置（脱标），下面的元素会在浮动元素的下面。
• 浮动的盒子在一行上显示。
• 行内元素浮动之后转换为行内块元素。（转行内块元素不推荐使用此方法，转行内元素最好使用display: inline-block;）。
• 浮动通常用于：文本绕图（文字不会位于浮动元素的下面）、制作导航（通常是li的浮动）、网页布局。
• 浮动的盒子一般都给宽度,浮动的盒子千万不要让他超出父盒子，超出父盒子的部分会影响下面盒子中的浮动的子盒子。
• 浮动的盒子比标准流盒子高，但是能够遮挡住标准流盒子，遮挡不住里面的图片和文字。
• 同一个父级元素的子盒子，要么都浮动，要么都不浮动。
• 浮动的盒子相互影响，不管是否在一个盒子中。
• 建议浮动的盒子都给宽高，尽量盒子之间有点距离。
• 浮动的盒子，超出父盒子宽度换行解决办法：再给浮动的盒子一个父盒子，父盒子宽度大于要显示的子盒子总宽度，然后用，overflow:hidden切掉。
• 同级相邻的浮动的盒子顶边对齐。

清除浮动

由于元素浮动之后不占据原来的位置（脱标）的缘故当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误，位于浮动元素的下面，所以引入了清除浮动的概念，清除浮动不是不用浮动，清除浮动产生的不利影响。

• 清除浮动的方法
  清除浮动，其实是清除浮动产生的不利影响。
  关键字：clear 值：left（清除左浮动）；right（清除右浮动）；both（清除相关所有浮动，应用最多）

  • 给父元素设置高度。
  • 额外标签法
    在最后一个浮动元素后添加一个清除浮动的标签。例如：<div style="clear: both;"></div>
  • 给父集元素使用overflow:hidden;或者overflow:auto但是，如果有内容出了盒子，外面的部分将会被隐藏，不能使用这个方法。
  • 伪元素清除浮动
    首先定义一个伪元素清除浮动，然后在父元素中调用。

.clearfix:after{
    display:block;
    clear:both;
    height:0;
    content: "";
    visibility: hidden;
    overflow:hidden;
}
.clearfix{
   zoom:1;
}

或者:双伪元素标签法

.clearfix:before,  .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
     zoom: 1;
}

附录：overflow

• overflow:visible;默认值，超过元素框不会被隐藏，会显示在外面。
• overflow:hidden;超过元素框会被修剪，不会显示在外面。
• overflow:scroll;超过元素框会被修剪，但是浏览器会存在滚动条，用户可以通过滚动条来查看所有内容。
• overflow:scroll;超过元素框会被修剪，如果元素被修剪了，浏览器才会出现滚动条，用户可以通过滚动条来查看所有内容。

新的一年即将开始，小宁在这里祝您新春快乐，新年新气象！ 一路发发发，新年旺旺旺！

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

边框(border)

属性（值）

• border-top-style边框样式；solid 实线；dotted 点线； dashed 虚线。
• border-top-color 边框颜色。
• border-top-width 边框粗细。
  注意：边框属性的连写的特点：没有顺序要求，线型为必写项。
• border-collapse:collapse 边框合并 。<label for="one">账号：<input type="text" id="one"></label>
• border-top|right|bottom|left 上右下左边框。

• a标签的部分尽量用margin。

  内边距

  属性（值）

• padding-top|right|bottom|left 上右下左内边距。

• padding连写案例。

  • padding: 20px; 上右下左内边距都是20px。
  • padding: 20px 30px; 上下20px 左右30px。
  • padding: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40。
  • padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px。

注意：

• padding没有负值。
• 内边距影响盒子的宽度。
• 边框影响盒子的宽度。
• 盒子的宽度=定义的宽度+边框宽度+左右内边距。
• 继承的盒子一般不会被撑大：包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。
• 盒子的撑开与撑破，有高度会被撑破，没有高度会被撑开。

外边距

属性（值）

• margin-top|right|bottom|left 上右下左外边距。

• margin连写案例。

  • margin: 20px; 上右下左内边距都是20px。
  • margin: 20px 30px; 上下20px 左右30px。
  • margin: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40。
  • margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px。

  **注意：

• 垂直方向外边距合并**
  两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。
• 嵌套的盒子外边距塌陷
  解决方法: 1 给父盒子设置边框，2 给父盒子overflow:hidden; （推荐使用）。

注意：

• 行内元素可以定义左右的内外边距，上下会被忽略掉，并且行内块可以定义内外边距。
• 行内块可以定义内外边距。
• 浏览器默认文字大小16px。

盒子稳定性

• 只给宽高的盒子（宽/高度剩余法）最稳定。
• 给padding的盒子其次。
• 给margin的盒子一般。

盒子的隐藏问题

• overflow：hidden;隐藏盒子超出的部分。
• display: none;隐藏盒子，而且不占位置。(用的最多)
• visibility: hidden; 隐藏盒子，而且占位置。
• opacity: 0;隐藏盒子，而且占位置。
  -position/top/left/...-999px 隐藏盒子，而且占位置。
• margin也可以隐藏盒子。

jsp概述及原理

JSP全称是Java Server Pages，中文名叫java服务器页面，它和servle技术一样，都是SUN公司定义的一种用于开发动态web资源的技术。JSP实际上就是Servlet。可以理解为：jsp = html + java

注意：

• servlet：服务器端的小应用程序。主要功能为：获取表单数据、处理业务逻辑、分发转向。
• jsp:适合编写输出动态内容，但不适合编写java逻辑。

jsp的原理：jsp文件翻译称为.java文件；.java文件编译生成.class文件。

jsp的基本语法

JSP的脚本
小脚本 <% java代码 %>
表达式 <%= 表达式 %> 等价于out.print(表达式);
声明
<%!declaration; [ declaration; ]+ ... %> 表示在类中定义全局成员，和静态块。
JSP注释
JSP注释：<%-- 被注释的内容 --%> 特点：网页源代码中不可见。安全，省流量
网页注释： 特点：网页源代码中可见。不安全，费流量

jsp的3个指令

JSP指令（directive）是为JSP引擎而设计的，它们并不直接产生任何可见输出，而只是告诉引擎如何处理JSP页面中的其余部分。

page指令
语法：
<%@ 指令名称 属性1="属性值1" 属性2="属性值2"...%>
或者：
<%@ 指令名称 属性1="属性值1"%>
<%@ 指令名称 属性2="属性值2"%>
如：解决中文乱码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

作用：用于定义JSP页面的各种属性
属性：（基本上使用默认的就行）

• import 和java代码中的import是一样的
  比如：

  <%@ page import="java.util.Date,java.util.List"%>

  JSP会自动导入以下的包：

  import java.lang.*;
  import javax.servlet.*;
  import javax.servlet.http.*;
  import javax.servlet.jsp.*;

• session: 是否会自动创建session对象。默认值是true。
• buffer: JSP中有javax.servlet.jsp.JspWriter输出字符流。设置输出数据的缓存大小，默认是8kb。
• errorPage: 如果页面中有错误，则跳转到指定的资源。
  errorPage="/uri" 如果写“/”则代表当前应用的目录下，绝对路径。如果不写“/”则代表相对路径。
• isErrorPage: 是否创建throwable对象。默认是false。
• contextType: 等同于response.setContextType("text/html;charset=utf-8")。
• pageEncoding: 告诉JSP引擎要翻译的文件使用的编码。
• isELIgnored: 是否支持EL表达式。 默认是false

include指令
静态包含：把其它资源包含到当前页面中。
<%@ include file="..." %>
动态包含：
<jsp:include page="..."></jsp:include>

两者的区别：
翻译的时间段不同
静态包含：在翻译时就把两个文件合并
动态包含：不会合并文件，当代码执行到include时，才包含另一个文件的内容。

原则：能用静态包含就不用动态包含。

taglib指令
作用：在JSP页面中导入JSTL标签库。替换jsp中的java代码片段。
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

jsp的6个动作

• jsp:include 在页面被请求的时候引入一个文件。
• jsp:useBean 寻找或者实例化一个JavaBean。
• jsp:setProperty 设置JavaBean的属性。
• jsp:getProperty 输出某个JavaBean的属性。
• jsp:forward 把请求转到一个新的页面。
• jsp:plugin 根据浏览器类型为Java插件生成OBJECT或EMBED标记。
• jsp:element 定义动态XML元素
• jsp:attribute 设置动态定义的XML元素属性。
• jsp:body 设置动态定义的XML元素内容。
• jsp:text 在JSP页面和文档中使用写入文本的模板。

JSP 隐式对象

JSP隐式对象是JSP容器为每个页面提供的Java对象，开发者可以直接使用它们而不用显式声明。JSP隐式对象也被称为预定义变量。及：指在JSP的<%=%> 和<% %>中可以直接使用的对象。

• request HttpServletRequest类的实例。
• response HttpServletResponse类的实例。
• out JspWriter类的实例，用于把结果输出至网页上。
• session HttpSession类的实例。
• application ServletContext类的实例，与应用上下文有关。
• config ServletConfig类的实例。
• pageContext PageContext类的实例，提供对JSP页面所有对象以及命名空间的访问。本身也是一个域对象：它可以操作其它三个域对象（request session application）的数据
• page 类似于Java类中的this关键字。
• Exception Exception类的对象，代表发生错误的JSP页面中对应的异常对象。
  附：四大域对象
• PageContext : pageConext 存放的数据在当前页面有效，开发时使用较少。
• ServletRequest: request 存放的数据在一次请求（转发）内有效。
• HttpSession: session 存放的数据在一次会话中有效。使用的比较多。
• ServletContext: application 存放的数据在整个应用范围内都有效，因为范围太大，应尽量少用。

1.如果两个路由器的ip地址都是192.168.1.1，就会造成IP冲突，只需要将第二个路由器的 LAN口 IP地址修改为其它网段地址 如192.168.2.1。

2.通过你刚刚设置的ip地址登陆后（192.168.2.1），将WAN口连接类型设为 动态IP

然后就可以上网了。

第一步：创建本地仓库
1.点击VCS选择Import into Version Control，然后选择Create Git Repository...。
-->
2.在弹框中选中项目所在的位置，点击OK。

第二步：上传项目到本地仓库
1.点击VCS，选择Git，点击Add。

2.点击VCS，选择Git，点击Commit File。

3.填入本次提交的注释，点击Commit。

4.继续点击Commit。

第三步：上传项目到GitHub
1.点击VCS选择Import into Version Control，点击Share Project on GitHub。

2.在弹框中输入仓库名和描述，点击Share。

上传，第一次使用会弹窗输入GitHub的用户名和密码（已输入过用户名和密码并记住的不会再次弹框输入），上传成功后Idea右下角会给出提示。
第四步：提交修改的代码
1.点击VCS，选择Git，点击Add。

2.点击VCS，选择Git，点击Commit File。

3.填入本次提交的注释，点击Commit。

4.继续点击Commit。

5.点击点击VCS，选择Git，点击pull。

6.点击pull。

上传成功后Idea右下角会给出提示。

配置前提：
1.本地安装好Idea；
2.本地安装好git，并配置好，详情见：git的配置；
3.有github账号
第一步：打开idea,选择File然后选择Setting

第二步：点击Version Control选择Git选择Path to Git executable（git的安装路径，一般可以自动选择）

点击Test，如果出现以下画面，则表示成功。

第三步：点击File选择Setting，再选择Version Control下的GibHub
host默认写github.com（如果自己搭建了，可以填写自己的）
点击Create API Token

第四步：填入在github中注册的用户名和密码，点击Login，自动生成token
点击Test，出现以下画面，则配置成功

会话概念

会话（Session）跟踪是Web程序中常用的技术，用来跟踪用户的整个会话。简单的说就是，用户开一个浏览器，点击多个超链接，访问服务器多个web资源，然后关闭浏览器，整个过程称之为一个会话。常用的会话跟踪技术是Cookie与Session。Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份。

Cookie

概念
Cookie是客户端技术，程序把每个用户的数据以cookie的形式写给用户各自的浏览器。当用户使用浏览器再去访问服务器中的web资源时，就会带着各自的数据去。这样，web资源处理的就是用户各自的数据了。由于cookie是由客户端浏览器保存和携带的，所以称之为客户端技术。
常用方法：

• public Cookie(String name，String value)构造方法，传入cooke名称和cookie的值。
• public int getMaxAge()返回该cookie的最长存活时间，以毫秒计。默认为-1，表明该cookie将persist（存留）直到浏览器关闭。
• public String getName()取得Cookie的名字，名称不能唯一确定一个Cookie，因为路径可能不同。
• public String getPath()返回浏览器返回该cookie到服务器的路径。cookie对于服务器上所有的子路径都是可见的。
• public String getValue()取得Cookie的值。
• public void setMaxAge(int expiry)设置Cookie的最大保存时间，即cookie的有效期，当服务器给浏览器回送一个cookie时。默认是-1（默认存在浏览器的内存中）单位是秒。负数：cookie的数据存在浏览器缓存中；0：删除。路径要保持一致，否则可能删错；正数：缓存（持久化到磁盘上）的时间。
• public void setPath(String uri)设置浏览器返回该cookie的路径；默认值是写Cookie的那个程序的访问路径。不能存中文。
• public void setValue(String newValue)设置Cookie的值。

注意：

• 一个Cookie只能标识一种信息，它至少含有一个标识该信息的名称（NAME）和设置值（VALUE）。
• 一个WEB站点可以给一个WEB浏览器发送多个Cookie，一个WEB浏览器也可以存储多个WEB站点提供的Cookie。
• 浏览器一般只允许存放300个Cookie，每个站点最多存放20个Cookie，每个Cookie的大小限制为4KB。
• 如果创建了一个cookie，并将他发送到浏览器，默认情况下它是一个会话级别的cookie（即存储在浏览器的内存中），用户退出浏览器之后即被删除。若希望浏览器将该cookie存储在磁盘上，则需要使用maxAge，并给出一个以秒为单位的时间。将最大时效设为0则是命令浏览器删除该cookie。
• 删除cookie时，path必须一致，否则不会删除。

Session

概念：
Session是服务器端技术，利用这个技术，服务器在运行时可以为每一个用户的浏览器创建一个其独享的session对象，由于session为用户浏览器独享，所以用户在访问服务器的web资源时，可以把各自的数据放在各自的session中，当用户再去访问服务器中的其它web资源时，其它web资源再从用户各自的session中取出数据为用户服务。

常用方法：

• request.getSession()获取Session对象，如果不存在就直接创建。
• request.getSession(boolean create)获取Session对象，如果不存在就返回false。
• getId()获取SessionId。
• getCreationTime()获取当前session对象的创建时间。
• getLastAccessedTime()获取最后一次访问该session对象的时间。
• setMaxInactiveInterval()设置Session最大时效
• getMaxInactiveInterval() 获取Session最大时效
• invalidate()销毁当前Session对象
• setAttribute()设置session属性
• getAttribute()获得session属性
• removeAttribute()移除session属性
• getAttributeNames()

session实现会话过程数据共享的原理
Session是基于Cookie的、服务器创建每个session的时候，会为每个session分配一个ID号，即 JSESSIONID，服务器会以cookie的方式把session 的id号写给浏览器、所以session是基于cookie的。当浏览器再次访问的时候，会带着session id号的cookie过来 ，这就是session实现共享的原理。服务器写这个cookie的时候，是没有写有效期的，所以当浏览器关闭的时候，cookie也就没了，session也就结束了，即会话过程。

客户端禁用Cookie后的会话数据保存问题
客户端禁用cookie：浏览器永远不会向服务器发送cookie的请求消息头
解决方案：
方案一：在主页上给出提示，提示用户cookie异常。
方案二：URL重写。必须对网站的所有地址都重写。不以cookie的方式把JSESSIONID带给服务器，而是把JSESSIONID以url的方式带到服务器，即：URL重写，URL重写解决了禁用cookie后，Session的共享问题。
response.encodeURL(String url);该方法可以识别浏览器有没有发送cookie请求消息头，没有就重写URL，有就不重写。
前提：request.getSession()必须写。