1. 文档流（normal flow）
1.1 块级元素的宽高
为什么写font-size时，div的高度不是font-size的高度？
因为字和字之间是通过基线对齐。
字体有建议行高，不同字体的建议行高不一样。
当块级元素内部只有内联元素时，块级元素的高是由内联元素的行高确定，当内联元素的行高不定时，由内联元素的字体大小和相应字体的建议行高得出行高。
写html的时候，两个inline元素之间多个空格相当于一个空格，inline元素与块级元素之间的空格忽略。如果想写多个空格用 
text-align：justify 多行对齐
span: : after{
content:'';
display:inline-block;
width:100%;
border:1px solid blue;
}
span{
display:inline-block;
width:5em;
line-height:20px;
height:20px;
text-align:justify;
overflow:hidden;
}
.clearfix::after{
content:'';
display:block;
clear:both;
}
word-break:{
break-all
}
white-space:nowrap
不换行
单行文本溢出省略号：
width:250px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
多行文本溢出省略号：
border:1px solid black;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow:hidden;
border：占据空间，outline不占据空间
不要写高度，通过line-hight和padding自适应
内联元素的宽度由个数决定，内联元素的padding，margin和border会影响宽度但是不会影响高度。内联元素的高度是由行高决定的。
块级的宽度自适应父级的宽度，高度{如果内部是内联元素，内联元素的行高加起来；里面是块级元素，那么padding，margin和border加起来，文档流的高度}
实现一个一比一的div{
.one{
border:1px solid red
padding-top:100%}
垂直居中{
border:1px solid red;
line-height:24px;
padding:7px;
text-align:center;
}
堆叠顺序
z-index只对position非static的元素有用，relative和absolute同等对待
