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

所谓盒子模型就是把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()必须写。

第一步：点击File;选择ProjectStructure...

第二步：选择Facets，选择Web->Web(项目名)；然后点击右边的+;选择web.xml

第三步：选择xml的位置（一般是默认），点击OK完成。

第一步：点击run；选择Edit Configurations

第二步：点击+;找到Tomcat Server；如果是本地的Tomcat就选择Local

第三步：1.填入TomCat的名字；2.选择TomCat的安装位置；3.选择默认浏览器

第四步：选择Deployment，然后点击Fix

第五步：点击右边的铅笔

第六步：点击文件夹，输入文件夹的名称


第七部：点击OK，点击Apply即可。

背景

背景颜色

属性：background-color
值：参考颜色的表示方式

背景图片

属性：background-image
值：url();url里跟的是图片的地址。

背景平铺

属性：background-repeat
值：repeat(默认)表示平铺这个标签；no-repea表示不平铺；repeat-x表示沿x轴平铺；repeat-y表示沿y轴平铺。

背景定位

属性：background-position
值：left表示水平方向的左；right表示水平方向的右；center表示中间；top表示垂直方向的上；bottom表示垂直方向的下。
注意：

• 当方位属性的值只写一个的时候，另外一个值默认居中。
• 如果写2个方位值，顺序没有要求。

• 如果写的是2个具体值的时候，第一个值代表距离左侧的距离，第二个值代表距离顶部的距离。

  固定背景

  属性：background-attachment
  值：

• scroll表示背景在页面的位置不固定，在页面的位置随内容改变而改变。
• fixed表示背景在页面的位置固定，在页面的位置不会随内容改变而改变。相当于在浏览器页面内进行了定位。

附录：背景属性的连写
background:background-color background-image background-repeat background-position background-attachment;
注意：

• background后面只写属性的值；

• background-image的url是必写项，顺序无要求。

  行高

  行高：是基线与基线之间的距离
  行高=文字高度+上下边距
  注意：一行文字行高和父元素高度一致的时候，垂直居中显示。
  行高的计算
  单位除了像素以为，行高都是与文字大小乘积。
  在继承的时候，不带单位时，行高等于行高乘以子元素文字大小，em和%的行高等于和行高乘以父元素文字大小相乘。行高以像素为单位，就是定义的行高值。
  推荐行高使用像素为单位。行高也可以撑开盒子。不设置行高，默认是盒子的高度
  行内元素父元素给了行高之后，子盒子不能使用font，要单独设置字体样式，行内元素尽量不适用font。