CSS中宽度与高度
div的高度
div由的高度是由它里面的字体乘以字体建议的行高确定，跟这个字体大小没有关系(不同字体相同字体大小，会影响div的高度。)如过明确告诉浏览器行高，div高度就是行高。
文字两端对齐：
文字两端对齐只有中文才有，英文是不需要用两端对齐的。
块级元素：text-align: justify
内联元素：中间的空格都会显示出来只有一个，如果需要用多个空格可以用 (no break space)表示，但它实际上不是空格。这个空格消除不了。用此方法受制于字体，所以不能用这方法实现两端对齐。
两个inline元素之间不管什么时候，它们中间有回车、空格、Tab或者任何看不见的字符，都会显示成一个空格。
span{
border: 1px solid green;
display: inline-block;
width: 5em;
text-align: justify;
line-height: 20px; //行高也为20px
height: 20px; //强制span高度，高度被限死了之后，蓝色的线就会脱离它
overflow: hidden; //蓝色的线就看不见了
}
span::after{
content: '';
display: inline-block;
border: 1px solid blue; //看不见的东西加border，它的宽度和的span一样宽，加了这个之后，姓名两个字要和宽度为100%的蓝色先对齐，
}
浮动
左右布局把所有的子元素加上float:left;在子元素的父元素上面加上class="clearfix"，样式中加上下面clearfix的三行代码：
ul {
margin: 0;
padding: 0;
list-style: none;
}
ui > li {
border: 1px solid red;
float:left;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
文档流
文档流：内联元素从左到右，块级元素从上到下，div的高度是由它内部文档流中元素高度总和决定的
脱离文档流在子元素上加： float: left;,position: absolute;,position: fixed;
内联元素的文本足够多，一行容不下时会自动换行，这就是文档流；如果一个单词足够长，长到一行放不下：要么用连字符连接前后，要么用word-break: break-all，意思是该什么时候断就什么时候断，不要管他是不是一个整体。
文本隐藏
块级元素一行文本隐藏显示：
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}块级元素多行文本隐藏显示：
p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}margin合并问题：
如果父元素内部有子元素，父元素的高度会受子元素的margin影响，如果父元素有东西挡着子元素的margin（border、padding、overflow: hidden、内联元素），父元素和子元素之间有空隙，否则没有空隙，子元素的margin会从父元素中溢出，从而影响父元素与其外面元素的距离。
垂直居中
文字垂直居中，不要写死高度，写一个行高，剩余高度用padding补.
父元素中子元素垂直居中：
- 只是垂直在居中父元素上下加
padding，左右加margin: 0 auto; 父元素全屏（2种）：
a.margin: auto;且子元素定高，绝对定位；
b.父元素加：display: flex; justify-content: center; align-item: center;