html,body最顶层元素.

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

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: <‘flex-direction’> || <‘flex-wrap’>

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: <integer>;

flex-grow: <number>;

flex-shrink: <number>; /* default 1 */

flex-basis: <length> | auto;

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

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,top: 50%;transform:translateY(-50%)居中。

document.querySelectorAll("#my-id div div")==document.querySelector("#my-id").querySelectorAll(":scope div div");

document.querySelector("#my-id").querySelectorAll("div div")==document.querySelector("body").querySelectorAll("div div")

有行高，vertical-align属性才有效。所有元素的默认行高。为font-size

子元素[inline,inline-block]m如没有设定行高，或没有设定font-size，默认继承父元素行高。

display:table-cell,默认行高为height;

同一行元素都可以用vertical-align对齐[inline,inline-block]