web前端總結面試問題

一個父元素div，一個未知寬度、高度的子元素div [上下左右居中方法總結]

//一、position佈局，position設爲absolute，其餘同情景一

　　　　　　　　　　　　二、display：table

　　　　　　　　　　　　父級元素：{ display:table;}

　　　　　　　　　　　　子級元素： { display:table-cell;vertical-align:middle }

　　　　　　　　　　　 三、flex佈局

　　　　　　　　　　　　父級元素：{ display:flex;flex-direction:row;justify-content:center;align-items:center;}

　　　　　　　　　　　　子級元素：{flex:1}

　　　　　　　　　　　四、translate

　　　　　　　　　　　　position: absolute;
　　　　　　　　　　　　top: 50%;
　　　　　　　　　　　　left: 50%;
　　　　　　　　　　　　-webkit-transform: translate(-50%, -50%);
　　　　　　　　　　　　-moz-transform: translate(-50%, -50%);
　　　　　　　　　　　　-ms-transform: translate(-50%, -50%);
　　　　　　　　　　　　-o-transform: translate(-50%, -50%);
　　　　　　　　　　　　transform: translate(-50%, -50%);

經常使用Hack的技巧：

（1）IE下，可使用獲取常規屬性的方法來獲取自定義屬性，也可使用getAttribute()獲取自定義屬性；
（2）Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法：統一經過getAttribute()獲取自定義屬性。
（3）IE下，even對象有x,y屬性，可是沒有pageX,pageY屬性；
（4）Firefox下，event對象有pageX,pageY屬性，可是沒有x,y屬性。解決方法是條件註釋，缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。
（5）Chrome 中文界面下默認會將小於12px的文本強制按照12px顯示，可經過加入 CSS屬性-webkit-text-size-adjust: none;來解決。
（6）超連接訪問事後hover樣式就不出現了 被點擊訪問過的超連接樣式再也不具備hover和active了，解決方法是改變CSS屬性的排列順序：
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

 

兩行溢出省略，兼容ie的

//兼容ie的
 .menu{
        position: relative;
        line-height: 24px;
        height: 48px;
        overflow: hidden;
        width: 100px;
    }
    .menu:after{
        content: '...';
        font-weight: bold;
        position: absolute;
        bottom: 0;
        right: -15px;
        padding: 0 20px 1px 45px;
        background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
    }

//不兼容ie
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        width:100px; 

用純CSS建立一個三角形的原理是什麼？

把上、左、右三條邊隱藏掉（顏色設爲 transparent）

.demo {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
}

CSS3 線性漸變

background: linear-gradient(direction, color-stop1, color-stop2, ...);

CSS3 Media

@media screen and (min-width:960px){ 
    body{background:orange;}
}

響應式佈局的格式：

@media mediatype and/not/only (media feature){CSS-Code}

CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？CSS 3新增僞類有哪些？

id選擇器（# myid）
類選擇器（.myclassname）
標籤選擇器（div、h一、p）
相鄰選擇器（h1 + p）
子選擇器（ul < li）
後代選擇器（li a）
通配符選擇器（ * ）
屬性選擇器（a[rel = "external"]）
僞類選擇器（a: hover, li: nth - child）
可繼承： font-size font-family color, UL LI DL DD DT;
不可繼承 ：border padding margin width height ;
優先級就近原則，樣式定義最近者爲準，載入樣式以最後載入的定位爲準。
優先級爲：
       !important >  id > class > tag  
       important 比 內聯優先級高
CSS3新增僞類舉例：
p:first-of-type 選擇屬於其父元素的首個<p>元素的每一個<p>元素。
p:last-of-type  選擇屬於其父元素的最後<p>元素的每一個<p>元素。
p:only-of-type  選擇屬於其父元素惟一的<p>元素的每一個<p>元素。
p:only-child    選擇屬於其父元素的惟一子元素的每一個<p>元素。
p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個<p>元素。
:enabled、:disabled 控制表單控件的禁用狀態。
:checked  單選框或複選框被選中。

如何居中div，如何居中一個浮動元素？

div{
        width:200px;
        margin:0 auto;
     } 

如何理解表現與內容相分離？

表現與結構相分離簡單的說就是HTML中只有標籤元素 表現徹底是由CSS文件控制的。

Firefox下文本沒法撐開容器的高度，如何解決？

清除浮動 .clear{ clear:both; height:0px; overflow:hidden;}

怎麼讓Chrome支持小於12px 的文字？

body{-webkit-text-size-adjust:none} 

介紹一下 Sass 和 Less 是什麼？它們有何區別？

Sass (Syntactically Awesome Stylesheets)是一種動態樣式語言，語法跟css同樣(但多了些功能)，比css好寫，並且更容易閱讀。Sass語法相似與Haml，屬於縮排語法（makeup），用意就是爲了快速寫Html和Css。
Less一種動態樣式語言. 將CSS賦予了動態語言的特性，如變量，繼承，運算， 函數. LESS 既能夠在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (藉助 Node.js)。
區別：
(1))Sass是基於Ruby的，是在服務端處理的，而Less是須要引入less.js來處理Less代碼輸出Css到瀏覽器，也能夠在開發環節使用Less，而後編譯成Css文件，直接放到項目中，也有Less.app、SimpleLess、CodeKit.app這樣的工具，也有在線編譯地址。
(2)變量符不同，less是@，而Scss是$，並且變量的做用域也不同，後面會講到。
(3)輸出設置，Less沒有輸出設置，Sass提供4中輸出選項：nested, compact, compressed 和 expanded。
(4)Sass支持條件語句，可使用if{}else{},for{}循環等等。而Less不支持。

爲何要初始化CSS樣式？

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。
最簡單的初始化方法就是：* {padding: 0; margin: 0;} （筆者不建議這樣）
淘寶的樣式初始化： 
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
    body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
    h1, h2, h3, h4, h5, h6{ font-size:100%; }
    address, cite, dfn, em, var { font-style:normal; }
    code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
    small{ font-size:12px; }
 ul, ol { list-style:none; }
    a { text-decoration:none; }
    a:hover { text-decoration:underline; }
    sup { vertical-align:text-top; }
    sub{ vertical-align:text-bottom; }
    legend { color:#000; }
    fieldset, img { border:0; }
    button, input, select, textarea { font-size:100%; }
    table { border-collapse:collapse; border-spacing:0; }

列出display的值，說明它們的做用。position的值裏，relative和absolute定位原點是？

display的值：
block 像塊類型元素同樣顯示。
none 缺省值。像行內元素類型同樣顯示。
inline-block 像行內元素同樣顯示，但其內容像塊類型元素同樣顯示。
list-item 像塊類型元素同樣顯示，並添加樣式列表標記。
relative和absolute定位原點：
absolute：生成絕對定位的元素，相對於static定位之外的第一個父元素進行定位。
relative：生成相對定位的元素，相對於其正常位置進行定位。