CSS学习总结

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同等对待