网易微专业java高级笔记_网易前端微专业------页面架构笔记

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结构所言：

Demo

居中布局-水平居中

子元素于父元素水平居中且其(子元素与父元素)宽度均可变。

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调整为

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还要差。

做解决方案步骤

要了解css属性的值的特性，比如flex, display:table, display: inline-block, display: table-cell。

对问题分解：水平居中，里面元素宽度不定，外面的元素宽度也不定。

这样先实现里面的元素的宽度跟着内容走，然后是实现水平居中。