HTML元素设置顶层,html,body最顶层元素.

1，元素百比分是相对父元素，所有元素默认父元素是body.

absolute,fixed[只有一个父元素,浏览器窗口]除外[浏览器窗口,为父元素].

css3：vh,vw也永远相对,浏览器窗口.height: 10% == 10vh

box-sizing: border-box; width包有padding;

2,设定height,width父元素，子元素不能撑开父元素。子元素溢出，可以用overfloat:hidden。

3,inline无height,width.内容决定大小.

4,inline，inline-block都会受到lineheight、fontsize以及vertical-align的共同影响，

设置下{vertical-align：top}或者 bottom.

5,

浮动元素

.clearfix{

*zoom:1;

}

.clearfix:after{

content:"",

display:block;

clear:both

}

6,

.clearfix{

*zoom:1;

clear:both

}

7,margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom 都以父元素width。这点记住。

display:flex;

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow: ||

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items: flex-start | flex-end | center | baseline | stretch;

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

order: ;

flex-grow: ;

flex-shrink: ; /* default 1 */

flex-basis: | auto;

flex: none | [ ? || ]

align-self: auto | flex-start | flex-end | center | baseline | stretch;

8.calc(100% - 25px);word-break: break-all;换行 word-wrap: break-word 换行[换行后,如果不是一个word 还要换行]white-space: nowrap;不换行.word-spacing:-3px;letter-Spacing = ‘-.15em‘;字符间距.

transform:translate(-50%,-50%) 自身高度，宽度50% 平移

9,http://codepen.io/jianyeruan/pen/NNGMPN 排板记住看一下:

display:

block

inline

inline-block

float:left

position:

relative

absolute 脱离文档流,元父元素,浏览器窗口,为父元素，相对显屏.left,top,bottom,right属性.文档

fixed 脱离文档流,永远以浏览器窗口,为父元素.

11

原文：http://www.cnblogs.com/jayruan/p/5244372.html