网易前端微专业------页面架构笔记

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. 对问题分解：水平居中，里面元素宽度不定，外面的元素宽度也不定。
   这样先实现里面的元素的宽度跟着内容走，然后是实现水平居中。