網易前端微專業------頁面架構筆記

CSS reset

placeholder 顏色重置

:-moz-placeholder { color:#ccc !important; }
::-moz-placeholder { color:#ccc !important; }
:-ms-input-placeholder { color:#ccc !important; }
:-webkit-input-placeholder { color:#ccc !important; }

input 右測 小叉刪除

input::-ms-clear{ display:none; }

按鈕按下後高亮暗色

html{ -webkit-tap-highlight-color: rgba(0,0,0,0); }

佈局解決方案

本文佈局都是基於以下HTML結構所言：

<div class="parent">
  <div class="child">Demo</div>
</div>

居中佈局-水平居中

子元素於父元素水平居中且其（子元素與父元素）寬度都可變。

inline-block + text-align

.child {
    display: inline-block;
  }
  .parent {
    text-align: center;
  }

inline-block 元素既具備 block 元素能夠設置寬高的特性，同時又具備 inline 元素默認不換行的特性。 設置text-align: center; 對 inline 元素起做用，因此說inline-block元素既可讓div像文本同樣居中，又不會影響div自己的寬高。

這個方案優勢是兼容性很是好，兼容IE6/7 加 *zoom:1;
缺點就是child裏的元素繼承paren的text-align: center屬性，因此child裏的全部內容都會水平居中。要想僅僅是child元素居中，能夠在child上加text-align: left來解決。

table + margin

.child {
    display: table;
    margin: 0 auto;
}

display: table在表現上相似block元素，可是寬度爲內容寬。

這種方法很是經常使用，適用於須要用position:static把盒子撐起來的狀況下的水平居中。

這個方案的優勢很明顯，無需設置父元素樣式，只需對本身進行設置。
兼容IE6/7須要把HTML調整爲<table>的結構。

absolute + transform

.parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

absolute元素的寬度也是由內容決定。
left: 50%;參照物是parent，使child的左側移至parent的水平中央處.
而後運用transform的translate的方法，其中百分比的參照物是自身，因此是以自身寬度的一半向左邊偏移。
方案優勢：絕對定位脫離文檔流，不會對後續元素的佈局形成影響。
缺點：transform爲CSS3屬性，有兼容性問題。IE6/7/8不兼容。

flex + justify-content

.parent {
    display: flex;
    justify-content: center;
  }

  /* 或者下面的方法，能夠達到同樣的效果 */
 
  .parent {
    display: flex;
  }
  .child {
    margin: 0 auto;
  }

優勢只需設置父節點屬性，無需設置子元素。
缺點IE6/7/8不兼容。

垂直居中

居中佈局-垂直居中

表格單元特性(table-cell):table-cell + vertical-align

.parent{
    display: table-cell; 
    vertical-align: middle; 
}

此時parent元素會變爲單元格。
vertical-align能夠做用於inline,inline-block 以及 table-cell元素。
這種作法兼容IE8。

absolute + transform

.parent{
    position：relative;
}
.child{  
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
}

和水平居中相似

flex + align-items

.parent {
    display: flex;
    align-items: center;
  }

優勢:只需設置父節點屬性，無需設置子元素
缺點:有兼容性問題

居中佈局-水平、垂直同時居中

綜合前面的水平居中和垂直居中方法來實現。

inline-block + text-align + table-cell + vertical-align

子元素於父元素垂直及水平居中且其（子元素與父元素）高度寬度都可變。

.parent {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
  }

很容易便能看出，這實際上是inline-block水平居中方案以及table-cell垂直居中方案的組合使用。

absolute + transform

.parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

先利用positions: absolute;left: 50%的特性，使child的左側移至parent的水平中央處，而後利用transform實現child自身的偏移。

因爲transform屬性的translate的方法在設置百分比類型的值時，其參照對象是自身，所以只須要各設置50%，就能實現往水平方向偏移自身寬度的一半，又或往垂直方向偏移自身高度的一半。

這個方法用起來不復雜，也很好理解，但缺點也很是明顯：transform屬性的兼容性問題。

flex + justify-content + align-items

.parent{

display: flex;
justify-content: center;    //水平居中，至關於text-align
align-items: center;    //垂直居中，至關於vertical-align

}
兼容性比上面的transform還要差。

作解決方案步驟

1. 要了解css屬性的值的特性，好比flex, display:table, display: inline-block, display: table-cell。

2. 對問題分解：水平居中，裏面元素寬度不定，外面的元素寬度也不定。這樣先實現裏面的元素的寬度跟着內容走，而後是實現水平居中。