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

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