1，元素百比分是相对父元素，所有元素默认父元素是body.
absolute,fixed[只有一个父元素,浏览器窗口]除外[浏览器窗口,为父元素].
css3：vh,vw也永远相对,浏览器窗口.height: 10% == 10vh;absolute:height:100%和height:inherit;有不一样效果。
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: <‘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]
posted on
