这篇博客主要说一些不怎么常用的，但不是极其罕见的css样式；
outline
outline也是边框样式，但是不同于border的是，outline边框不占html的空间；类似于float的悬浮效果；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span>I love You</span>
<div style="outline: yellowgreen 10px solid;">Tom and Jerry</div>
</body>
</html>
效果如下：
outline边框由于过宽有些遮住span标签的内容；右边的是使用border边框，其余参数都相同；我们很容易看出outline的效果；
outline的隐藏是个很好用的css样式；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input />
<div>上面有一个隐形的输出框</div>
<style >
input{
border: none;
/*outline: none;*/
}
</style>
</body>
</html>
这时，input的border边框被隐藏了，但是，当我们点击该框进行输入时，会发现还有一个边框；这个边框其实就是outline边框；
我们将上文中注释掉的代码放出来，再执行一下（即两个框都隐藏了）
overflow
是设置滚动条的，就是在文本框不够大，而内容又比较多的时候使用，防止其溢出文本框；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>《春》是现代散文家朱自清的作品。《春》是朱自清的散文名篇，最初发表于1933年7月，此后长期被中国中学语文教材选用。 [1] 在该篇“贮满诗意”的“春的赞歌”中，事实上饱含了作家特定时期的思想情绪、对人生及至人格的追求，表现了作家骨子里的传统文化积淀和他对自由境界的向往。1927年之后的朱自清，始终在寻觅着、营造着一个灵魂深处的理想世界——梦的世界，用以安放他“颇不宁静”的拳拳之心，抵御外面世界的纷扰，使他在幽闭的书斋中“独善其身”并成就他的治学。《春》描写、讴歌了一个蓬蓬勃勃的春天，但它更是朱自清心灵世界的一种逼真写照。</div>
<style>
div{
overflow: auto;
height: 50px;
width: 200px;
}
</style>
</body>
</html>
中间那句话是百度对《春》的简介，我们看效果；
这里overflow：auto 是自适应设置滚动条；也可以通过overflow-x 和 overflow-y 指定设置横向或纵向滚动条；注意：因为英文字母不会自动换行，因此使用overflow：auto 设置文本内容为英文字母的自适应滚动条时，横向和纵向滚动条都会有；
visibility
隐藏标签；它不同于display：none的是display甚至可以看做是取消，设置为display：none的标签不仅不可见，而且不占用HTML的空间；而设置为visibility：hidden的标签仅为不可见，但是还会占用HTML的空间；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span style="visibility: hidden;">Tom and Jerry</span>
<span>Tom and Jerry</span>
<span style="display: none;">Tom and Jerry</span>
<span>Tom and Jerry</span>
<style>
span{
border: blue 1px solid;
}
</style>
</body>
</html>
效果如下：
我们可以清楚的看到，第一个span标签仅是隐藏了，但还占用空间，而第三个span标签可以说直接没了；
vertical-align
调整文字的基线（基线就是文字排版的高度）；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span>Tom and Jerry</span>
<img src="img/Butterfly06.jpg" />
<!--<style>
img{
vertical-align: middle;
}
</style>-->
</body>
</html>
这是不使用vertical-align调整基线的效果；
文字的高度没有在图片的中部，我们看起来感觉会不美观；然后将上述注释掉的vertical-align样式放出来；效果如下；
外边距合并
当多个标签都规定了margin的值（外边距），就会出现外边距合并的现象；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span style="margin-bottom: 50px;">Tom and Jerry</span><br />
<span style="margin-bottom: 25px;margin-right: 50px;">Tom and Jerry</span>
<span style="margin-left: 50px;">Tom and Jerry</span>
<style>
span{
border: red 1px solid;
display: inline-block;
}
</style>
</body>
</html>
我们设置三分span标签，全都使用display：inline-block方法提升至块级标签；然后设置边距，第一个span标签与下面的（第二个）span标签的间距设置为50px；第二个span标签与上面的span标签的间距为25px，与右边的（第三个）的边距为50px；第三个span标签与左边的边距为50px；然后我们看效果；
我们会发现，外边距合并时分两种情况；1）上下外边距不合并，但是去两个标签较大的外边距作为共同的外边距；2）左右边距进行合并及相加得到共同的外边距。
