CSS網頁佈局及JavaScript引入

1.定位流

1、相對定位就是相對於自己以前在標準流中的位置來移動

格式：　　position：relative
​
需要配合以下四個屬性一起使用
    top:20px;
    left:30px;
    right:40px;
    bottom:50px;

1.1 相對定位的注意點

#1 在相對定位中同一個方向上的定位屬性只能使用一個
　　top/bottom 只能用一個
　　left/right 只能用一個
#2 相對定位是不脫離標準流的，會繼續在標準流中佔用一份空間
#3 由於相對定位是不脫離標準流的，所以在相對定位中是區分塊級、行內、行內塊級元素的
#4 由於相對定位是不脫離標準流的，並且相對定位的元素會佔用標準流中的位置，所以當給相對定位的元素設定margin/padding
等屬性時會影響到標準流的佈局，即，給相對定位的標籤設定marin或padding，是以該標籤原來的位置為基礎來進行偏移的
 

1.2 相對對位的應用場景

#1、用於對元素進行微調
#2、配合後面學習的絕對定位來使用 

2、絕對定位就是相對於body或者某個定位流中的祖先元素來定位

2.1 絕對定位的參考點

#1、預設情況下所有的絕對定位的元素，無論有無祖先元素，都會以body作為參考點
​
#2、如果一個絕對定位的元素有祖先元素，並且祖先元素也是定位流，那麼這個絕對定位的元素就會以定位流的那個祖先元素作為參考點
2.1 只要是這個絕對定位元素的祖先元素都可以
​
2.2 祖先必須是定位流，此處的定位流指的是絕對定位、相對定位、固定定位(定位流中只有靜態定位不行)
​
2.3、如果一個絕對定位的元素有祖先元素，而且祖先元素中有多個元素都是定位流，那麼這個絕對定位的元素會以離它最近的那個定位流的祖先元素為參考點
 

2.1 絕對定位的注意點

#1、絕對定位的元素是脫離標準流的,所以絕對定位的元素不區分塊級元素/行內元素/行內塊級元素
#2、如果一個絕對定位的元素是以body作為參考點, 那麼其實是以網頁首屏的寬度和高度作為參考點, 而不是以整個網頁的寬度和高度作為參考點，會相對於body定位會隨著頁面的滾動而滾動
#3、一個絕對定位的元素會忽略祖先元素的padding

2.3 絕對定位水平居中

#1.注意當一個盒子絕對定位之後不能使用margin: 0 auto;讓盒子自身居中
#2.如果想讓過一個絕對定位的盒子自身居中, 可以使用left: 50%; margin-left:-元素寬度一半px; 

2.4 絕對定位的應用場景

#1、用於對元素進行微調
#2、配合相對定位來使用
企業開發中一般相對定位和絕對定位都是一起出現, 很少單獨使用===>子絕父相
那為何要用子絕父相呢，請看下圖

3、固定定位

#1、固定定位（和絕對定位高度相似，和背景的關聯方式也高度相似）
背景的關聯方式background-attachment: fixed;可以讓圖片不隨著滾動條的滾動而滾動
而固定定位可以讓某一個元素不隨著滾動條的滾動而滾動
​
#2、注意點
  1、固定定位，就是相對瀏覽器視窗定位。頁面如何滾動，這個盒子顯示的位置不變。
  2、固定定位的元素是脫離標準流的，不會佔用標準流中的空間
  3、固定定位和絕對定位一樣不區分行內、塊級、行內塊級
  4、E6不支援固定定位 

固定定位應用場景

• 網頁對聯廣告

• 網頁頭部通欄(穿透效果)

4、靜態定位

#1、什麼是靜態定位?
預設情況下標準流中的元素position屬性就等於static, 所以靜態定位其實就是預設的標準流

5、z-index

#1、z-index屬性：用於指定定位的元素的覆蓋關係
  1.1、z-index值表示誰壓著誰。數值大的壓蓋住數值小的。
  
  1.2、只有定位了的元素，才能有z-index值。也就是說，不管相對定位、絕 
      對定位、固定定位，都可以使用z-index值。而浮動的東西不能用。
  
  1.3、z-index值沒有單位，就是一個正整數。預設的z-index值是0。
​
  1.4、如果大家都沒有z-index值（預設所有元素z-index值為0），或者z- 
      index值一樣，那麼誰寫在HTML後面，誰在上面能壓住別人。定位了 
      的元素，永遠能夠壓住沒有定位的元素。
​
#2、注意點：從父現象（父親慫了，兒子再牛逼也沒用）
  父元素沒有z-index值, 那麼子元素誰的z-index大誰蓋住誰
  父元素z-index值不一樣, 那麼父元素誰的z-index大誰蓋住誰

2.JavaScript引入方式

1、方式一

<script>
  // 在這裡寫你的JS程式碼
</script>

2、方式二

<script src="xxx.js"></script>

3.JavaScript語法規範

#1、JavaScript對換行、縮排、空格不敏感。
​
  ps：每一條語句末尾要加上分號，雖然分號不是必須加的，但是為了程式今後要壓縮，如果不加分號，壓縮之後將不能執行。
​
#2、所有的符號，都是英語的。比如括號、引號、分號。
​
#3、JavaScript的註釋：
​
　　單行註釋：       // 我是註釋
  多行註釋：
      /*
        多行註釋1
        多行註釋2
       */

4.變數

1、宣告變數的語法

// 1. 先聲明後定義
var name; // 宣告變數時無需指定型別，變數name可以接受任意型別
name= "egon";
​
// 2. 宣告立刻定義
var age = 18;

2、變數名命名規範

#1、由字母、數字、下劃線、$ 組成,但是不能數字開頭，也不能純數字
​
#2、嚴格區分大小寫
​
#3、不能包含關鍵字和保留字（以後升級版本要用的關鍵字）。
如：abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile
#4、推薦駝峰命名法：有多個有意義的單片語成名稱的時候，第一個單詞的首字母小寫，其餘的單詞首字母寫
​
#5、匈牙利命名：就是根據資料型別單詞的的首字元作為字首

3、ES6中let

ES6之前js沒有塊級作用域，ES6新增了let命令，用於宣告變數（宣告的變數屬於塊級作用域），流程控制語句的{}就是塊級作用域。其用法類似於var，但是所宣告的變數只在let命令所在的程式碼塊內有效。例如：for迴圈的計數器就很適合使用let命令。

for(let i=1;i<=5;i++){}

4、常量

ES6新增const用來宣告常量。一旦宣告，其值就不能改變。

const PI = 3.1415926;
PI=3 //TypeError: "PI" is read-only

5.資料型別與內建方法

js是動態語言：變數裡面能夠儲存數字、字串等。變數會自動的根據儲存內容的型別不同，來決定自己的型別。

1、數值（Number）

JavaScript不區分整型和浮點型，就只有一種數字型別，即number

var x = 3;
var y = 3.1;
var z = 13e5;
var m = 13e-5;
var n = NaN; // typeof n結果"number"

四捨五入

var num=1.3456
num.toFixed(2) // "1.35"

字串型別轉成數字

#字串轉numbber
parseInt("123")  // 返回123
​
#NaN屬性是代表非數字值的特殊值。該屬性用於指示某個值不是數字。
parseInt("ABC")  // 返回NaN
​
#帶有自動淨化的功能；只保留字串最開頭的數字，後面的中文自動消失。例如：
console.log(parseInt("18林海峰")); //18
​
#只去末尾的中文，不會去開頭的
console.log(parseInt("林海峰18")); // NaN
​
​
# 字串中的數字轉浮點
parseInt("123.456")  // 返回123
parseFloat("123.456")  // 返回123.456 
​
#自動帶有截斷小數的功能：取整，不四捨五入
var a = parseInt("1.3") + parseInt("2.6"); //a=3
​
var a = parseFloat("1.3") + parseFloat("2.6"); //a=3.9

數字型別轉成字串

#數字轉成字串型別
var x=10;
var y='20';
var z=x+y; // z='1020'
typeof z; //String
​
#數字轉成字串型別
var m=123;
var n=String(m)
​
var a=123;
var b=a.toString()

2、字串（String）

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

常用方法：

補充：

ES6中引入了模板字串。模板字串（template string）是增強版的字串，用反引號（`）標識，它的用途為

#1、完全可以當做普通字串使用
var msg = `my name is egon`
​
#2、也可以用來定義多行字串
var info = `
   name:egon
   age:18
   sex:male
`
​
#3、並且可以在字串中嵌入變數
var name = "egon";
var age = 18;
var msg = `my name is ${name}, my age is ${age}`;

注意：

如果模板字串中需要使用反引號，則在其前面要用反斜槓轉義。

3、布林值（Boolean）

區別於Python，true和false都是小寫。

var a = true;
var b = false;

任何資料型別都可以轉換為boolean型別：空字串、0、null、undefined、NaN都是false。

#布林值為假的資料型別
Boolean('')
Boolean(0)
Boolean(null)
Boolean(undefined)
Boolean(NaN)
​
# 其餘資料型別的布林值均為真，例如
Boolean([])
Boolean(123)

4、null和undefined

• null表示值是空，一般在需要指定或清空一個變數時才會使用，如 name=null;

• undefined表示當宣告一個變數但未初始化時，該變數的預設值是undefined。還有就是函式無明確的返回值時，返回的也是undefined。

null表示變數的值是空，undefined則表示只聲明瞭變數，但還沒有賦值。

5、常用內建物件

JavaScript 中的所有事物都是物件：字串、數值、陣列、函式...

此外I,JavaScript還提供多個內建物件，比如 Array,Date,Math 等等

物件只是帶有屬性和方法的特殊資料型別

6.陣列物件Array

陣列物件的作用是：使用單獨的變數名來儲存一系列的值。類似於Python中的列表。

var x = ["egon", "hello"];
console.log(x[1]);  // 輸出"hello"

常用方法：

關於sort()需要注意：

如果呼叫該方法時沒有使用引數，將按字母順序對陣列中的元素進行排序，說得更精確點，是按照字元編碼的順序進行排序。

var arr = [123,9,1211,11]
arr.sort()
#[11, 1211, 123, 9]

如果想按照其他標準進行排序，就需要提供比較函式，該函式應該具有兩個引數 a 和 b，接收傳入的a和b，執行函式體程式碼，然後返回一個值用於說明a和b的大小

返回值 < 0 ：代表a小於b

返回值 =0 : 代表a等於b

返回值 > 0 ：代表a大於b

注意：

var x = "5";
var y = "3";
res = x - y; //res = 2
typeof res  //"number"

示例：

function sortNumber(a,b){
   return a - b
}
var arr = [123,9,1211,11]
arr.sort(sortNumber) #[9, 11, 123, 1211]

關於遍歷陣列中的元素，可以使用下面的方式：

var arr = [11, 22, 33, 44];
for (var i=0;i<arr.length;i++) {
  console.log(i);
}

forEach()

語法：

forEach(function(currentValue, index, arr), thisValue)

引數：

splice()

語法：

splice(index,howmany,item1,.....,itemX)

引數：

map()

語法：

map(function(currentValue,index,arr), thisValue)

引數：