目錄
我碰到有意思的題會繼續更新，如發現我的解答有問題，請告知，萬分感謝。
如覺得對你有幫助，請幫忙點個贊，謝謝。
- css的選擇器，權重
- ie和其他瀏覽器下，盒模型的區別
- 盒模型互相轉化
- 元素水平垂直居中
- 左邊固定，右邊自適應
- 左右固定，中間自適應，高度通屏
- 外邊距margin
- 邊框圓角border-radius
- border-color
- margin負值
- margin一些坑
- dispaly有那些值
- 偽類
- css3新增了那些屬性
- 老生常談的hack
- 清除浮動
- html5新增了那些標籤
- <!Doctype> 有什麼作用？
- link @import 有什麼區別
- lable有什麼用
- cookies，sessionStorage 和 localStorage 的區別？
- WebSocket和socket有什麼關係？ WebSocket和ajax的區別？
- 正則驗證郵箱
- 閉包，你在開發中要經常使用閉包嗎？為什麼？
- 資料型別
- 獲取元素自定義屬性有什麼區別？
- 繼承都有哪些
- 程式設計題（測試）
css篇
-
css的選擇器，權重
答：id,class,標籤，組合，繼承，偽類，* !important > style > id > class > 標籤 > * -
ie和其他瀏覽器下，盒模型的區別
答：- ie下的盒模型為 content（width+height+padding+border）+ margin - 實際大小：content - 標準盒模型為content(width+height) + padding + border + margin - 實際大小：content+padding+border -
盒模型互相轉化
答：- 給需要轉化的元素設定 box-sizing:border-box； - content-box: 這是由 CSS2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。 - border-box : 為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。 - inherit : 規定應從父元素繼承 box-sizing 屬性的值。 -
元素水平垂直居中
答：- css2 position：absolute; top：50%; left：50%; margin-left：-widht/2; margin-top：-height/2; - css2 position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; - css3 display:flex; justify-content:center; align-items:center; - css3 position:absolute; top:50%; left:50%; transfrom:translate(-50%,-50%); -
左邊固定，右邊自適應
答：- css2 div1{float:left;} div2{overflow:hidden;}; - css2 div1{float:left;} div2{ margin-left:-div1.width;} - css3 parent{dispaly:flex;} div1{wdith:200px;} div2{flex:1}; -
左右固定，中間自適應，高度通屏
答：// 佈局 <div class="wrap"> <div class="left"></div> <div class="right"></div> <div class="center"></div> <div> // style html,body,.wrap{height:100%;overflow:hidden; background:green;} .left,.right,.center{height:100%;} .left,.right{width:100px;background:aqua;} .left{float:left;} .right{float:right;} .center{background:red} -
外邊距margin
margin:10px; // 上下左右 10px margin:10px 10px; // 上下10px 左右10px margin:10px 10px 10px; // 上10px 左右10px 下10px margin:10px 10px 10px 10px; // 上10px 右10px 下10px 左10px margin:10px 10px 10px 10px 10px; // 坑 margin:10px 10px 10px 10px 10px 10px; // 坑 margin:10px 10px 10px 10px 10px 10px 10px; // 坑 margin:10px 10px 10px 10px 10px 10px 10px 10px; // 坑 -
邊框圓角border-radius
// 左上右上右下左下 10px border-radius:10px; // 左上右下10px 右上左下10px border-radius:10px 10px; // 左上10px 左下右上10p 右下10px border-radius:10px 10px 10px; // 左上10px 右上10px 右下10px 左下10px border-radius:10px 10px 10px 10px; // 左上左10px/左上上10px 右上右10px/右上上10px 右下右10px/右下下10px 左下左10px/左下下10px border-radius:10px 10px 10px 10px / 10px; // 左上左、右下右10px/左上上、右下下10px 右上右、左下左10px/右上上、左下下10px border-radius:10px 10px 10px 10px / 10px 10px; // 左上左10px/左上上10px 右上右、左下左10px/右上上、左下下10p 右下右10px/右下下10px border-radius:10px 10px 10px 10px / 10px 10px 10px; // 左上左10px/左上上10px 右上右10px/右上上10px 右下右10px/右下下10px 左下左10px/左下下10px border-radius:10px 10px 10px 10px / 10px 10px 10px 10px; -
border-color
如題：如下程式碼最後生成出來是什麼。
width:0px;
height:0px;
border-width:60px;
border-style:solid;
border-color: red transparent transparent transparent; -
margin負值
如題：有一組li，它們寬高為100px，邊框為10px灰色，每一個li之間的間隔為10px，滑鼠滑過的時候，讓其邊框顏色改變為紅色，整體排版不能亂，而且邊框要展示全。(用css實現)
答：
ul>li*N //html li{ width:100px; height:100px; border:10px solid #ccc; margin:-10px 0 0px -10px; position:relative; } li:hover{ border:10px solid red; z-index:9; } -
margin一些坑
如題：有兩個div，寬高為100px，邊框為10px，div1=margin:10px 20px 30px40px，div2=margin:40px 30px 20px 10px，請問這兩個元素中間的間隔為畫素；
答：
上下佈局（div1在上div2在下）：40px; 上下佈局（div2在上div1在下）：20px; 左右佈局（div1在左div2在右）：30px; 左右佈局（div2在左div1在右）：70px;如題：有兩個div，父子級關係，父級：parent，子級：child;parent寬高為100px，child寬高為50p，外邊距為50px;child和parent都在什麼位置？（瀏覽器的margin和padding已經清零）。
答：
child在parent右上角； parent： 距頂部50px，距左0px； child： 距離頂部50px， 距左50px，底部距離父級底部50px；如題：有兩個div，兄弟關係，div1在上，div1寬高100px，加float：left，div2寬高50px，margin：50px，div1和div2在什麼位置？手動加重點：怎麼展示的？
答：
div1覆蓋div2。 div1:距上50px，距左0px，距下和右0px; div2:距上50px，距左50px，距下和右50px;附加：如果child外邊距為100px，他們的位置呢？
-
dispaly有那些值
答：// 常用值： block|inline|inline-block|none|table|list-item| inherit -
偽類
答：常用： :link | :hover | :active | :visited | :after | :before | :first-child | :last-child :nth-child() -
css3新增了那些屬性
答：//個人常用： transform:rotate(90deg); // 旋轉 transform-origin:center center; // 定位中心點 transform:translate(x,y); // 在x和y軸上定位 transtion:.1s; // 過渡動畫 animation: obj 2s; // 動畫 border-radius:5px; // 邊框圓角 background-size:100% 100%; // 背景大小 box-show:0 0 0 #000; // 陰影 -
老生常談的hack
答：width:100px; // 所有都識別 width:100px9; // ie6、ie7、ie8 *widht:100px; // ie6、ie7 _width:100px; // ie6 widht:100px ; // ie8 -
清除浮動
答：.clear{zoom:1;}; .clear:after{content:``; dislay:block; clear:both; }
HTML篇
-
html5新增了那些標籤
答：video canvas header footer section nav -
<!Doctype> 有什麼作用？
答:讓瀏覽器按照什麼版本解析文件。 -
link @import 有什麼區別
答：link是通過html連結引入，@import在css檔案中引入。 link在頁面載入的時也同時載入，而@import是需要css載入完成後在開始載入。 -
lable有什麼用
答：標註input，點選lable中的文字，就會觸發此控制元件，自動把焦點轉移到繫結的表單元素上。
綜合篇
-
cookies，sessionStorage 和 localStorage 的區別？
答：cookies：儲存最多20多條資料，儲存大小在4kb左右，在設定的時間前不會因為瀏覽器的關閉而消失，安全性存在漏洞，容易被攔截，在所有同源視窗共享。 sessionStorage: 大小在5M或者更大，不在不同瀏覽器下共享及時在一個頁面（iframe）;瀏覽器關閉消失 localStorage:大小在5M或者更大，不會因為瀏覽器關閉而消失，在所有同源視窗共享 -
WebSocket和socket有什麼關係？ WebSocket和ajax的區別？
答：1. mmp！就跟javascript和java,錘子手機和錘子一樣，有錘子的關係。 2. web是長連線，連線一直保持，ajax是短連線，發起，接收，關閉。 ajax是客戶端發起，web是客戶端伺服器互相推送。 -
http和https的區別
答：自己的個人理解：https比http更安全。 為什麼安全不知道，請自行搜尋。雖然搜尋過，並看過好幾遍但是個人一直無法融會貫通，所以不再次標註答案。等什麼時候吃透了，我在寫上。 -
http和https之間怎麼傳輸？
答：mmp，還是自己去搜尋吧。 -
正則驗證郵箱
答：var str = 23246574@qq.com reg = /^w+@w+(.[a-zA-Z]{2,3}){1,2}$/g;)); console.log(reg.text(str));
JavaScript篇
-
閉包，你在開發中要經常使用閉包嗎？為什麼？
答：可以訪問另外一個函式作用域裡的變數和函式。不建議頻繁使用，或者對自己的技術不是蜜汁自信的不要過多使用，因為閉包使用多了，操作不當，容易造成記憶體洩漏，變成記憶體溢位。 -
資料型別 、
答：number string boolean undefined null object -
獲取元素自定義屬性有什麼區別？
答：getAttribute; // 返回物件 getparameter; // 返回字串 -
繼承都有哪些
答：原型鏈、組合、寄生、寄生組合、構造、例項、拷貝 -
題
- var arr1 = [1,2,3,4,5,6,7,8,9], arr2 = [9,8,7,6,5,4,3,1,11,10,7,9];
找出arr1和arr2中耦合的數字。 - 把 {“a”:[1,2,3],”b”:[4,5],”c”:[6],”d”:[7,8,9,10]} 轉成 [{“type”:”a”,”name”:1},{“type”:”a”,”name”:2},{“type”:”a”,”name”:3},{“type”:”b”,”name”:4},{“type”:”b”,”name”:5},{“type”:”c”,”name”:6},{“type”:”d”,”name”:7},{“type”:”d”,”name”:8},{“type”:”d”,”name”:9},{“type”:”d”,”name”:10}]
- var arr1 = [1,2,3,4,5,6,7,8,9], arr2 = [9,8,7,6,5,4,3,1,11,10,7,9];