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

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; }

网易前端微专业------页面架构笔记_第1张图片

按钮按下后高亮暗色

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

网易前端微专业------页面架构笔记_第2张图片

布局解决方案

本文布局都是基于如下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还要差。

做解决方案步骤

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

  2. 对问题分解:水平居中,里面元素宽度不定,外面的元素宽度也不定。
    这样先实现里面的元素的宽度跟着内容走,然后是实现水平居中。

你可能感兴趣的:(网易前端微专业------页面架构笔记)