CSS中宽度与高度

div的高度

div由的高度是由它里面的字体乘以字体建议的行高确定，跟这个字体大小没有关系(不同字体相同字体大小，会影响div的高度。)如过明确告诉浏览器行高，div高度就是行高。

文字两端对齐：

文字两端对齐只有中文才有，英文是不需要用两端对齐的。

块级元素：text-align: justify
内联元素：中间的空格都会显示出来只有一个，如果需要用多个空格可以用&nbsp(no break space)表示，但它实际上不是空格。这个空格消除不了。用此方法受制于字体，所以不能用这方法实现两端对齐。

两个inline元素之间不管什么时候，它们中间有回车、空格、Tab或者任何看不见的字符，都会显示成一个空格。

span{
    border: 1px solid green;
    display: inline-block;
     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补.

父元素中子元素垂直居中：

1. 只是垂直在居中父元素上下加padding，左右加margin: 0 auto;

2. 父元素全屏（2种）：
   a.margin: auto;且子元素定高，绝对定位；
   b.父元素加：

   display: flex;
   justify-content: center;
   align-item: center;