１．内联元素的宽高
- 给 inline 元素设置宽高是没有任何效果的
- 给inline元素设置margin,padding，左右有效，上下无效（比如span元素的最终的高度由行高和字体决定）
- span和span之间如果有回车或者空格，就会显示为一个空格。实际上两个inline元素，之间有空格或者回车，都会显示为一个空格。
text-align: justify当多行时解决多行对齐的问题
２．多行文字溢出
１．文本对齐（请写出「姓名」与「联系方式」两端对齐的例子）
<style>
div{
border: 1px solid red;
}
span{
width: 5em;
display:inline-block;
border:1px solid black;
text-align: justify;
height: 20px;
line-height: 20px;
overflow: hidden;
}
//关键：
span::after{
content:'';
display:inline-block;
width: 100%;
}
</style>
<div>
<span>姓名</span><br>
<span>联系方式</span>
</div>
效果图
２．单行文本省略
<style>
div{
border: 1px solid red;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
单行文本省略
３．多行文本省略（不兼容IE）
<style>
div{
border: 1px solid red;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
多行文本省略效果图
３．文字垂直居中
比如要求在一个div有文字，要求高40px;
以前，经常用line-height:40px;height:40px；（大错特错）
记住用:（重要）
垂直居中，从内到外，line-height:24px;padding:8px 0;
水平居中，text-align:center;
４．margin合并
如下，有两个div：
<div class="parent">
<div class="child">
233333...
</div>
</div>
问题：parent的高度到底如何确定？
答案似乎很明确，由内部加外部确定，看一个例子：
.parent{
border:2px solid green;
}
.child{
border:1px solid red;
margin: 10px;
}
border
当父元素的border，挡住子元素，子元素的margin起了作用，撑起了父元素。
但是如果将border替换：
.parent{
outline:2px solid green;
}
.child{
border:1px solid red;
margin: 10px;
}
outline
此时会发现，父元素的高度，发生了一些变化。也就是子元素的margin并没有起作用，子元素与父元素上下挨在一起，我们看看现在的父元素子元素都有多高：
margin合并
也就说，这个时候，父元素子元素的margin进行了合并。那么现在很明显有一个答案，就是当子元素有margin，父元素有没有
border很关键。那么还没有其他也会如此影响的呢？肯定是有的。比如：
padding、overflow: hidden。（这里 overflow: hidden确实会去除margin合并，但是不推荐使用）【实际上，这里的意思就是，取决于父元素到底能不能包裹住子元素】问题：div的高度是由什么决定的？
由内部文档流元素的总和决定的。
５．div里面的div如何垂直水平居中？
结构如下：
<div class="parent">
<div class="child">
233333...
</div>
</div>
１．父元素高度不确定：使用padding垂直居中，margin:auto左右居中
.parent{
border:1px solid black;
padding: 20px;
}
.child{
border:1px solid red;
width:100px;
margin: auto;
}
效果图
２．父元素定高：
a.子元素定宽高（top,left,right,botton为０，margin:auto）
<style>
body{
margin:0;
}
.parent{
border:1px solid black;
box-sizing:border-box;
height:100vh
}
.child{
border:1px solid red;
width:100px;
height:100px;
margin: auto;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
</style>
效果图
b.子元素不定高
body{
margin:0;
}
.parent{
border:1px solid black;
box-sizing:border-box;
height:100vh;
display:flex;
justify-content: center;
align-items: center;
}
.child{
border:1px solid red;
}
</style>
用三行代码解决：display:flex; justify-content: center; align-items: center;
效果图和上个差不多，就不贴了。
６．如何实现一个１：１的div？
效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.one{
border:1px solid red;
padding-top:100%; //很骚
}
</style>
</head>
<body>
<div class="one"></div>
</body>
</html>
