資訊專欄INFORMATION COLUMN
摘要：通過(guò)從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。在頁(yè)面加載的時(shí)也同時(shí)加載，而是需要加載完成后在開始加載。是長(zhǎng)連接，連接一直保持，是短連接，發(fā)起，接收，關(guān)閉。
目錄
我碰到有意思的題會(huì)繼續(xù)更新，如發(fā)現(xiàn)我的解答有問(wèn)題，請(qǐng)告知，萬(wàn)分感謝。
如覺得對(duì)你有幫助，請(qǐng)幫忙點(diǎn)個(gè)贊，謝謝。
css的選擇器，權(quán)重
ie和其他瀏覽器下，盒模型的區(qū)別
盒模型互相轉(zhuǎn)化
元素水平垂直居中
左邊固定，右邊自適應(yīng)
左右固定，中間自適應(yīng)，高度通屏
外邊距margin
邊框圓角border-radius
border-color
margin負(fù)值
margin一些坑
dispaly有那些值
偽類
css3新增了那些屬性
老生常談的hack
清除浮動(dòng)
html5新增了那些標(biāo)簽
有什么作用？
link @import 有什么區(qū)別
lable有什么用
cookies，sessionStorage 和 localStorage 的區(qū)別？
WebSocket和socket有什么關(guān)系？ WebSocket和ajax的區(qū)別？
正則驗(yàn)證郵箱
閉包，你在開發(fā)中要經(jīng)常使用閉包嗎？為什么？
數(shù)據(jù)類型
獲取元素自定義屬性有什么區(qū)別？
繼承都有哪些
編程題（測(cè)試）
css篇
css的選擇器，權(quán)重
答：
id,class,標(biāo)簽，組合，繼承，偽類，* !important > style > id > class > 標(biāo)簽 > *
ie和其他瀏覽器下，盒模型的區(qū)別
答：
- ie下的盒模型為 content（width+height+padding+border）+ margin - 實(shí)際大?。篶ontent - 標(biāo)準(zhǔn)盒模型為content(width+height) + padding + border + margin - 實(shí)際大?。篶ontent+padding+border
盒模型互相轉(zhuǎn)化
答：
- 給需要轉(zhuǎn)化的元素設(shè)置 box-sizing:border-box； - content-box: 這是由 CSS2.1 規(guī)定的寬度高度行為。寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框。 - border-box : 為元素設(shè)定的寬度和高度決定了元素的邊框盒。就是說(shuō)，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過(guò)從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。 - inherit : 規(guī)定應(yīng)從父元素繼承 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%);
左邊固定，右邊自適應(yīng)
答：
- 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};
左右固定，中間自適應(yīng)，高度通屏
答：
// 布局// 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
如題：如下代碼最后生成出來(lái)是什么。
width:0px;
height:0px;
border-width:60px;
border-style:solid;
border-color: red transparent transparent transparent;
margin負(fù)值
如題：有一組li，它們寬高為100px，邊框?yàn)?0px灰色，每一個(gè)li之間的間隔為10px，鼠標(biāo)滑過(guò)的時(shí)候，讓其邊框顏色改變?yōu)榧t色，整體排版不能亂，而且邊框要展示全。(用css實(shí)現(xiàn))答：
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一些坑
如題：有兩個(gè)div，寬高為100px，邊框?yàn)?0px，div1=margin:10px 20px 30px40px，div2=margin:40px 30px 20px 10px，請(qǐng)問(wèn)這兩個(gè)元素中間的間隔為像素；答：
上下布局（div1在上div2在下）：40px; 上下布局（div2在上div1在下）：20px; 左右布局（div1在左div2在右）：30px; 左右布局（div2在左div1在右）：70px;如題：有兩個(gè)div，父子級(jí)關(guān)系，父級(jí)：parent，子級(jí)：child;parent寬高為100px，child寬高為50p，外邊距為50px;child和parent都在什么位置？（瀏覽器的margin和padding已經(jīng)清零）。答：
child在parent右上角； parent： 距頂部50px，距左0px； child： 距離頂部50px， 距左50px，底部距離父級(jí)底部50px；如題：有兩個(gè)div，兄弟關(guān)系，div1在上，div1寬高100px，加float：left，div2寬高50px，margin：50px，div1和div2在什么位置？手動(dòng)加重點(diǎn)：怎么展示的？答：
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新增了那些屬性
答：//個(gè)人常用： transform:rotate(90deg); // 旋轉(zhuǎn) transform-origin:center center; // 定位中心點(diǎn) transform:translate(x,y); // 在x和y軸上定位 transtion:.1s; // 過(guò)渡動(dòng)畫 animation: obj 2s; // 動(dòng)畫 border-radius:5px; // 邊框圓角 background-size:100% 100%; // 背景大小 box-show:0 0 0 #000; // 陰影
老生常談的hack
答：width:100px; // 所有都識(shí)別 width:100px9; // ie6、ie7、ie8 *widht:100px; // ie6、ie7 _width:100px; // ie6 widht:100px