[TOC] ### 1. 選擇器類型？ ~~~ 1.css常用選擇器 ① .class ② #id ③ :hover ④* ⑤:before ⑥ :first-child⑦:after⑧:last-child⑨:nth-child(n)⑩:not(selector) 2.jQuery選擇器 ①css選擇器jQuery都可以用，多加一個 $("css選擇器") ~~~ 示例： ~~~ <p class="test" id="first">hello world</p> <h4>標題</h4> (1)css元素選擇器 p{color:pink} (2)class選擇器 .test{color:yellow} (3)id選擇器 #first{color:blue} (4)分組選擇器 p,h4{background:gray} (5)后代選擇器 div>span{} //選取div所有子元素為span的標簽 div span{} //選中div之后的所有span元素 (6)兄弟選擇器 div+p{}選取緊鄰div之后的第一個兄弟元素 div~p{}選取緊鄰div之后的所有兄弟元素 (7)偽類選擇器 div:hover{} input:focus{} (8)偽元素 ":before" 偽元素可以在元素的內容前面插入新內容 p:before{ content:'' } ":after" 偽元素可以在元素的內容之后插入新內容。 p:after{ content:'' } (9).屬性選擇 div[class='test']{} ~~~ ### 2. 元素垂直水平居中？ #### 1. 方法一 position ~~~ .parent{position:relative;} .child{ position:absolute; left:50%; top:50%; margin-left:-50%childwidth;（計算出確切的值，偏移的是子元素自身的一半） margin-top:-50%childheight; } ~~~ #### 2. 方法二 position+ transform ~~~ .parent{position:relative;} .child{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } ~~~ #### 3. 方法三 position+ margin ~~~ .parent{position:relative;} .child{ position:absolute; left:0; top:0; right:0; bottom:0; margin:auto auto; } ~~~ #### 4. 方法四 flex ~~~ .parent{ display: flex; justify-content: center; align-items: center; } ~~~ #### 5. 方法五 grid ~~~ .parent{ display: grid; } .child{ justify-self: center; align-self: center; } ~~~ ### 3.HTML標簽整理分類 #### 1. 標簽分類 - 塊標簽 ~~~ //特點 1.獨占一行 2.能夠設置width,height //常用的塊標簽 div,h1~h6,p,ul,li,dl,dt,dd ~~~ - 內聯標簽 ~~~ //特點 1.并排顯示 2.不能設置width,height 3.不能設置margin-top,margin-bottom a,span,em,strong ~~~ - 內聯塊 ~~~ //特點 1.并排顯示 2.可以設置寬高 //常用的內聯塊標簽 button,img,input ~~~ #### 2.原理 塊標簽：獨占一行,能夠設置寬高 ~~~ div,h1~h6,p,ul,li,dl,dt,dd 默認值： display:block; ~~~ 內聯標簽:并排顯示,不能設置寬高,margin-top,margin-bottom ~~~ a,span,em,strong 默認值： display:inline ~~~ 內聯塊:并排顯示,可以設置寬高 ~~~ button,img,input 默認值： display:inline-block ~~~ 內聯元素和內聯塊元素水平居中 ： ~~~ display:block; margin-left:auto; margin-right:auto; ~~~ 默認值： ~~~ 塊標簽默認 display:block; 內聯默認 display:inline; 內聯塊默認 display:inline-block ~~~ ### 4. 盒子模型  ~~~ 1. 在ie6以上盒子模型和w3c標準相同，在這里只考慮標準情況。 2. 盒子模型分為四個部分：margin、border、padding、content 3. 當設置 box-sizing:content-box;(默認設置)時，設置padding,和border,它的寬度為content+margin+padding 4. 當設置box-sizing:border-box時，設置padding,和border,它的寬度還是會保持不變（瀏覽器中所占的空間不變，content會被擠小） 5. margin為元素偏移量，用來調整位置。 ~~~ ### 5.選擇器的優先級別排序 ~~~ <div class='test' id='first'>hello world</div> 元素選擇器<class選擇器<ID選擇器<!important div{color:pink}<div.test{color:blue}<div#first{color:yellow}<div{color:red !important} ~~~ ### 6.常用的布局方法 ~~~ 1.table表格布局 07年之前使用廣泛,可以說是唯一的布局方式 2.float浮動+margin(經典) 3.inline-block布局——(有小問題設置父元素的font-size:0) 4.flexbox布局(正統的布局方式) ~~~ ### 7.flex布局 ~~~ 1. 概念：Flex為"彈性布局"，通過使用display和flex屬性來快速實現頁面布局。 2. 應用場景：多盒子布局（排列）、響應式、元素水平居中... 3. flex常用屬性介紹： ① flex-direction: row | row-reverse | column | column-reverse;設置子元素的排列方式 ② flex-wrap: nowrap | wrap | wrap-reverse;是否換行，wrap-reverse：從下往上排列 ③ justify-content: flex-start | flex-end | center | space-between | space-around; ④ align-items: flex-start | flex-end | center | baseline | stretch; ⑤ order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。（item使用） ~~~ ### 8.grid布局 ~~~ 1. 概念：grid為"二維網格布局"，通過使用display和grid屬性來快速實現頁面布局可同時處理列和行。 2. 應用場景：頁面整體規劃、制作無序排版頁面、響應式、元素水平居中... 3. grid常用屬性介紹： ① grid-template-row -->行模板 參數任意 幾個參數代表幾行 第幾個參數的大小代表第幾列的寬度 ② grid-template-column -->列模板 參數任意 幾個參數代表幾列 第幾個參數的大小代表第幾行的寬度 ③ grid-column: 1 / 4;等價于grid-column-start: 1;和grid-column-end: 4; ④ grid-template-columns: repeat(12, 1fr); 均分12等分 ⑤ grid-gap: 5px; 網格間距 ⑥ grid-template-areas: 網格區域 （字母的排版代表布局樣式） ⑦ grid-area: h; 子網格對應 網格區域的字母 ⑧ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); ~~~ ### 9. web資源訪問流程（當瀏覽器輸入url回車都干了什么） ~~~ 1. 首先查找window中host文件有沒有主機對應的ip地址，如主機為www.baidu.com 2. 如果window不知道（找不到主機對應的ip地址）則問dns服務器 3. 用查詢到的ip去連接服務器 如：百度服務器 4. 連接上服務器（涉及三次握手）之后向服務器發送請求（請求信息中包含了要訪問的主機名如：www.baidu.com） 5. 服務器從請求信息中獲取客戶機想訪問的主機名、web應用、web資源 6. 服務器讀取相應主機下的web應用下的web資源，如index.html 7. 用得到的web資源數據構建一個http響應，并回送給瀏覽器。一個完整的響應消息主要包括響應首行、響應頭信息、空行和響應正文。 8. 瀏覽器接收http響應，解析出數據資源并顯示 ~~~ 三次握手 ~~~ http三次握手（確認整個網絡是連通的即可，是明文傳輸） 1. ① 客戶端向服務器發送想要創建連接的數據包請求 ② 服務器開啟端口向客戶端返回數據包 ③ 客戶端向服務器發送數據包請求（告知服務器已接收服務器二次握手的信息） 2. 三次握手的作用：防止由于網絡延遲導致的數據丟失而開啟不必要的數據連接從而降低服務器不必要的開銷 3. 經過三次握手之后創建tcp連接（用于數據傳輸） ~~~ ~~~ https三次握手（相對安全） 說明：公鑰是放在互聯網上傳輸，私鑰只存在于服務端 1. ① 客戶端生成隨機數和支持的隨機套件發送到服務端 2. ② 服務器端生成隨機數和服務器端證書（公鑰）發給客戶端 3. ③ 客戶端拿到服務端生成的隨機數先存著然后根據傳來的公鑰生成預主秘鑰（公鑰）然后使用公鑰加密產生的隨機數，然后傳給服務器（加密的預主秘鑰） 4. 服務端使用只有服務端才有的私鑰進行解密也生成一個預主秘鑰 5. 服務端和客戶端同時使用這三個隨機字符串進行一個算法操作各生成一個主秘鑰，最后服務端和客戶端通過主秘鑰進行加密傳輸 ~~~ ~~~ 簡單來說就是：前兩次握手兩端各生成一個隨機數并傳輸給對方，第三次客戶端根據接收的公鑰加密后再成一個字符串然后再傳輸，最后兩邊通過三個字符串進行算法操作生成主密鑰進行數據傳輸 ~~~