Java-WEB考點

、 HTTP協(xié)議請求報文以及響應報文

2、 JAVA Socket編程 Socket以及ServerSocket

3、 WEB服務器概念 Tomcat服務器目錄結(jié)構(gòu)和基本配置server.xml文件

4、什么是Servlet? 怎樣實現(xiàn)一個自定義Servlet?

5、 Servlet基本配置

6、 ServletAPI 包括HttpServlet、HttpServletRequest、HttpServletResponse、ServletConfig、ServletContext

7、 service方法以及doGet和doPost方法

8、 servlet生命周期

9、怎樣獲取網(wǎng)頁提交的參數(shù)?

10、會話HttpSession和Cookie

11、調(diào)用一個已定義好的Servlet有哪些方式

12、表單提交數(shù)據(jù)到Servlet 中文亂碼處理

13、客戶端頁面向服務端servlet傳遞參數(shù)有哪些方式

14、 JSP的運行原理以及基本語法

15、 JSP隱式對象

16、 JavaScript基本語法

17、 JavaScript中的對象

18、 JavaScript與AJAX

19、基于對象的Javascript以及繼承的實現(xiàn)

客戶端/服務器的優(yōu)勢在于：

服務器和客戶端分攤?cè)蝿眨謩e負責部分處理工作；

服務器可以同時為多臺客戶端服務；

多個客戶端可以同時訪問服務器上的相同數(shù)據(jù)。

網(wǎng)絡(luò)ID：網(wǎng)絡(luò)ID標識了計算機或網(wǎng)絡(luò)設(shè)備所在的網(wǎng)段；

主機ID：主機ID標識了特定的主機或網(wǎng)絡(luò)設(shè)備

特殊IP地址:

0.0.0.0和127.0.0.1就是兩個此類地址，第一個稱為缺省路由，后一個是環(huán)回地址；

127.0.0.1被保留用于用戶主機的本地IP話務，它被分配給一個特殊接口，即起到閉合電路作用的環(huán)回接口

端口

端口使用一個16位的數(shù)字來表示，它的范圍是0~65535，1024以下的端口號保留給預定義的服務，如：http使用80端口；

java.net包

java.net包可以實現(xiàn)Java的網(wǎng)絡(luò)功能，

InetAddress：

InetAddress getByName(String host) 在給定主機名的情況下確定主機的 IP 地址

注：host可以是主機名 IP地址或者域名

InetAddress getLocalHost() 返回本地主機的InetAddress對象

InetAddress[] getAllByName(String host) 在給定主機名的情況下，根據(jù)系統(tǒng)上配置的名稱服務返回其 IP 地址所組成的數(shù)組可能一個主機名對應多個服務器（負載均衡）

JAVA Socket編程

socket用于描述IP地址和端口，應用程序通過套接字向網(wǎng)絡(luò)發(fā)出請求或者應答網(wǎng)絡(luò)請求；

套接字會因為網(wǎng)絡(luò)的連接中斷而失效，所以對它的操作都有可能拋出IOException

Socket以及ServerSocket

客戶端流程：向服務端請求，獲取輸入輸出流，進行收發(fā)數(shù)據(jù)，關(guān)閉io流，關(guān)閉套接字

服務器流程：創(chuàng)建套接字，獲得客戶端請求，獲得輸入輸出流，收發(fā)信息，關(guān)閉io流，關(guān)閉套接字

包裝以提高效率（用BufferedReader包裝輸入流，用PrintWriter包裝輸出流）

BufferedReader in = new BufferedReader(new InputStreamReader(socket.getInputStream()));

PrintWriter(OutputStream out, boolean autoFlush) 利用現(xiàn)有的OutputStream構(gòu)造格式打印流，由參數(shù)autoFlush指定是否帶自動刷新緩存的功能

進程與線程的區(qū)別

進程是指系統(tǒng)中正在運行中的應用程序，它擁有自己獨立的內(nèi)存空間；

線程是指進程中一個執(zhí)行流程，一個進程中允許同時啟動多個線程，他們分別執(zhí)行不同的任務；

線程與進程的主要區(qū)別在于：每個進程都需要操作系統(tǒng)為其分配獨立的內(nèi)存地址空間，而同一進程中的所有線程在同一塊地址空間中，這些線程可以共享數(shù)據(jù)，因此線程間的通信比較簡單，消耗的系統(tǒng)開銷也相對較小。

在Java中實現(xiàn)線程有兩種方式，分別是：

擴展java.lang.Thread類

實現(xiàn)java.lang.Runnable接口

線程start()調(diào)用run()方法，重寫的是run()

線程生命周期

線程狀態(tài)：

新建狀態(tài)（New）：使用new關(guān)鍵字創(chuàng)建線程對象，僅僅被分配了內(nèi)存；

就緒狀態(tài)（Ready）：線程對象被創(chuàng)建后，等待它的start方法被調(diào)用，以獲得CPU的使用權(quán)；

運行狀態(tài)（Running）：執(zhí)行run方法，此時的線程的對象正占用CPU；

睡眠狀態(tài)（Sleeping）：調(diào)用sleep方法，線程被暫停，睡眠時間結(jié)束后，線程回到就緒狀態(tài)，睡眠狀態(tài)的線程不占用CPU；

死亡狀態(tài)（Dead）：run方法執(zhí)行完畢后，線程進入死亡狀態(tài)；

阻塞狀態(tài)（Blocked）：線程由于某些事件（如等待鍵盤輸入）放棄CPU，暫停運行，直到線程重新進入就緒狀態(tài)，才有機會轉(zhuǎn)到運行狀態(tài)；

Yield()和join()的不同

HTTP協(xié)議

HTTP （HyperText Transfer Protocol）協(xié)議即超文本傳輸協(xié)議，是基于網(wǎng)絡(luò)應用層的協(xié)議，它建立在TCP/IP協(xié)議的基礎(chǔ)上；

該協(xié)議使用可靠的TCP連接，默認端口是80；

HTTP協(xié)議基于客戶端/服務器模式，客戶端主動發(fā)出HTTP請求，服務器接收HTTP請求，返回HTTP響應結(jié)果。

HTTP協(xié)議是指超文本傳輸協(xié)議，專門用于在Internet上傳輸信息的協(xié)議，目前的版本是1.1；

HTTP是應用層的協(xié)議，它基于請求/響應模式；

HTTP協(xié)議默認使用80端口進行通訊；

HTTP協(xié)議是無狀態(tài)的的協(xié)議。

請求報文實例：

請求報文是指客戶端瀏覽器向網(wǎng)絡(luò)服務器請求頁面時，發(fā)送到服務器端的字符串，必須符合HTTP協(xié)議的格式要求，它可能包含如下組成部分：

GET /index.html HTTP/1.1

Accept: image/gif, image/x-xbitmap, image/jpeg, …, */*

Accept-Language: zh-cn

UA-CPU: x86

Accept-Encoding: gzip, deflate

User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)

Host: www.163.com:80

Connection: Keep-Alive

<空行>

請求報文中的大部分項目是可選的，只有GET和Host部分是必需的；

GET部分的格式是：

GET<空格>/[請求的URL]<空格>HTTP/協(xié)議版本號

如：GET /index.html HTTP/1.1

Host部分的格式是：

Host:<空格>服務器域名或IP地址:端口號

如：Host: www.newer.com.cn:80

換言之，請求報文中只要包含以上兩部分，就可以向網(wǎng)絡(luò)站點服務器請求到頁面。

//拼湊請求報文

String strHttp = "GET / HTTP/1.1\r\n";

strHttp += "Host: " + hostName + ":" + WEB_PORT + "\r\n";

響應報文實例：

響應報文是指網(wǎng)絡(luò)服務器收到來自客戶端的請求后，發(fā)回到客戶端的字符串，它用來告訴客服端：服務器已經(jīng)接受請求，隨后跟隨的是被請求的網(wǎng)頁內(nèi)容；

響應報文可能包含如下組成部分：

HTTP/1.1 200 OK

Date: Sat, 11 Aug 2007 11:58:37 GMT

Server: Apache/1.3.37(Unix)

Accept-Ranges: bytes

Content-Length: 11503

Content-Type: text/html

<空行>

響應報文中也有兩部分是必需的：

HTTP/協(xié)議版本號<空格>狀態(tài)碼<空格>OK

狀態(tài)碼是一個3位整數(shù)，用來表示不同的狀態(tài)，200表示響應成功，

如：HTTP/1.1 200 OK

狀態(tài)碼的具體描述請參閱本課件最后的附表。

Content-Type:<空格>text/html;<空格>charset=字符集編碼

用來描述服務器發(fā)回響應的文件類型以及字符集編碼，text/html說明是文本文件或超文本文件，

如：Content-Type: text/html; charset=GB2312

模擬：

out.println("Http/1.1 200 OK");

out.println("Content-Type:text/html; charset=GB2312");

狀態(tài)碼：

Web應用的優(yōu)勢

相對于傳統(tǒng)的C/S結(jié)構(gòu)（Client客戶端/Server服務器）的應用程序而言，B/S結(jié)構(gòu)的Web應用程序具備以下優(yōu)勢：

集中部署，無需安裝客戶端程序；

集中管理，業(yè)務邏輯在服務端進行維護；

數(shù)據(jù)共享，所有客戶端訪問同一服務器的數(shù)據(jù)；

覆蓋面廣，只要有Internet覆蓋的區(qū)域都可通過瀏覽器享受服務；

更強的平臺無關(guān)性，不必關(guān)心客戶端的軟硬件平臺，只要遵循HTTP協(xié)議，都可獲得支持。

WEB服務器概念

Web服務器可以解析(handles)HTTP協(xié)議。當Web服務器接收到一個HTTP請求(request)，會返回一個HTTP響應(response)，例如送回一個HTML頁面。為了處理一個請求(request)，Web服務器可以響應(response)一個靜態(tài)頁面或圖片，進行頁面跳轉(zhuǎn)(redirect)，或者把動態(tài)響應(dynamic response)的產(chǎn)生委托(delegate)給一些其它的程序例如CGI腳本，JSP(JavaServer Pages)腳本，servlets，ASP(Active Server Pages)腳本，服務器端(server-side)JavaScript，或者一些其它的服務器端(server-side)技術(shù)。無論它們(譯者注：腳本)的目的如何，這些服務器端(server-side)的程序通常產(chǎn)生一個HTML的響應(response)來讓瀏覽器可以瀏覽。

Tomcat服務器目錄結(jié)構(gòu)和基本配置server.xml文件

博客http://blog.csdn.net/mycomein/article/details/45798161

tomcat環(huán)境變量的設(shè)置：

首先添加TOMCAT_HOME的環(huán)境變量，值為d:\Program Files\tomcat7。

添加CATALINA_HOME環(huán)境變量，值為%TOMCAT_HOME%，

添加CATALINA_BASE環(huán)境變量，值為%TOMCAT_HOME%。

Tomcat是以面向?qū)ο蟮姆绞竭\作的；在執(zhí)行期間，它會基于配置文件的設(shè)定動態(tài)地組建其對象結(jié)構(gòu)。

Server.xml文件中的每個主要元素都會創(chuàng)建軟件“對象”、排序及進程管道中設(shè)置的這些元素嵌套方，讓您能執(zhí)行過濾、分組等工作。

什么是Servlet? 怎樣實現(xiàn)一個自定義Servlet?

Servlet是用Java語言編寫的程序，它運行在Web服務器上，用以處理來自客戶端的請求；

它一般會把處理的結(jié)果以為HTML的形式返回，在客戶端形成動態(tài)網(wǎng)頁

Servlet的優(yōu)點

Servlet運行在Web服務器中，可以擴展服務器的功能；

Servlet可以和其他資源交互，從而生成返回給客戶端響應的內(nèi)容，即動態(tài)網(wǎng)頁；

使用Java編寫，所以能夠跨平臺；

Java的所有優(yōu)點都可以在Servlet中體現(xiàn)；

Servlet很安全，因為訪問Servlet的唯一途徑是通過服務器；

只要符合Servlet規(guī)范的Servlet容器都可以運行Servlet。

自定義servlet

一個類繼承HttpServlet，重寫doGet()和doPost()方法，如果需要看到創(chuàng)建和銷毀的過程，可以重寫init()和destroy()方法。

Servlet基本配置

在web.xml中加入servlet的配置：

<servlet-name>LoginServlet</servlet-name>

<servlet-class>com.tkclm.servlet.LoginServlet</servlet-class>

</servlet

<servlet-mapping>

<servlet-name>LoginServlet</servlet-name>

<url-pattern>/login</url-pattern>

</servlet-mapping>將action與class對應起來

ServletAPI 包括HttpServlet、HttpServletRequest、HttpServletResponse、ServletConfig、ServletContext

HttpServletRequest

HttpServletResponse

Javaweb容器的四種作用域

幾乎所有web應用容器都提供了四種類似Map的結(jié)構(gòu)：application session request page，Jsp或者Servlet通過向著這四個對象放入數(shù)據(jù)，從而實現(xiàn)Jsp和Servlet之間數(shù)據(jù)的共享。

application:整個應用對應servlet中ServletContext

session：會話　　　　對應servlet中HttpSession

request：一次請求　　對應servlet中的HttpServletRequest

page：當前頁面

ServletConfig：此接口定義Servlet配置對象，以便于容器將信息傳遞給Servlet。

ServletContext：此接口定義了一組方法，用于Servlet與容器進行通信。

service方法以及doGet和doPost方法、

public void service(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException

service方法是接口中的方法，servlet容器把所有請求發(fā)送到該方法，該方法默認行為是轉(zhuǎn)發(fā)http請求到doXXX方法中，如果你重載了該方法，默認操作被覆蓋，不再進行轉(zhuǎn)發(fā)操作！此方法用來調(diào)度客戶端的請求，API文檔中明確規(guī)定，請勿重寫該方法。

servlet生命周期

怎樣獲取網(wǎng)頁提交的參數(shù)?

①String str=request.getParameter("參數(shù)名稱")方法可以獲得參數(shù)值。

對于復選框類的數(shù)據(jù)，可以通過
②String[] str=request.getParameterValues("參數(shù)名稱")方法獲得。

會話HttpSession和Cookie

Cookie通過在客戶端記錄信息確定用戶身份，Session通過在服務器端記錄信息確定用戶身份。Cookie由服務器產(chǎn)生，給客戶端頒發(fā)的通行證，每一個Cookie只能保存一個變量，

若需要修改（包括刪除）需要服務器重新頒發(fā)Cookie。

會話對象（它主要解決了HTTP協(xié)議是無狀態(tài)的問題。）

所謂的會話是指：在一段時間內(nèi)，某客戶端與服務器之間的一連串的請求與響應；

會話對象可以使用戶訪問一個站點的多個頁面時共享信息；

javax.servlet.http.HttpSession接口用來提供會話對象，如果我們在程序中需要操作會話，就可以使用它；

可以通過HttpServletRequest的getSession方法獲得（或創(chuàng)建）HttpSession對象。

調(diào)用一個已定義好的Servlet有哪些方式

發(fā)送請求（包括表單（） a標簽 js的）重定向（重定向跟轉(zhuǎn)發(fā)）

重定向：response.sendRedirect("success.jsp");
r轉(zhuǎn)發(fā)：equest.getRequestDispatcher("success.jsp").forward(request,response);
1.轉(zhuǎn)發(fā)在服務器端完成的；重定向是在客戶端完成的
2.轉(zhuǎn)發(fā)的速度快；重定向速度慢
3.轉(zhuǎn)發(fā)的是同一次請求；重定向是兩次不同請求
★4.轉(zhuǎn)發(fā)不會執(zhí)行轉(zhuǎn)發(fā)后的代碼；重定向會執(zhí)行重定向之后的代碼
★5.轉(zhuǎn)發(fā)地址欄沒有變化；重定向地址欄有變化
6.轉(zhuǎn)發(fā)必須是在同一臺服務器下完成；重定向可以在不同的服務器下完成

表單提交數(shù)據(jù)到Servlet 中文亂碼處理

可以通過字符集轉(zhuǎn)碼來解決此問題：

對于get

new String(request.getParameter("name").getBytes("ISO-8859-1"), "UTF-8");

對于post

request.setCharacterEncoding("UTF-8");

客戶端頁面向服務端servlet傳遞參數(shù)有哪些方式

表單

a標簽

Ajax即js

<jsp:param>

<%setAttributr();%>

JSP的運行原理以及基本語法

Jsp執(zhí)行過程：

JSP 頁面內(nèi)容

JSP元素包括JSP腳本元素（包括注釋，聲明，表達式，scriptlet），指令元素（page，include，taglib），動作元素。

Jsp聲明：

需求：某系統(tǒng)計算的金額中有兩種形式，一種是帶有兩位小數(shù)的，另一種是整數(shù)，現(xiàn)在要求你在JSP頁面將不帶小數(shù)的金額轉(zhuǎn)換為帶兩位小數(shù)的金額。

String trans(String money){

Int index = money.indexOf(“.”);

If(index == -1){

Money = money +”.00”;

}

Retrun money;

}

<%=trans(money)%>

Jsp注釋<%-- comment--%>>不會顯示在網(wǎng)頁上，html注釋會顯示在網(wǎng)頁中

Jsp指令包括 page，include，taglib

例：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ include file="../jsp/Header.jsp"%>

格式：<%@ 指令名稱屬性1="屬性值1" 屬性2="屬性值2" … 屬性n="屬性值n"%>

l page 指令用于設(shè)置JSP 頁面的屬性，這個屬性將被用于和容器通信

<%@ page %>指令作用于整個JSP頁面，同樣包括靜態(tài)的包含文件。

無論你把<% @ page %>指令放在JSP的文件的哪個地方，它的作用范圍都是整個JSP頁面。

[ language=“java” ]

主要指定JSP容器要用什么語言來編譯JSP的元素

[ import=“{package.class | package.*}, ...” ]

JSP程序可以使用哪些包

[pageEncoding = “UTF-8”]

Jsp程序用什么編碼格式編碼

l include指令

用來在JSP文件被編譯時導入一個指定的文件，語法形式

<%@ include file = ”relativeURLspec” %>

include 指令告訴編譯器在編譯當前的JSP程序時,將由relativeURLspec所指定的外部文件代碼插入到include編譯指令所在的位置,并把它作為當前JSP程序的一部分編譯.如果被嵌入文件在包含它們的主JSP程序被裝載到內(nèi)存之后被修改,那么主JSP程序連同被嵌入的文件將在下一次請求產(chǎn)生時被重新編譯.

這個包含的過程是靜態(tài)的,而包含的文件可以是HTML文件、JSP頁面、文本文件或是一段java程序

l Taglib指令

taglib 指令允許用戶創(chuàng)建自定義標簽 jstl

總結(jié)：

JSP 腳本由三個元素組成，即 JSP 表達式、JSP Scriptlet 和 JSP 指令

JSP 表達式包括在 <%= %>內(nèi)； Scriptlet 包含在<% %>內(nèi)；聲明包含在<%! %>內(nèi)

JSP 指令共有三種類型，即 page、include 和 taglib。JSP 指令包括在 <%@ 和 %>內(nèi)

page 指令用于設(shè)置 JSP 頁面的屬性；include 指令用于在 JSP 頁面嵌入其他文件

JSP隱式對象

l request表示客戶端對網(wǎng)頁的請求

l response實現(xiàn) javax.servlet.http.HttpServletResponse 接口使用 HTTP 協(xié)議將響應發(fā)送給客戶端

l out表示輸出流

l Session

l Application 表示 JSP 頁面所屬的應用程序

l pageContext使用戶可以訪問頁面作用域中定義的所有隱式對象它的作用范圍是在同一頁面

l Page使用 page 對象可以訪問 Servlet 類的所有變量和方法

l config實現(xiàn)javax.servlet.ServletConfig接口，表示Servlet 的配置，其常用方法有：

getInitParameter() 獲取初始化的參數(shù)

getServletContext() 獲取環(huán)境

getServletName() 獲取Servlet名字

l exception對象用于處理 JSP 頁面中的錯誤

JavaScript基本語法

Js特點：腳本語言，基于對象，事件驅(qū)動，平臺無關(guān)

將JavaScript嵌入網(wǎng)頁（三種方式）：

1.使用 <script>…</script> 標簽將語句嵌入文檔

2.將外部JavaScript 源文件鏈接到 html 文檔中

可使多個網(wǎng)頁共享一個腳本文件內(nèi)的代碼

一般在其中定義一系列在多個網(wǎng)頁中都可能要用到的函數(shù)

3.作為網(wǎng)頁元素的事件處理程序,當事件觸發(fā)時自動運行

JavaScript基本語法部分：

語句：一條由計算機完成的、幫助你達到某種目的的指令，JavaScript中的每一行都可認為是一條語句

變量：一個代表某個值的名字就是變量

表達式：A-1+B 就是表達式

函數(shù)：具有一定功能的程序段

數(shù)據(jù)類型：

變量

JS是弱類型的語言,即聲明變量時不需指定數(shù)據(jù)類型,為它賦值時其類型才確定,而且再次為其賦值可改變它的數(shù)據(jù)類型.

變量的命名: 只能包含數(shù)字，字母，下劃線（"_"）,但不能以數(shù)字開頭,不能是保留字(關(guān)鍵字)

JS區(qū)分大小寫

用var聲明變量

函數(shù)的聲明與調(diào)用

方式一、

function 函數(shù)名([參數(shù)[,參數(shù)...]]){
<語句組>
[return <表達式>;]
}

方式二、

函數(shù)名 = function ([參數(shù)[,參數(shù)...]]) {

…

}

方式三、(較不常用)

Function類

函數(shù)名 = new Function ([“參數(shù)名”[,“參數(shù)名”...]]，“函數(shù)體”)

arguments對象

1:arguments是收到的實參副本
　　在詞法分析中, 首先按形參形成AO的屬性,值為undefined
　　當實參傳來時, 再修改AO的相應屬性.
　　2:并把所有收到實參收集起來,放到一個arguments對象里
　　t(a,b,c){},
　　調(diào)用時: t(1,2,3,4,5) 5個參數(shù)
　　此時 , AO屬性只有a,bc,3個屬性, arguments里有1,2,3,4,5, 所有的值

　　對于超出形參個數(shù)之外的實參, 可以通過arguments來獲得
　　3:arguments 的索引從 0, 1,2,....遞增,與實參逐個對應
　　4:arguments.length 屬性代表實參的個數(shù)
　　5:arguments一定不是數(shù)組, 是長的比較像數(shù)組的一個對象,雖然也有l(wèi)ength屬性
　　6:arguments每個函數(shù)都會有,因此,arguemnts只會在內(nèi)部找自身的arguments,
　　無法引用到外層的arguments
　　<script type="text/javascript">
　　// 求圓形面積,矩形面積, 三角形面積
　　function area () {
　　if(arguments.length == 1) {
　　alert(3.14 * arguments[0] * arguments[0]);
　　} else if(arguments.length == 2) {
　　alert(arguments[0] * arguments[1]);
　　} else if(arguments.length == 3) {
　　alert(arguments[0] + arguments[1] + arguments[2]);
　　} else {
　　return null;
　　}
　　}
　　area(10,20,30);
　　
　　</script>

內(nèi)部函數(shù)

function a( d){
var i=0;

Function c(){

//....

}
function b(){

c();
alert(++i);
}
return b;
}
var c = a();
c();

閉包：允許使用內(nèi)部函數(shù)－－即函數(shù)定義和函數(shù)表達式位于另一個函數(shù)的函數(shù)體內(nèi)。而且，這些內(nèi)部函數(shù)可以訪問它們所在的外部函數(shù)中聲明的所有局部變量、參數(shù)和聲明的其他內(nèi)部函數(shù)。

類型轉(zhuǎn)換

強制類型轉(zhuǎn)換,ECMAScript中可用的3種強制類型轉(zhuǎn)換:
Boolean(value);
Number(value);
String(value);

NaN --- 不是一個數(shù)字類型

NaN 值非常特殊，因為它“不是數(shù)字”，所以任何數(shù)跟它都不相等，甚至 NaN 本身也不等于 NaN 。

isNaN(testValue) 計算一個參數(shù)，檢查它是否為數(shù)值。

var iNum = 10;

var snum = iNum.toString(8); 12 進制

var iNum1= parseInt("12.6"); 12

var iNum2= parseInt("hello"); NaN

var iNum3= parseInt("123world");123

var fNum4= parseFloat("25.12.6");25.12

var b1 = Boolean("");false

var b2 = Boolean(undefined);false

var b3 = Boolean(0);false

var iNum = Number("25.12.6");NaN

var bl = isNaN(Number("13f"))true

JavaScript中的對象

本地對象

Object Function Array String Boolean Number Date RegExp Error EvalError RangeError TypeError ReferenceError SyntaxError URIError

內(nèi)置對象

Global Math

宿主對象（自定義對象）

對象是用關(guān)鍵字new后跟要實例化的類的名字創(chuàng)建，例如：

var oObj = new Object();

如果構(gòu)造函數(shù)無參數(shù)，括號可省略

var oObj = new Object;

Object 對象：

可以對object對象增加函數(shù)屬性

判斷對象是否有某個屬性：

alert(oPerson.hasOwnProperty(“age”));

字符串對象 String

屬性：length

數(shù)組對象 Array

創(chuàng)建數(shù)組對象

myArr=new Array(); myArr [10]= “array”; //MyArray數(shù)組的長度為10

myArr=new Array(3); //可存放三個元素

myArr=new Array(“a”,”c”,”d”);//存放了三個元素的數(shù)組

myArr=[“a”,”b”,”c”]; //存放了三個元素的數(shù)組

下標從0開始編號

數(shù)學對象 Math

max(,,,,)方法:返回各個參數(shù)中最大的數(shù)

min(,,,)方法:返回各個參數(shù)中最小的數(shù)

abs()方法:返回絕對值

sin()方法:返回參數(shù)的正弦值,參數(shù)為弧度

sqrt()方法:求輸入?yún)?shù)的平方根

round():四舍五入為整數(shù)

random():返回0-1的隨機小數(shù)

返回 n 到 m之間的隨機整數(shù)：

var iNum = Math.floor(Math.random() * (m-n+1) ＋n)；

floor():取整,返回比參數(shù)小的最大整數(shù)

ceil():返回大于或等于參數(shù)的最近整數(shù)

Grobal對象：對象從不直接使用，并且不能用 new 運算符創(chuàng)建。它在 Scripting 引擎被初始化時創(chuàng)建，并立即使其方法和屬性可用。

日期時間對象Date

日期對象的創(chuàng)建:

mydate=new Date()
創(chuàng)建代表當前日期時間的日期對象

mydate=new Date(“October 1,2005,12:00:00”)
創(chuàng)建代表2005年國慶午時的日期對象

Mydate=new Date(2005, 9, 1)

創(chuàng)建代表2005年10月1日的日期對象

日期對象以系統(tǒng)內(nèi)存中以數(shù)值表示,以1970年1月1日0時0分0秒0毫秒為起始點,每過一毫秒增加一.

get方法組à從日期對象中分解出它所處的年月日,星期幾,時分秒,毫秒值

getYear()à返回年份數(shù)

getMonth()à返回月份數(shù):0-11,應加上1.

getDate()à返回當前Date對象的日期數(shù):1-31

getDay()à返回星期幾:0-6, 0代表星期日

getHours()à返回小時數(shù):0-23

getMinutes()à返回分鐘數(shù):0-59

getSeconds()à返回秒數(shù):0-59

getTime()à返回毫秒數(shù):自起始時刻開始

set方法組à設(shè)置(改變)日期對象的某一部分

setYear()à設(shè)置年份數(shù)

setMonth()à設(shè)置月份數(shù):參數(shù)0-11

setDate()à設(shè)置日期數(shù):參數(shù)1-31

setHours()à設(shè)置小時數(shù):參數(shù)0-23

setMinutes()à設(shè)置分鐘數(shù):參數(shù)0-59

setSeconds()à設(shè)置秒數(shù):參數(shù)0-59

JavaScript與AJAX

1.1XMLHttpRequst對象的概述

　　在使用XMLHttpRequest對象發(fā)送請求和處理響應之前，必須先調(diào)用JavaScript創(chuàng)建一個XMLHttpRequest對象。由于XMLHttpRequest不是一個W3C標準，所以可以采用很多JavaScript方法來創(chuàng)建XMLHttpRequest的實例，IE把XMLHttpRequest實現(xiàn)為一個ActiveX對象，其他瀏覽器則把它實現(xiàn)為一個本地的JavaScript對象，由于存在這些差別，JavaScript必須包含有關(guān)的邏輯，從而使用ActiveX技術(shù)與使用本地的JavaScript對象技術(shù)創(chuàng)建XMLHttpRequst的一個實例。

　　很多人可能還記得從前的那段日子，那時不同瀏覽器上的JavaScript與DOM簡直千差萬別，聽了這段話后有人可能不寒而栗。幸運的是，在這里為了明確該如何創(chuàng)建XMLHttpRequst對象的實例，并不需要那么詳細的編寫代碼來區(qū)別瀏覽器的類型。你要做的只是檢查瀏覽器是否提供對ActiveX對象的支持。如果瀏覽器支持ActiveX對象，就可以使用ActiveX對象來創(chuàng)建XMLHttpRequest對象。否則，就要使用本地的JavaScript對象技術(shù)來創(chuàng)建。下面的代碼展示了編寫跨瀏覽器的JavaScript代碼來創(chuàng)建XMLHttpRequst是多么的簡單。

　　創(chuàng)建XMLHttpRequest的一個實例：

var xmlHttp; function createXMLHttpRequst(){ if(window.ActiveXObject){
　　　　　　xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 　　　　}
　　　　else if(window.XMLHttpRequst){
　　　　　　xmlHttp = new XMLHttpRequest();
　　　　} }

　　可以看到，創(chuàng)建一個XMLHttpRequest相當容易。首先，要創(chuàng)建一個全局作用域變量xmlHttp來保存這個對象的引用。createXMLHttpRequst方法完成創(chuàng)建XMLHttpRequst對象的具體工作。這個方法中只有簡單的分支邏輯（選擇邏輯）來確定如何創(chuàng)建對象。對window.ActiveXObject的調(diào)用會返回一個對象，也可能返回一個null，if語句會把調(diào)用返回的結(jié)果看作是true或false(如果返回對象則為true，返回null則為false)，以此指示瀏覽器是否支持ActiveX控件，相應地得知瀏覽器是不是IE，如果確實是，則通過實例化一個ActiveX的一個新實例來創(chuàng)建XMLHttpRequst對象，并傳入一個串指令指示要創(chuàng)建何種類型的ActiveX對象

。在這個例子中為構(gòu)造函數(shù)提供的字符串是Microsoft。XMLHTTP,這說明你想創(chuàng)建一個XMLHttpRequst的一個實例。

　　如果window.ActiveXObjec調(diào)用失敗（返回null）,JavaScript就會轉(zhuǎn)到else語句的分支確定瀏覽器是否把XMLHttpRequst實現(xiàn)為一個本地的JavaScript對象。如果存在window.XMLHttpRequest，就會創(chuàng)建XMLHttpRequst的一個實例。

　　由于ajax具有動態(tài)類型特性，而且XMLHttpRequst在不同瀏覽器上的實現(xiàn)是兼容的，所以可以用同樣的方式訪問XMLHttpRequst實例的屬性和方法，而不論這個實例創(chuàng)建的方法是什么。這就大大地簡化了開發(fā)過程，而且在JavaScript中也不必編寫特定于瀏覽器的邏輯。

1.2方法和屬性

　　abort()　　停止當前請求；

　　getAllResponseHeaders()　　把HTTP請求的所有響應首部作為鍵值對返回；

　　getResponseHeader("header")　　返回指定首部的串值；

　　open("method","url")　　建立對服務器的調(diào)用。method參數(shù)可以使GET POST 或PUT。url可以使相對url或絕對url，這個方法還包括三個可選的參數(shù)；

　　send(content)　　向服務器發(fā)送請求；

　　setRequstHeader("header","value")　　把指定首部設(shè)置為所提供的值。在設(shè)置任何首部之前必須先調(diào)用open();

　　下面來更詳細地討論這些方法。

　　void open(string method, string url, boolean asynch ,string usename ,string password); 這個方法會建立對服務器的調(diào)用。這是初始化一個請求的純腳本方法。它有兩個必要的參數(shù)三個可選的參數(shù)。要提供調(diào)用的特定方法（get/post/put）,還要提供所調(diào)用資源的url。另外還可以傳遞一個Boolean值，這是這個調(diào)用是異步的還是同步的。默認值為true,表示本質(zhì)上是異步的，如果這個參數(shù)為false，處理就會等待，知道服務器返回響應為止。由于異步調(diào)用是ajax主要優(yōu)勢之一，所以倘若這個參數(shù)設(shè)為false，從某種程度上講與使用XMLHttpRequst對象的初衷不太相符。不過在某些情況下見這個參數(shù)設(shè)為fals也是有用的，比如持久存儲頁面之前可以先驗證用戶的輸入。最后兩個參數(shù)不說自明，允許你指定一個特定的用戶名和密碼。

　　void send(content) 這個方法具體向服務器發(fā)送請求。如果請求聲明為異步的，這個方法就會立即返回，否則它會等到直到接收到響應為止。可選參數(shù)可以是DOM對象的實例、輸入流，或串。傳入這個方法的內(nèi)容會作為一個請求體的一部分發(fā)送。

　　void setRequstHeader(string header,string value);這個方法為為HTTP請求中一個給定的首部設(shè)置值，它有兩個參數(shù)，第一個串表示要設(shè)置的首部，第二個串表示要在首部中放置的值。注意，這個方法必須在調(diào)用opend()之后才能調(diào)用。

　　在所有的這些方法中，最有可能用到的就是opend()和send()。XMLHttpRequest對象還有很多屬性，在設(shè)計Ajax交互時這些屬性非常有用。

　　void abort() 顧名思義，這個方法就是要停止請求。

　　string getAllResponseHeaders() 這個方法的核心功能對開發(fā)人員應該很熟悉，它返回一個串，其中包含HTTP請求的所有響應首部，首部包括Content-Length/Data和URI

　　string getReponseHeader(string header) 這個方法與getAllResponseHeaders()是對應的，不過它有一個參數(shù)表示您希望的指定收不到的值，并把這個值作為串返回。除了這些標準方法，處理XMLHttpRequst可以大量使用這些屬性。

　　onreadystatechange 每個狀態(tài)改變時都會觸發(fā)這個事件處理器，通常會調(diào)用一個javacript函數(shù)；

　　readyState 請求狀態(tài)。有5個可取的值：0：=未初始化，1=正在加載，2=已加載，3=交互中，4=完成；

　　responseText服務器的響應，表示為一個串；

　　responseXML服務器的響應，表示為XML,這個對象可解釋為DOM對象；

　　status服務器HTTP狀態(tài)碼（200對應Ok 404對應 not found ,等）

　　statusText HTTP狀態(tài)碼的相應文本（ok或not found等）

1.3AJAX交互設(shè)計

　　1.一個客戶端事件觸發(fā)一個Ajax事件。從簡單的onchange事件到某個特定的用戶動作，很多這樣的事都可以觸發(fā)Ajax事件。

　　2.創(chuàng)建XMLHttpRequst對象的一個實例。使用open()方法建立調(diào)用，并調(diào)用url及所希望的HTTP方法（通常是post/get）。請求實際上是通過一個send()方法調(diào)用觸發(fā)，代碼如下：

var xmlHttp; function validateEmail(){ 　　var email = document.getElementById("email");
　　var url = "validate?email="+escape(email.value);
　　if(window.ActiveObject){
　　　　xmlHttp = new ActiveObject("Microsoft.XMLHTTP");
　　}
　　else if(window.XMLHttpRequst){
　　　　xmlHttp = new XMLHttpRequst();
　　}
　　xmlHttp.open("get",url);
　　xmlHttp.onreadystatechange = callback;
　　xmlHttp.send(null);
}

　　3.向服務器做出請求。可能調(diào)用servlet、CGI腳本，或者任何服務器端技術(shù)。

　　4.服務器可以做你想做的事情，包括訪問時數(shù)據(jù)庫，甚至訪問另一個系統(tǒng)。

　　5.請求返回到瀏覽器。content-type設(shè)置為text/xml ,XMLHttpRequst的對象只能處理text/html類型的結(jié)果。在另外一些更復雜的示例中

　　6.在這個demo中，XMLHttpRequst對象配置為處理返回結(jié)果時要調(diào)用callback()函數(shù)，這個函數(shù)會檢查XMLHttpRequst對象的readyState屬性，然后查看服務器返回的狀態(tài)碼。如果一切正常，callback()函數(shù)就會在客戶端做一些有意思的工作。一下就是一個典型的回調(diào)方法：

function callback(){ 　　if(xmlHttp.readyState == 4){
　　　　if(xmlHttp.status == 200){
　　　　　　//do something interesting here
　　　　}
　　} }

　　可以看到，正常的請求/響應模式有所不同，但對于web開發(fā)人員來說，并不是完全陌生的。顯然，在創(chuàng)建和建立XMLHttpRequst對象時還可以做些事情，另外當“回調(diào)”函數(shù)完成狀態(tài)檢查之后也可以有所作為。一般的，你會把這些標準調(diào)用包裝在一個庫中，一便在整個應用中使用，或者可以使用web上提供的庫

基于對象的Javascript以及繼承的實現(xiàn)

關(guān)鍵字this

指向調(diào)用該方法的“當前”對象

this使用的幾種場合：

用在對象的方法中

構(gòu)造函數(shù)

事件處理函數(shù)

原型－prototype

objectName.prototype

objectName 是對象的名稱。

objectName.prototype本身也是對象

用 prototype 屬性提供對象的類的一組基本功能。對象的新實例“繼承”賦予該對象原型的操作。

prototype 對象是個模板，要實例化的對象都以這個為基礎(chǔ)。

prototype 對象的任何屬性和方法都被傳遞給那個類的所有實例

利用prototype修改本地對象

個本地對象也有prototype屬性

通過prototype屬性創(chuàng)建新方法

通過prototype屬性重定義已有方法

var books = new Array("java","C","VB"); Array.prototype.hasItem = function(oItem){ for(i=0; i<books.length; i++){ if(oItem == books[i]){ return true; } } return false;}

var books = new Array("java","C","VB");

Array.prototype.pop = function(){

return "pop object";

}

var o = books.pop(); //原本為VB -à 重載后 pop object

自定義對象的4種方式

1．通過工廠方式創(chuàng)建

此工廠創(chuàng)建的對象各屬性都一樣

function createPerson(){

var oPerson = new Object()；

oPerson.name = "張三";

oPerson.age = 22;

oPerson.showAge = function(){

alert(this.age);

}

return oPerson;

}

var oPerson1 = createPerson();

var oPerson2 = createPerson();

此工廠根據(jù)傳參的不同創(chuàng)建不同的屬性

function createPerson(sName, iAge){

var oPerson = new Object()；

oPerson.name = sName;

oPerson.age = iAge;

oPerson.showAge = function(){ //或者函數(shù)外定義

alert(this.age);

}

return oPerson;

}

var oPerson1 = createPerson("張三"，22);

var oPerson2 = createPerson("李四", 20);

oPerson1.showAge();

oPerson2.showAge();

2．通過構(gòu)造函數(shù)方式創(chuàng)建

function Person(sName, iAge){

this.name = sName;

this.age = iAge;

this.showAge = function(){ //或者函數(shù)外定義

alert(this.age);

}

var oPerson1 = new Person("張三"，22);

var oPerson2 = new Person("李四", 20);

oPerson1.showAge();

oPerson2.showAge();

3．通過原型方式創(chuàng)建

function Person(){

}

Person.prototype.name = "張三";

Person.prototype.age = 22;

Person.prototype.showAge = function(){

alert(this.age);

}

var oPerson1 = new Person();

var oPerson2 = new Person();

function Person(){

}

Person.prototype.name = "張三";

Person.prototype.age = 22;

Person.prototype.books = new Array("java","C");

Person.prototype.showAge = function(){

alert(this.age);

}

var oPerson1 = new Person();

var oPerson2 = new Person();

oPerson1.books.push("VB");

alert(oPerson1.books); // java,C,VB

alert(oPerson2.books); // java,C,VB

4．混合的構(gòu)造函數(shù)/原型方式創(chuàng)建

function Car(sColor, iDoors, iMpg) {

this.color = sColor;

this.doors = iDoors;

this.mpg = iMpg;

this.drivers = new Array("Mike", "Sue");

}

Car.prototype.showColor = function () {

alert(this.color);

};

var oCar1 = new Car("red", 4, 23);

var oCar2 = new Car("blue", 3, 25);

oCar1.drivers.push("Matt");

alert(oCar1.drivers); //outputs "Mike,Sue,Matt"

alert(oCar2.drivers); //outputs "Mike,Sue"

原型(prototype)鏈

prototype類似于模板，要實例化的對象都以這個模板為基礎(chǔ)， prototype對象的任何屬性和方法都被傳遞給類的所有實例。

所有 JavaScript 內(nèi)部類的 prototype 屬性都是只讀的，所以：不能更改內(nèi)部對象的 prototype ，只能為內(nèi)部對象的原型添加或重載屬性和方法

自定義對象可以更改其prototype ，即：

子類類名.prototype = 父類對象實例;

1、創(chuàng)建基類

function Polygon(iSides){ //多邊形

this.iSides = iSides;

}

Polygon.prototype.getArea = function(){

return 0;

}

2、創(chuàng)建子類

function Triangle(iBase,iHeight){ //三角形對象

this.iBase = iBase;

this.iHeight = iHeight;

}

Triangle.prototype = new Polygon(3);

Triangle.prototype.getArea = function(){

return 0.5 * this.iBase * this.iHeight;

}

function Rectangle(iLength,iWidth){ //矩形對象

this.iLength = iLength;

this.iWidth = iWidth;

}

Rectangle.prototype = new Polygon(4);

Rectangle.prototype.getArea = function(){

return this.iLength * this.iWidth;

}

3、測試

var triangle = new Triangle(10,4);

var rectangle = new Rectangle(8,4);

alert(triangle.iSides);

alert(rectangle.iSides);

alert(triangle.getArea());

alert(rectangle.getArea());

td 對象

td 對象代表了 HTML 中數(shù)據(jù)單元。

在 HTML 表格中每個 <td> 標簽都會創(chuàng)建一個 td 對象。

th 對象

th 對象代表了 HTML 標準中的表頭單元。

HTML 中每個 <th> 標簽都會創(chuàng)建一個 th 對象。

td/th 對象屬性

W3C: W3C 標準。

屬性	描述	W3C
abbr	設(shè)置或返回單元格中內(nèi)容的縮寫版本。	Yes
align	已廢棄。設(shè)置或返回單元格內(nèi)部數(shù)據(jù)的水平排列方式。	D
axis	設(shè)置或返回相關(guān)單元格的一個逗號分隔的列表。	Yes
background	已廢棄。設(shè)置或返回表格的背景圖片。	D
bgColor	已廢棄。設(shè)置或返回表格的背景顏色	D
cellIndex	返回單元格在某行的單元格集合中的位置。	Yes
ch	設(shè)置或返回單元格的對齊字符。	Yes
chOff	設(shè)置或返回單元格的對齊字符的偏移量。	Yes
colSpan	單元格橫跨的列數(shù)。	Yes
headers	置或返回 header-cell 的 id 值。	Yes
height	已廢棄。設(shè)置或返回數(shù)據(jù)單元的高度	D
noWrap	已廢棄。 nowrap 屬性規(guī)定表格單元格中的內(nèi)容不換行。	D
rowSpan	設(shè)置或返回單元格可橫跨的行數(shù)。	Yes
vAlign	設(shè)置或返回表格單元格內(nèi)數(shù)據(jù)的垂直排列方式。	Yes
width	已廢棄。設(shè)置或返回單元格的寬度。	D

標準屬性和事件

td/th 對象同樣支持標準的屬性和事件。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

見瀏覽器兼容性問題與解決方案？

參考答案

(1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補丁和內(nèi)補丁不同

問題癥狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。

碰到頻率:100%

解決方案：CSS里 {margin:0;padding:0;}

備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符來設(shè)置各個標簽的內(nèi)外補丁是0。

(2)瀏覽器兼容問題二：塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大

問題癥狀:常見癥狀是IE6中后面的一塊被頂?shù)较乱恍?/p>

碰到頻率：90%（稍微復雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題）

解決方案：在float的標簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性

備注：我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現(xiàn)的，橫向的間距設(shè)置如果用margin實現(xiàn)，這就是一個必然會碰到的兼容性問題。

(3)瀏覽器兼容問題三：設(shè)置較小高度標簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設(shè)置高度

問題癥狀：IE6、7和遨游里這個標簽的高度不受控制，超出自己設(shè)置的高度

碰到頻率：60%

解決方案：給超出高度的標簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。

備注：這種情況一般出現(xiàn)在我們設(shè)置小圓角背景的標簽里。出現(xiàn)這個問題的原因是IE8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高。

(4)瀏覽器兼容問題四：行內(nèi)屬性標簽，設(shè)置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug

問題癥狀：IE6里的間距比超過設(shè)置的間距

碰到幾率：20%

解決方案：在display:block;后面加入display:inline;display:table;

備注：行內(nèi)屬性標簽，為了設(shè)置寬高，我們需要設(shè)置display:block;(除了input標簽比較特殊)。在用float布局并有橫向的margin后，在IE6下，他就具有了塊屬性float后的橫向margin的bug。不過因為它本身就是行內(nèi)屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設(shè)了。這時候我們還需要在display:inline后面加入display:talbe。

(5) 瀏覽器兼容問題五：圖片默認有間距

問題癥狀：幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。

碰到幾率：20%

解決方案：使用float屬性為img布局

備注：因為img標簽是行內(nèi)屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道。（我的一個學生使用負margin，雖然能解決，但負margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）

(6) 瀏覽器兼容問題六：標簽最低高度設(shè)置min-height不兼容

問題癥狀：因為min-height本身就是一個不兼容的CSS屬性，所以設(shè)置min-height時不能很好的被各個瀏覽器兼容

碰到幾率：5%

解決方案：如果我們要設(shè)置一個標簽的最小高度200px，需要進行的設(shè)置為：{min-height:200px; height:auto !important;

height:200px; overflow:visible;}

備注：在B/S系統(tǒng)前端開時，有很多情況下我們又這種需求。當內(nèi)容小于一個值（如300px）時。容器的高度為300px；當內(nèi)容高度大于這個值時，容器高度被撐高，而不是出現(xiàn)滾動條。這時候我們就會面臨這個兼容性問題。

(7)瀏覽器兼容問題七：透明度的兼容CSS設(shè)置

一般在ie中用的是filter:alpha(opacity=0);這個屬性來設(shè)置div或者是塊級元素的透明度，而在firefox中，一般就是直接使用opacity:0,對于兼容的，一般的做法就是在書寫css樣式的將2個都寫上就行，就能實現(xiàn)兼容

列出display的值并說明他們的作用？

參考答案

display： none | inline | block |

list-item | inline-block | table | inline-table |

inline-box | flexbox | inline-flexbox | flex | inline-flex

默認值：inline

none：隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間

inline：指定對象為內(nèi)聯(lián)元素。

block：指定對象為塊元素。

list-item：指定對象為列表項目。

inline-block：指定對象為內(nèi)聯(lián)塊元素。（CSS2）

table：指定對象作為塊元素級的表格。類同于html標簽<table>（CSS2）

inline-table：指定對象作為內(nèi)聯(lián)元素級的表格。類同于html標簽<table>（CSS2）

table-caption：指定對象作為表格標題。類同于html標簽<caption>（CSS2）

table-cell：指定對象作為表格單元格。類同于html標簽<td>（CSS2）

table-row：指定對象作為表格行。類同于html標簽<tr>（CSS2）

table-row-group：指定對象作為表格行組。類同于html標簽<tbody>（CSS2）

table-column：指定對象作為表格列。類同于html標簽<col>（CSS2）

table-column-group：指定對象作為表格列組顯示。類同于html標簽<colgroup>（CSS2）

table-header-group：指定對象作為表格標題組。類同于html標簽<thead>（CSS2）

table-footer-group：指定對象作為表格腳注組。類同于html標簽<tfoot>（CSS2）

run-in：根據(jù)上下文決定對象是內(nèi)聯(lián)對象還是塊級對象。（CSS3）

box：將對象作為彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）

inline-box：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）

flexbox：將對象作為彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）

inline-flexbox：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）

flex：將對象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

inline-flex：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

如何居中div, 如何居中一個浮動元素?

參考答案

(1)、非浮動元素居中：可以設(shè)置margin:0 auto 令其居中, 定位 ,父級元素text-algin:center等等

(2)、浮動元素居中:

方法一:設(shè)置當前div的寬度，然后設(shè)置margin-left:50%; position:relative; left:-250px;其中的left是寬度的一半。

方法二:父元素和子元素同時左浮動，然后父元素相對左移動50%，再然后子元素相對左移動-50%。

方法三:position定位等等。

CSS中l(wèi)ink 和@import 的區(qū)別是？

參考答案

(1)、link屬于HTML標簽，而@import是CSS提供的;

(2)、頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

(3)、import只在IE5以上才能識別，而link是HTML標簽，無兼容問題;

(4)、link方式的樣式的權(quán)重高于@import的權(quán)重.

請列舉幾種清除浮動的方法(至少兩種)?

參考答案

(1)、父級div定義 height

原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。

優(yōu)點：簡單、代碼少、容易掌握

缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產(chǎn)生問題

建議：不推薦使用，只建議高度固定的布局時使用

(2)、結(jié)尾處加空div標簽 clear:both

原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度

優(yōu)點：簡單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問題

缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好

建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法

(3)、父級div定義

偽類:after 和 zoom

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題

優(yōu)點：瀏覽器支持好、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）

缺點：代碼多、不少初學者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持。

建議：推薦使用，建議定義公共類，以減少CSS代碼。

(4)、父級div定義 overflow:hidden

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度

優(yōu)點：簡單、代碼少、瀏覽器支持好

缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。

建議：只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用。

(5)、父級div定義 overflow:auto

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區(qū)域的高度

優(yōu)點：簡單、代碼少、瀏覽器支持好

缺點：內(nèi)部寬高超過父級div時，會出現(xiàn)滾動條。

建議：不推薦使用，如果你需要出現(xiàn)滾動條或者確保你的代碼不會出現(xiàn)滾動條就使用吧。

block，inline和inlinke-block細節(jié)對比？

參考答案

display:block

a、block元素會獨占一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度。

b、block元素可以設(shè)置width,height屬性。塊級元素即使設(shè)置了寬度,仍然是獨占一行。

c、block元素可以設(shè)置margin和padding屬性。

? display:inline

a、inline元素不會獨占一行，多個相鄰的行內(nèi)元素會排列在同一行里，直到一行排列不下，才會新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。

b、inline元素設(shè)置width,height屬性無效。

c、inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left,

margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top,

margin-bottom不會產(chǎn)生邊距效果。

? display:inline-block

a、簡單來說就是將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。

補充說明

a、一般我們會用display:block，display:inline或者display:inline-block來調(diào)整元素的布局級別，其實display的參數(shù)遠遠不止這三種，僅僅是比較常用而已。

b、IE（低版本IE）本來是不支持inline-block的，所以在IE中對內(nèi)聯(lián)元素使用display:inline-block，理論上IE是不識別的，但使用display:inline-block在IE下會觸發(fā)layout，從而使內(nèi)聯(lián)元素擁有了display:inline-block屬性的表象。

什么叫優(yōu)雅降級和漸進增強？

參考答案

優(yōu)雅降級： Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效.

漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現(xiàn)出來并發(fā)揮作用。

說說浮動元素會引起的問題和你的解決辦法

參考答案

問題：

（1）父元素的高度無法被撐開，影響與父元素同級的元素

（2）與浮動元素同級的非浮動元素會跟隨其后

（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結(jié)構(gòu)

解決方法：

使用CSS中的clear:both;屬性來清除元素的浮動可解決問題(2)、(3)，對于問題(1)，添加如下樣式，給父元素添加clearfix樣式：

.clearfix:after{content: ".";display: block;height: 0;clear:

both;visibility: hidden;}

.clearfix{display: inline-block;} /* for IE/Mac */

清除浮動的幾種方法：

(1)、額外標簽法，<div

style="clear:both;"></div>（缺點：不過這個辦法會增加額外的標簽使HTML結(jié)構(gòu)看起來不夠簡潔。）

(2)、使用after偽類

parent:after{

content:" ";

height:0;

visibility:hidden;

display:block;

clear:both;

}

(3)、浮動外部元素

(4)、設(shè)置overflow為hidden或者auto

你有哪些性能優(yōu)化的方法？

參考答案

回答一：

（1）、減少http請求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip，CDN托管，data緩存

，圖片服務器。

（2）、前端模板 JS+數(shù)據(jù)，減少由于HTML標簽導致的帶寬浪費，前端用變量保存AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù)

（3）、用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。

（4）、當需要設(shè)置的樣式很多時設(shè)置className而不是直接操作style。

（5）、少用全局變量、緩存DOM節(jié)點查找的結(jié)果。減少IO讀取操作。

（6）、避免使用CSS Expression（css表達式)又稱Dynamic properties(動態(tài)屬性)。

（7）、圖片預加載，將樣式表放在頂部，將腳本放在底部加上時間戳。

回答二：

(1)、減少HTTP請求次數(shù)

(2)、使用CDN

(3)、避免空的src和href

(4)、為文件頭指定Expires

(5)、使用gzip壓縮內(nèi)容

(6)、把CSS放到頂部

(7)、把JS放到底部

(8)、避免使用CSS表達式

(9)、將CSS和JS放到外部文件中

(10)、避免跳轉(zhuǎn)

(11)、可緩存的AJAX

(12)、使用GET來完成AJAX請求

為什么要初始化CSS樣式？

參考答案

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。

當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

最簡單的初始化方法就是： {padding: 0; margin: 0;} （不建議）

解釋下浮動和它的工作原理？清除浮動的技巧？

參考答案

浮動元素脫離文檔流，不占據(jù)空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

(1)、使用空標簽清除浮動。

這種方法是在所有浮動標簽后面添加一個空標簽定義css clear:both. 弊端就是增加了無意義標簽。

(2)、使用overflow。

給包含浮動元素的父標簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

(3)、使用after偽對象清除浮動。

該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設(shè)置height:0，否則該元素會比實際高出若干像素；

CSS樣式表根據(jù)所在網(wǎng)頁的位置，可分為哪幾種樣式表？

參考答案

行內(nèi)樣式表，內(nèi)嵌樣式表，外部樣式表

談談你對CSS中刻度的認識？

參考答案

在CSS中刻度是用于設(shè)置元素尺寸的單位。

a、特殊值0可以省略單位。例如：margin:0px可以寫成margin:0

b、一些屬性可能允許有負長度值，或者有一定的范圍限制。如果不支持負長度值，那應該變換到能夠被支持的最近的一個長度值。

c、長度單位包括：相對單位和絕對單位。

相對長度單位有： em, ex, ch, rem, vw, vh, vmax,

vmin

絕對長度單位有： cm, mm, q, in, pt, pc, px

絕對長度單位：1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

文本相對長度單位：em

相對長度單位是相對于當前對象內(nèi)文本的字體尺寸，如當前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認字體尺寸。(相對父元素的字體大小倍數(shù))

body { font-size: 14px; }

h1 { font-size: 16px; }

.size1 p { font-size: 1em; }

.size2 p { font-size: 2em; }

.size3 p { font-size: 3em; }

文本相對長度單位：rem

rem是CSS3新增的一個相對單位（root em，根em），相對于根元素(即html元素)font-size計算值的倍數(shù)

只相對于根元素的大小

瀏覽器的默認字體大小為16像素，瀏覽器默認樣式也稱為user agent stylesheet，就是所有瀏覽器內(nèi)置的默認樣式，多數(shù)是可以被修改的，但chrome不能直接修改，可以被用戶樣式覆蓋。

請你說說em與rem的區(qū)別？

參考答案

rem

rem是CSS3新增的一個相對單位（root em，根em），相對于根元素(即html元素)font-size計算值的倍數(shù)

只相對于根元素的大小

rem（font size of the root element）是指相對于根元素的字體大小的單位。簡單的說它就是一個相對單位。

作用：利用rem可以實現(xiàn)簡單的響應式布局，可以利用html元素中字體的大小與屏幕間的比值設(shè)置font-size的值實現(xiàn)當屏幕分辨率變化時讓元素也變化，以前的天貓tmall就使用這種辦法

文本相對長度單位。相對于當前對象內(nèi)文本的字體尺寸。如當前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認字體尺寸(默認16px)。(相對父元素的字體大小倍數(shù))

em（font size of the element）是指相對于父元素的字體大小的單位。它與rem之間其實很相似，區(qū)別在。（相對是的HTML元素的字體大，默認16px）

em與rem的重要區(qū)別：它們計算的規(guī)則一個是依賴父元素另一個是依賴根元素計算

請你說說box-sizing屬性的的用法？

參考答案

設(shè)置或檢索對象的盒模型組成模式

a、box-sizing:content-box： padding和border不被包含在定義的width和height之內(nèi)。對象的實際寬度等于設(shè)置的width值和border、padding之和，即( Element width = width + border + padding，但占有頁面位置還要加上margin ) 此屬性表現(xiàn)為標準模式下的盒模型。

b、box-sizing:border-box： padding和border被包含在定義的width和height之內(nèi)。對象的實際寬度就等于設(shè)置的width值，即使定義有border和padding也不會改變對象的實際寬度，即( Element width = width ) 此屬性表現(xiàn)為怪異模式下的盒模型。

瀏覽器標準模式和怪異模式之間的區(qū)別是什么？

參考答案

在“標準模式”(Standards Mode) 頁面按照 HTML 與 CSS 的定義渲染，而在“怪異模式”(Quirks Mode)就是瀏覽器為了兼容很早之前針對舊版本瀏覽器設(shè)計、并未嚴格遵循W3C 標準的網(wǎng)頁而產(chǎn)生的一種頁面渲染模式。瀏覽器基于頁面中文件類型描述的存在以決定采用哪種渲染模式；如果存在一個完整的DOCTYPE則瀏覽器將會采用標準模式，而如果它缺失則瀏覽器將會采用怪異模式。

強烈建議閱讀加深理解：怪異模式（Quirks Mode）對 HTML 頁面的影響，這里列下瀏覽器標準模式和怪異模式的區(qū)別：

（1）盒模型：

在怪異模式下，盒模型為IE盒模型而非標準模式下的W3C 盒模型：在 IE 盒模型中，

box width = content width + padding left + padding right + border left + border

right，

box height = content height + padding top + padding bottom + border top +

border bottom。

而在 W3C 標準的盒模型中，box 的大小就是 content 的大小。

（2）圖片元素的垂直對齊方式:

對于inline元素和table-cell元素，在 IE Standards Mode 下 vertical-align 屬性默認取值為baseline。而當inline元素的內(nèi)容只有圖片時，如table的單元格table-cell。在 IE Quirks Mode 下，table單元格中的圖片的 vertical-align 屬性默認為bottom，因此，在圖片底部會有幾像素的空間。

（3）<table>元素中的字體:

CSS 中，描述font的屬性有font-family，font-size，font-style，font-weigh,上述屬性都是可以繼承的。而在IE Quirks Mode 下，對于table 元素，字體的某些屬性將不會從body或其他封閉元素繼承到table中，特別是 font-size屬性。

（4）

內(nèi)聯(lián)元素的尺寸:

在 IE Standards Mode 下，non-replaced inline 元素無法自定義大小，而在IE Quirks Mode 下，定義這些元素的width和height 屬性，能夠影響該元素顯示的大小尺寸。

（5）

元素的百分比高度:

a、CSS 中對于元素的百分比高度規(guī)定如下，百分比為元素包含塊的高度，不可為負值。如果包含塊的高度沒有顯式給出，該值等同于“auto”（即取決于內(nèi)容的高度）。所以百分比的高度必須在父元素有聲明高度時使用。

b、當一個元素使用百分比高度時，在IE Standards Mode 下，高度取決于內(nèi)容的變化，而在Quirks Mode 下，百分比高度則被正確應用。

（6）

元素溢出的處理：

在 IE Standard Mode 下，overflow取默認值 visible，即溢出可見，這種情況下，溢出內(nèi)容不會被裁剪，呈現(xiàn)在元素框外。而在Quirks Mode 下，該溢出被當做擴展box來對待，即元素的大小由其內(nèi)容決定，溢出不會被裁剪，元素框自動調(diào)整，包含溢出內(nèi)容。

怪異Quirks模式是什么，它和標準Standards模式有什么區(qū)別？

參考答案

從IE6開始，引入了Standards模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規(guī)范上的正確處理達到在指定瀏覽器中的程度。

在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對CSS的支持很差， IE6將對CSS提供更好的支持，然而這時的問題就來了，因為有很多頁面是基于舊的布局方式寫的，而如果IE6 支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現(xiàn)有頁面，又提供新的渲染機制呢？

在寫程序時我們也會經(jīng)常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。遇到這種問題時的一個常見做法是增加參數(shù)和分支，即當某個參數(shù)為真時，我們就使用新功能，而如果這個參數(shù) 不為真時，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是類似這樣做的，它將DTD當成了這個“參數(shù)”，因為以前的頁面大家都不會去寫DTD，所以IE6就假定如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區(qū)別：總體會有布局、樣式解析和腳本執(zhí)行三個方面的區(qū)別。

盒模型：在W3C標準中，如果設(shè)置一個元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

設(shè)置行內(nèi)元素的高寬：在Standards模式下，給<span>等行內(nèi)元素設(shè)置wdith和height都不會生效，而在quirks模式下，則會生效。

設(shè)置百分比的高度：在standards模式下，一個元素的高度是由其包含的內(nèi)容來決定的，如果父元素沒有設(shè)置百分比的高度，子元素設(shè)置一個百分比的高度是無效的用margin:0 auto設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。

（還有很多，答出什么不重要，關(guān)鍵是看他答出的這些是不是自己經(jīng)驗遇到的，還是說都是看文章看的，甚至完全不知道。）

說說你對邊距折疊的理解?

參考答案

外邊距折疊：相鄰的兩個或多個外邊距 (margin) 在垂直方向會合并成一個外邊距（margin）

相鄰：沒有被非空內(nèi)容、padding、border 或 clear 分隔開的margin特性. 非空內(nèi)容就是說這元素之間要么是兄弟關(guān)系或者父子關(guān)系

垂直方向外邊距合并計算:

a、參加折疊的margin都是正值：取其中 margin 較大的值為最終 margin 值。

b、參與折疊的margin 都是負值：取的是其中絕對值較大的，然后，從0 位置，負向位移。

c、參與折疊的margin 中有正值，有負值：先取出負 margin 中絕對值中最大的，然后，和正margin 值中最大的 margin 相加。

內(nèi)聯(lián)與塊級標簽有何區(qū)別？

參考答案

Html中的標簽默認主要分為兩大類型，一類為塊級元素，另一類是行內(nèi)元素，許多人也把行內(nèi)稱為內(nèi)聯(lián)，所以叫內(nèi)聯(lián)元素，其實就是一個意思。為了很好的布局，必須理解它們間的區(qū)別。

說說隱藏元素的方式有哪些？

參考答案

a、使用CSS的display:none，不會占有原來的位置

b、使用CSS的visibility:hidden，會占有原來的位置

c、使用HTML5中的新增屬性hidden="hidden"，不會占有原來的位置

為什么重置瀏覽器默認樣式，如何重置默瀏覽器認樣式？

參考答案

每種瀏覽器都有一套默認的樣式表，即user agent stylesheet，網(wǎng)頁在沒有指定的樣式時，按瀏覽器內(nèi)置的樣式表來渲染。這是合理的，像word中也有一些預留樣式，可以讓我們的排版更美觀整齊。不同瀏覽器甚至同一瀏覽器不同版本的默認樣式是不同的。但這樣會有很多兼容問題。

a、最簡單的辦法：（不推薦使用）*{margin: 0;padding: 0;}。

b、使用CSSReset可以將所有瀏覽器默認樣式設(shè)置成一樣。

c、normalize：也許有些cssreset過于簡單粗暴，有點傷及無辜，normalize是另一個選擇。bootstrap已經(jīng)引用該css來重置瀏覽器默認樣式，比普通的cssreset要精細一些，保留瀏覽器有用的默認樣式，支持包括手機瀏覽器在內(nèi)的超多瀏覽器，同時對HTML5元素、排版、列表、嵌入的內(nèi)容、表單和表格都進行了一般化。

天貓使用的css reset重置瀏覽器默認樣式：

@charset

"gb2312";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 "microsoft yahei";line-height: 1.5;-ms-overflow-style: scrollbar}h1,

h2, h3, h4, h5, h6 {font-size: 100%}ul, ol {list-style: none}a

{text-decoration: none;cursor:pointer}a:hover

{text-decoration: underline}img {border: 0}button, input, select,

textarea {font-size: 100%}table {border-collapse: collapse;border-spacing: 0}.clear

{clear:both}.fr {float:right}.fl {float:left}.block

{display:block;text-indent:-999em}

談談你對BFC與IFC的理解？(是什么，如何產(chǎn)生，作用)

參考答案

(1)、什么是BFC與IFC

a、BFC（Block Formatting Context）即“塊級格式化上下文”， IFC（Inline Formatting Context）即行內(nèi)格式化上下文。常規(guī)流（也稱標準流、普通流）是一個文檔在被顯示時最常見的布局形態(tài)。一個框在常規(guī)流中必須屬于一個格式化上下文，你可以把BFC想象成一個大箱子，箱子外邊的元素將不與箱子內(nèi)的元素產(chǎn)生作用。

b、BFC是W3C CSS 2.1 規(guī)范中的一個概念，它決定了元素如何對其內(nèi)容進行定位，以及與其他元素的關(guān)系和相互作用。當涉及到可視化布局的時候，Block Formatting Context提供了一個環(huán)境，HTML元素在這個環(huán)境中按照一定規(guī)則進行布局。一個環(huán)境中的元素不會影響到其它環(huán)境中的布局。比如浮動元素會形成BFC，浮動元素內(nèi)部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。也可以說BFC就是一個作用范圍。

c、在普通流中的Box(框) 屬于一種 formatting context(格式化上下文) ，類型可以是 block ，或者是 inline ，但不能同時屬于這兩者。并且，Block boxes(塊框) 在 block formatting context(塊格式化上下文) 里格式化， Inline boxes(塊內(nèi)框) 則在 Inline Formatting Context(行內(nèi)格式化上下文) 里格式化。

(2)、如何產(chǎn)生BFC

當一個HTML元素滿足下面條件的任何一點，都可以產(chǎn)生Block Formatting Context：

a、float的值不為none

b、overflow的值不為visible

c、display的值為table-cell, table-caption, inline-block中的任何一個

d、position的值不為relative和static

CSS3觸發(fā)BFC方式則可以簡單描述為：在元素定位非static，relative的情況下觸發(fā)，float也是一種定位方式。

(3)、BFC的作用與特點

a、不和浮動元素重疊，清除外部浮動，阻止浮動元素覆蓋

如果一個浮動元素后面跟著一個非浮動的元素，那么就會產(chǎn)生一個重疊的現(xiàn)象。常規(guī)流（也稱標準流、普通流）是一個文檔在被顯示時最常見的布局形態(tài)，當float不為none時，position為absolute、fixed時元素將脫離標準流。

說說你對頁面中使用定位(position)的理解？

參考答案

使用css布局position非常重要，語法如下：

position：static | relative | absolute | fixed |

center | page | sticky

默認值：static，center、page、sticky是CSS3中新增加的值。

(1)、static

可以認為靜態(tài)的，默認元素都是靜態(tài)的定位，對象遵循常規(guī)流。此時4個定位偏移屬性不會被應用，也就是使用left，right，bottom，top將不會生效。

(2)、relative

相對定位，對象遵循常規(guī)流，并且參照自身在常規(guī)流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規(guī)流中的任何元素。

(3)、absolute

a、絕對定位，對象脫離常規(guī)流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規(guī)流中的任何元素，其margin不與其他任何margin折疊。

b、元素定位參考的是離自身最近的定位祖先元素，要滿足兩個條件，第一個是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果沒有則選擇body為對照對象。第二個條件是要求祖先元素必須定位，通俗說就是position的屬性值為非static都行。

(4)、fixed

固定定位，與absolute一致，但偏移定位是以窗口為參考。當出現(xiàn)滾動條時，對象不會隨著滾動。

(5)、center

與absolute一致，但偏移定位是以定位祖先元素的中心點為參考。盒子在其包含容器垂直水平居中。（CSS3）

(6)、page

與absolute一致。元素在分頁媒體或者區(qū)域塊內(nèi)，元素的包含塊始終是初始包含塊，否則取決于每個absolute模式。（CSS3）

(7)、sticky

對象在常態(tài)時遵循常規(guī)流。它就像是relative和fixed的合體，當在屏幕中時按常規(guī)流排版，當卷動到屏幕外時則表現(xiàn)如fixed。該屬性的表現(xiàn)是現(xiàn)實中你見到的吸附效果。（CSS3）

如何解決多個元素重疊問題？

參考答案

使用z-index屬性可以設(shè)置元素的層疊順序

z-index屬性

語法：z-index: auto | <integer>

默認值：auto

適用于：定位元素。即定義了position為非static的元素

取值：

auto：元素在當前層疊上下文中的層疊級別是0。元素不會創(chuàng)建新的局部層疊上下文，除非它是根元素。

整數(shù)：用整數(shù)值來定義堆疊級別。可以為負值。說明：

檢索或設(shè)置對象的層疊順序。

z-index用于確定元素在當前層疊上下文中的層疊級別，并確定該元素是否創(chuàng)建新的局部層疊上下文。

當多個元素層疊在一起時，數(shù)字大者將顯示在上面。

在線咨詢

上一篇：僅需 5 步，用 JavaScript 直接通過前端發(fā)送電子郵件
下一篇：css實現(xiàn)發(fā)光的input輸入框

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

Java-WEB考點

parent:after{

您的項目需求