摘要：通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。在頁面加載的時也同時加載，而是需要加載完成后在開始加載。是長連接，連接一直保持，是短連接，發起，接收，關閉。

我碰到有意思的題會繼續更新，如發現我的解答有問題，請告知，萬分感謝。
如覺得對你有幫助，請幫忙點個贊，謝謝。

css的選擇器，權重

ie和其他瀏覽器下，盒模型的區別

盒模型互相轉化

元素水平垂直居中

左邊固定，右邊自適應

左右固定，中間自適應，高度通屏

外邊距margin

邊框圓角border-radius

border-color

margin負值

margin一些坑

dispaly有那些值

偽類

css3新增了那些屬性

老生常談的hack

清除浮動

html5新增了那些標簽

有什么作用？

link @import 有什么區別

lable有什么用

cookies，sessionStorage 和 localStorage 的區別？

WebSocket和socket有什么關系？ WebSocket和ajax的區別？

正則驗證郵箱

閉包，你在開發中要經常使用閉包嗎？為什么？

數據類型

獲取元素自定義屬性有什么區別？

繼承都有哪些

編程題（測試）

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};

左右固定，中間自適應，高度通屏
答：

   // 布局
   

       

       

       

   

   // 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